CSS3 Kaskadowe arkusze stylow cwiczenia praktyczne

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą
kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym,
magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź
towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte
w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej
odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie
praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również
żadnej odpowiedzialności za ewentualne szkody
wynikłe z wykorzystania informacji zawartych w książce.

Redaktor prowadzący: Michał Mrowiec
Projekt okładki: Maciek Pasek

Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie?cwcss3
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Kody źródłowe wybranych przykładów dostępne są pod adresem:
ftp://ftp.helion.pl/przyklady/cwcss3.zip

ISBN: 978-83-246-6490-0

Printed in Poland.

Księgarnia internetowa

•

Lubię to! » Nasza społeczność

Spis treci

Wstp

Rozdzia 1. Wstawianie stylów

Kaskadowo

Styl lokalny

Arkusz wewntrzny

Poprawno kodu

Dwa rodzaje stylów w jednym dokumencie

Arkusz zewntrzny

Kilka arkuszy zewntrznych

Podsumowanie

Rozdzia 2. Selektory

Grupy selektorów

Grupowanie elementów

Style akapitów i nagówków

Selektory atrybutów

Selektory specjalne

Selektory pseudoklas

Selektory pseudoelementów

Rozdzia 3. Napisy

Czcionki

Tekst

Kup książkę

Poleć książkę

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

Rozdzia 4. To, kolory, transformacje

Kolor ta

Grafika jako to

100

Powtarzanie ta

102

To nieruchome

106

Pozycja ta

109

Grafiki przezroczyste

116

Rozdzia 5. Obramowania i przejcia

127

Obramowanie

127

Obramowanie czstkowe

128

Jednolity styl obramowania

131

Niejednolity styl obramowania

132

Szeroko obramowania

134

Obramowanie zaokrglone

135

Obramowanie cieniowane

137

Przejcia

143

Rozdzia 6. Animacje, szpalty i interfejs uytkownika

149

Animacje

149

Szpalty

157

Interfejs uytkownika

162

Dodatek A

Streszczenie skadni selektorów

167

Dodatek B

Wybrane waciwoci

171

Poleć książkę

Kup książkę

Obramowania

i przejcia

CSS pozwala nie tylko na wygodne zarzdzanie czcionkami
i kolorami, ale równie rozplanowaniem poszczególnych ele-
mentów na stronie. Aby zmieni wygld serwisu, nie trzeba

od nowa redagowa kadej strony. Wystarczy wprowadzi poprawk
w arkuszu stylów i mona cakowicie odmieni wygld witryny.

Obramowanie

Waciwo

border

umoliwia utworzenie obramowania. Ma ona nast-

pujc posta:

selektor {border: wartoci atrybutów}

W I C Z E N I E

5.1

Obramowanie podwójne

Utwórz dokument (X)HTML, w którym akapit wyróniony bdzie
podwójnym obramowaniem w kolorze srebrnym. Szeroko obramo-
wania powinna wynosi 18 pikseli. W akapicie uyj czcionki szarej,
która przypomina pismo rczne.

Poleć książkę

Kup książkę

1 2 8

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
´CHARSET=iso-8859-2">
<style type="text/css">
p
{
font-family: cursive;
color: gray;
border: double 18px silver;
}
</style>
</HEAD>
<BODY>
<p>
Danuka wesza na aw i zacza gra na lutownicy.
</p></BODY></HTML>

Zapisz kod do pliku index74.htm.

Wywietl plik w oknie przegldarki (rysunek 5.1).

Rysunek 5.1. Tekst akapitu w obramowaniu podwójnym

Obramowanie czstkowe

CSS umoliwia zdefiniowanie innego rodzaju obramowania dla kadej
krawdzi.

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 2 9

W I C Z E N I E

5.2

Inny rodzaj obramowania dla kadej krawdzi

Utwórz dokument (X)HTML, w którym na górze akapitu bdzie obra-
mowanie róowe lini podwójn o szerokoci 6 pikseli, za na dole
obramowanie róowe lini kropkowan o szerokoci 12 pikseli. W aka-
picie uyj czcionki szarej, która przypomina pismo rczne.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-
8859-2">
<style type="text/css">
p
{
font-family: cursive;
color: gray;
border-bottom-style: dotted;
border-bottom-width: 12px;
border-bottom-color: pink;
border-top-style: double;
border-top-width: 6px;
border-top-color: pink;
}
</style>
</HEAD>
<BODY>
<p>
W tym czasie we Woszech dziaali m.in. Leonardo da Vinci, Rafael
´i Micha Anio Stró.
</p></BODY></HTML>

Zapisz kod do pliku index75.htm.

Wywietl plik w oknie przegldarki (rysunek 5.2).

Rysunek 5.2. CSS pozwala zdefiniowa inny rodzaj obramowania dla kadej
krawdzi

Poleć książkę

Kup książkę

1 3 0

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

W I C Z E N I E

5.3

Obramowanie przy jednej krawdzi

Utwórz dokument (X)HTML, w którym po lewej stronie akapitu bdzie
obramowanie czerwone lini pojedyncz o szerokoci 12 pikseli.
W akapicie uyj czcionki w kolorze morskim, która przypomina
pismo rczne.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-
8859-2">
<style type="text/css">
p
{
font-family: cursive;
color: navy;
border-left-style: solid;
border-left-width: 12px;
border-left-color: red;
}
</style>
</HEAD>
<BODY>
<p>
Archimedes siedzia w wannie i w pewnym momencie zawoa Eurek.
</p></BODY></HTML>

Zapisz kod do pliku index76.htm.

Wywietl plik w oknie przegldarki (rysunek 5.3).

Rysunek 5.3. Obramowanie przy lewej krawdzi tekstu

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 3 1

Do lokalizowania obramowania su nastpujce atrybuty:

bottom

— dolne obramowanie,

left

— lewe obramowanie,

right

— prawe obramowanie,

top

— górne obramowanie.

Jednolity styl obramowania

Waciwo

border-style

umoliwia zdefiniowanie jednolitego stylu

obramowania. Ma ona nastpujc posta:

selektor {border-style: styl}

W I C Z E N I E

5.4

Przegld stylów obramowania

Utwórz dokument (X)HTML, w którym uyte zostan wszystkie style
obramowania. W kadej ramce wpisz nazw stylu. Obramowanie
powinno by szare, o szerokoci 10 pikseli. Do napisów uyj czcionki
w kolorze szarym, która przypomina pismo rczne.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<style type="text/css">
* {
font-family: cursive;
color: gray;
weight: bold;
}
</style>
</HEAD>
<BODY>
<p style="border: none 10px;">none</p>
<p style="border: dotted 10px;">dotted</p>
<p style="border: dashed 10px;">dashed</p>
<p style="border: solid 10px;">solid</p>
<p style="border: double 10px;">double</p>
<p style="border: groove 10px;">groove</p>
<p style="border: ridge 10px;">ridge</p>

Poleć książkę

Kup książkę

1 3 2

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

<p style="border: inset 10px;">inset</p>
<p style="border: outset 10px;">outset</div
</BODY></HTML>

Zapisz kod do pliku index77.htm.

Wywietl plik w oknie przegldarki (rysunek 5.4).

Rysunek 5.4. Wszystkie rodzaje obramowania

Niejednolity styl obramowania

Waciwo

border-...-style

umoliwia zdefiniowanie innego stylu

obramowania dla kadej krawdzi. Ma ona nastpujc posta:

selektor {border-...-style: styl}

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 3 3

W I C Z E N I E

5.5

Przypisane obramowanie do nagówka

Utwórz dokument (X)HTML, w którym uyte zostan style

. Do

stylu

przypisz obramowanie. Z lewej strony i od góry powinno by

lini cig o szerokoci 3 pikseli. Z prawej strony i od dou powinno
by lini podwójn o szerokoci 4 pikseli. Do napisów uyj czcionki,
która przypomina pismo rczne. Wszystkie elementy strony powinny
by w kolorze zielonym.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<style type="text/css">
* {
font-family: cursive;
color: green;
}
h2
{
border-bottom-style: double; border-width: 4px;
border-right-style: double; border-width: 4px;
border-top-style: solid; border-width: 3px;
border-left-style: solid; border-width: 3px;
}
</style>
</HEAD>
<BODY>
<h1>To jest styl h1.</h1>
<h2>To jest styl h2.</h2>
</BODY></HTML>

Zapisz kod do pliku index78.htm.

Wywietl plik w oknie przegldarki (rysunek 5.5).

Do definiowania innego stylu obramowania dla kadej krawdzi su
nastpujce atrybuty:

border-bottom-style

— dolna krawd obramowania,

border-left-style

— lewa krawd obramowania,

border-right-style

— prawa krawd obramowania,

border-top-style

— górna krawd obramowania.

Poleć książkę

Kup książkę

1 3 4

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

Rysunek 5.5. Do nagówka h2 przypisane jest obramowanie o dwóch stylach

Szeroko obramowania

Waciwo

border-width

umoliwia okrelenie szerokoci obramowa-

nia. Ma ona nastpujc posta:

selektor { border-width: szeroko}

W I C Z E N I E

5.6

Definiowanie szerokoci ramek sownie i liczbowo

Utwórz dokument (X)HTML, w którym uyte zostan trzy definicje
sowne szerokoci obramowania oraz obramowanie o szerokoci
7 pikseli. W kadej ramce wpisz szeroko. Do napisów uyj czcionki,
która przypomina pismo rczne. Dokument powinien by utrzymany
w kolorystyce: to róowe, napisy i obramowanie kasztanowe.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<style type="text/css">
* {
font-family: cursive;
color: maroon;
background: pink;
}
</style>
</HEAD>
<BODY>
<p style="border-style: solid; border-width: thin;" >thin</p>

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 3 5

<p style="border-style: solid; border-width: medium;" >medium</p>
<p style="border-style: solid; border-width: thick;" >thick</p>
<p style="border-style: solid; border-width: 7px;" >7 pikseli</p>
</BODY></HTML>

Zapisz kod do pliku index79.htm.

Wywietl plik w oknie przegldarki (rysunek 5.6).

Rysunek 5.6. Szerokoci ramek zdefiniowane sownie i liczbowo

Obramowanie zaokrglone

Waciwo

border-radius

umoliwia okrelenie zaokrglenia ramki.

Ma ona nastpujc posta:

selektor { border-radius: promie}

W I C Z E N I E

5.7

Obramowanie z zaokrgleniami

Utwórz dokument (X)HTML, w którym uyte zostanie obramowanie
zaokrglone o gruboci i promieniu krzywizny wynoszcych 25 pikseli.
W caym dokumencie uyj czcionki przypominajcej pismo rczne,
pogrubionej. Kolor ta powinien by óty, a ramki i tekstu kasztanowy.

Otwórz Notatnik.

Wpisz w nim kod:

Poleć książkę

Kup książkę

1 3 6

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

<HTML>
<HEAD>
<style type="text/css">
* {
font-family: cursive;
font-weight: bold;
color: maroon;
background: yellow;
}
div
{
border:25px groove;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</HEAD>
<BODY>
<div>
W czasie dyskoteki byo nawet ciekawie, bo kilka razy interweniowaa
´policja.
</div>
</BODY></HTML>

Zapisz kod do pliku index80.htm.

Wywietl plik w oknie przegldarki (rysunek 5.7).

Rysunek 5.7. Obramowanie z zaokrgleniami. Efekt uzyskany bez uycia
plików graficznych

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 3 7

Obramowanie cieniowane

Waciwo

box-shadow

umoliwia okrelenie cieniowania obramowa-

nia. Ma ona nastpujc posta:

selektor { box-shadow: przesunicie-poziome przesunicie-pionowe
´promie-rozmycia zasig kolor }

W I C Z E N I E

5.8

Obramowanie z cieniem na zewntrz

Utwórz dokument (X)HTML, w którym wokó napisu utworzone zosta-
nie obramowanie. Kolor ta powinien by srebrny, a napisów i obra-
mowania szary. Obramowanie powinno mie rozmycie na zewntrz.
W caym dokumencie uyj czcionki przypominajcej pismo rczne,
pogrubionej.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<style type="text/css">
* {
font-family: cursive;
font-weight: bold;
color: gray;
background: silver;
}
p
{
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
</style>
</HEAD>
<BODY>
<p>
Soplica mia wyrzuty po mordzie.
</p>
</BODY></HTML>

Zapisz kod do pliku index81.htm.

Wywietl plik w oknie przegldarki (rysunek 5.8).

Poleć książkę

Kup książkę

1 3 8

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

Rysunek 5.8. Obramowanie z cieniem na zewntrz

W I C Z E N I E

5.9

Obramowanie z cieniem do wewntrz

Utwórz dokument (X)HTML, w którym wokó napisu utworzone zosta-
nie obramowanie. Kolor ta powinien by srebrny, a napisów i obra-
mowania szary. Obramowanie powinno mie rozmycie do wewntrz.
W caym dokumencie uyj czcionki przypominajcej pismo rczne,
pogrubionej.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<style type="text/css">
* {
font-family: cursive;
font-weight: bold;
color: gray;
background: silver;
}
p
{
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
</style>
</HEAD>
<BODY>
<p>
Soplica mia wyrzuty po mordzie.
</p>
</BODY></HTML>

Zapisz kod do pliku index82.htm.

Wywietl plik w oknie przegldarki (rysunek 5.9).

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 3 9

Rysunek 5.9. Obramowanie z cieniem do wewntrz

W I C Z E N I E

5.10

Obramowanie tczowe

Utwórz dokument (X)HTML, w którym wokó napisu utworzone zosta-
nie obramowanie tczowe. Kolor ta powinien by óty, a napisów
zielony. Obramowanie powinno mie rozmycie na zewntrz. W caym
dokumencie uyj czcionki przypominajcej pismo rczne, pogrubionej.

Otwórz Notatnik.

Wpisz w nim kod:

<HTML>
<HEAD>
<style type="text/css">
* {
font-family: cursive;
font-weight: bold;
color: green;
background: yellow;
}
p
{
-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px

30px lime, -20px -15px 30px blue, 20px -15px 30px red;
-webkit-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px

15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px

lime, -20px -15px 30px blue, 20px -15px 30px red;
}
</style>
</HEAD>
<BODY>
<p>
Soplica mia wyrzuty po mordzie.
</p>
</BODY></HTML>

Poleć książkę

Kup książkę

1 4 0

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

Zapisz kod do pliku index83.htm.

Wywietl plik w oknie przegldarki (rysunek 5.10).

Rysunek 5.10. Obramowanie z cieniem na zewntrz

W I C Z E N I E

5.11

Ramka w ramce

Utwórz dokument (X)HTML, w którym brzowy tekst zostanie umiesz-
czony na pomaraczowym tle. Wokó akapitu utworzona zostanie br-
zowa ramka o szerokoci 4 pikseli. Odlego pomidzy ramk a tek-
stem powinna wynosi 50 pikseli. W caym dokumencie uyj czcionki
przypominajcej pismo rczne, pogrubionej.

Otwórz Notatnik.

Wpisz w nim kod:

<html>
<head>
<style type="text/css">
p
{
color: brown;
font-weight: bold;
width:300px;
padding:50px;
background-color:orange;
background-clip:content-box;
-webkit-background-clip:content-box; /* Safari */
border:4px solid brown;
}
</style>
</head>
<body>
<p>
Królik jest tak oddany swym maym, e wyrywa sobie kaki sierci z
brzucha, eby wycieli im gniazdko. Który ojciec rodziny zdobyby
si na to?

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 4 1

</p>
</body>
</html>

Zapisz kod do pliku index84.htm.

Wywietl plik w oknie przegldarki (rysunek 5.11).

Rysunek 5.11. Tekst wyróniony przy wykorzystaniu waciwoci
background-clip

W I C Z E N I E

5.12

Zawinicie tekstu

Utwórz dokument (X)HTML, w którym tekst zostanie umieszczony
w ramce. Spowoduj, aby nawet dugie sowo nie wychodzio na
zewntrz ramki.

Otwórz Notatnik.

Wpisz w nim kod:

<html>
<head>
<style type="text/css">
p.x
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="x">

Poleć książkę

Kup książkę

1 4 2

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

Huraaaaaaaaaaaaaaaaaaaaaaaaaa! Zakrzyknli Indianie, a potem
zabijali i skalpowali, co popadnie.
</p>
</body>
</html>

Zapisz kod do pliku index85.htm.

Wywietl plik w oknie przegldarki (rysunek 5.12).

Rysunek 5.12.
Waciwo word-
wrap:break-word
powoduje
zawinicie tekstu

W I C Z E N I E

5.13

Justowanie wewntrz ramki

Utwórz dokument (X)HTML, w którym tekst akapitu zostanie umiesz-
czony w ramce. Wyjustuj tekst.

Otwórz Notatnik.

Wpisz w nim kod:

<html>
<head>
<style type="text/css">
div
{
border:1px solid #000000;
text-align:justify;
text-justify:inter-word;
}
</style>
</head>
<body>
<h1>Sowianie</h1>
<div>Sowianie mieszkali w domach z drewna, z których dym wychodzi
mniejszymi otworami, a Sowianie wikszymi.</div>
</body>
</html>

Zapisz kod do pliku index86.htm.

Wywietl plik w oknie przegldarki (rysunek 5.13).

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 4 3

Rysunek 5.13. Justowanie za pomoc waciwoci text-justify:inter-word

Zmie szeroko okna (rysunek 5.14).

Rysunek 5.14.
Mimo zmiany
szerokoci strony
tekst pozostaje
wyjustowany

Przejcia

Wyrónienie elementu strony nie musi by statyczne. Moe si ono
zmienia np. po wskazaniu obiektu kursorem. Przejcia CSS3 s efek-
tami, które pozwalaj elementom stopniowo zmienia wygld.

W I C Z E N I E

5.14

Obrót tekstu po naprowadzeniu na niego kursora

Utwórz dokument (X)HTML, w którym tekst bdzie obraca si po
naprowadzeniu na niego kursora. Tekst ma znajdowa si na srebr-
nym tle. Obrót ma wynosi 360 stopni i trwa 4 sekundy. Po przesuni-
ciu kursora z tekstu ma on wraca w pooenie pierwotne.

Poleć książkę

Kup książkę

1 4 4

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

Otwórz Notatnik.

Wpisz w nim kod:

<html>
<head>
<style type="text/css">
div
{
width:140px;
height:65px;
background:silver;
transition:width 4s, height 4s;
-moz-transition:width 4s, height 4s, -moz-transform 4s; /* Firefox 4
*/
-webkit-transition:width 4s, height 4s, -webkit-transform 4s; /*
Safari and Chrome */
-o-transition:width 4s, height 4s, -o-transform 4s; /* Opera */
}
div:hover
{
width:140px;
height:65px;
transform:rotate(360deg);
-moz-transform:rotate(360deg); /* Firefox 4 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-o-transform:rotate(360deg); /* Opera */
}
</style>
</head>
<body>
<div>Wraz z wynalezieniem koa i pienidzy ludzie zaczli krci
interesy. </div>
</body>
</html>

Zapisz kod do pliku index87.htm.

Wywietl plik w oknie przegldarki (rysunek 5.15).

Rysunek 5.15.
Tekst w pooeniu
pocztkowym

Umie kursor wewntrz ramki z tekstem (rysunek 5.16).

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 4 5

Rysunek 5.16.
Podczas rotacji
pogorszeniu ulega
czytelno czcionki

W I C Z E N I E

5.15

Zmiana ksztatu ramki podczas obracania tekstu

Utwórz dokument (X)HTML, w którym tekst bdzie obraca si po
naprowadzeniu na niego kursora. Tekst ma znajdowa si na srebrnym
tle z szar ramk. Pocztkowo to ma by prostoktne, a po obrocie
okrge. Obrót ma wynosi 360 stopni. Lewa krawd obiektu wraz
z napisem ma przesun si od 120 pikseli do 400 pikseli. Po przesu-
niciu kursora z tekstu ma on wraca w pooenie pierwotne.

Otwórz Notatnik.

Wpisz w nim kod:

<html>
<head>
<style type="text/css">
div
{
position: absolute;
left: 120px;
width: 100px;
height: 100px;
background:silver;
border: 8px solid gray;
background: silver;
color: black;
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
-ms-transition: 1s all ease-in-out;
}

div:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);

Poleć książkę

Kup książkę

1 4 6

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
left: 400px;
background: silver;
border: 8px solid gray;
border-radius: 45px;
color: black;
}
</style>
</head>
<body>
<div>Wraz z wynalezieniem koa i pienidzy ludzie zaczli krci
interesy. </div>
</body>
</html>

Zapisz kod do pliku index88.htm.

Wywietl plik w oknie przegldarki (rysunek 5.17).

Rysunek 5.17. Tekst w pooeniu pocztkowym

Umie kursor wewntrz ramki z tekstem (rysunek 5.18).

Rysunek 5.18. Podczas przetaczania rogi ramki ulegaj zaokrgleniu

Poleć książkę

Kup książkę

R o z d z i a 5 . • O b r a m o w a n i a i p r z e j c i a

1 4 7

W I C Z E N I E

5.16

Rozszerzanie ramki po naprowadzeniu na ni kursora

Utwórz dokument (X)HTML, w którym ramka z tekstem bdzie si roz-
szerzaa po naprowadzeniu na ni kursora. Tekst ma znajdowa si na
ótym tle. Pocztkowe wymiary ramki maj wynosi 60×150 pikseli,
a kocowe 320×150 pikseli. Transformacja ma si rozpoczyna po
2 sekundach od wskazania obiektu kursorem. Czas jej trwania ma
wynosi 1 sekund.

Otwórz Notatnik.

Wpisz w nim kod:

<html>
<head>
<style type="text/css">
div
{
width:60px;
height:150px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
div:hover
{
width:320px;
height:150px;
}
</style>
</head>

Poleć książkę

Kup książkę

1 4 8

C S S 3 . K a s k a d o w e a r k u s z e s t y l ó w • w i c z e n i a p r a k t y c z n e

<body>
<div>Telewizja to zodziej czasu, ale ja tego zodzieja lubi.
</div>
</body>
</html>

Zapisz kod do pliku index89.htm.

Wywietl plik w oknie przegldarki (rysunek 5.19).

Rysunek 5.19.
Obiekt przed
transformacj

Wska kursorem lewy górny naronik ramki (rysunek 5.20).

Rysunek 5.20.
Kontener zwikszy
szeroko

Poleć książkę

Kup książkę

Wyszukiwarka

Podobne podstrony:

więcej podobnych podstron