Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00358 005990 13100596 na godz. na dobę w sumie
CSS3. Kaskadowe arkusze stylów. Ćwiczenia praktyczne - książka
CSS3. Kaskadowe arkusze stylów. Ćwiczenia praktyczne - książka
Autor: Liczba stron: 176
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-6490-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Przekonaj się, jak łatwo tworzyć atrakcyjne strony WWW dzięki CSS3!

Kaskadowe arkusze stylów - jak powszechnie wiadomo - służą do określania sposobu, w jaki prezentowana jest treść dokumentów HTML. Choć spełniane przez nie zadanie wydaje się banalnie proste, rozwiązanie to zrewolucjonizowało metodę tworzenia i wyświetlania stron internetowych, ponieważ dzięki niemu wygodnie i wydajnie udaje się oddzielać treści WWW od ich prezentacji. Trudno dziś znaleźć serwis internetowy, w którym nie zostałyby zastosowane kaskadowe arkusze stylów, a w coraz większej liczbie witryn wykorzystuje się najnowszy i najbardziej rozbudowany standard CSS3.

Jeśli chcesz poznać go od praktycznej strony, sięgnij po książkę 'CSS3. Kaskadowe arkusze stylów. Ćwiczenia praktyczne'. Bez zbędnej teorii wprowadzi Cię ona w świat nowoczesnych rozwiązań, używanych przez projektantów serwisów WWW, a także pokaże, jak bez drogich i trudno dostępnych narzędzi tworzyć efektowne strony internetowe. Dzięki niej poznasz najlepsze sposoby zastosowania CSS3 w swoich projektach i dowiesz się, jak unikać problemów związanych z różnicami w obsłudze standardu przez różne przeglądarki. Książka nie jest zwykłym przeglądem selektorów i właściwości, lecz praktycznym przewodnikiem po świecie arkuszy stylów, który doprowadzi Cię do zamierzonego celu najkrótszą i najmniej wyboistą z dróg.

Szkoda czasu na błądzenie! Z tą książką trafisz wprost do celu!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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 Copyright © Helion 2013 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treĂci WstÚp Rozdziaï 1. Wstawianie stylów KaskadowoĂÊ Styl lokalny Arkusz wewnÚtrzny PoprawnoĂÊ kodu Dwa rodzaje stylów w jednym dokumencie Arkusz zewnÚtrzny Kilka arkuszy zewnÚtrznych 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 5 13 13 14 16 18 21 24 26 28 31 32 34 38 42 48 52 59 69 69 86 4 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne Rozdziaï 4. Tïo, kolory, transformacje Kolor tïa Grafika jako tïo Powtarzanie tïa Tïo nieruchome Pozycja tïa Grafiki przezroczyste Rozdziaï 5. Obramowania i przejĂcia Obramowanie Obramowanie czÈstkowe Jednolity styl obramowania Niejednolity styl obramowania SzerokoĂÊ obramowania Obramowanie zaokrÈglone Obramowanie cieniowane PrzejĂcia Rozdziaï 6. Animacje, szpalty i interfejs uĝytkownika Animacje Szpalty Interfejs uĝytkownika Streszczenie skïadni selektorów Dodatek A Dodatek B Wybrane wïaĂciwoĂci 99 99 100 102 106 109 116 127 127 128 131 132 134 135 137 143 149 149 157 162 167 171 5 Obramowania i przejĂcia CSS pozwala nie tylko na wygodne zarzÈdzanie czcionkami i kolorami, ale równieĝ rozplanowaniem poszczególnych ele- mentów na stronie. Aby zmieniÊ wyglÈd serwisu, nie trzeba od nowa redagowaÊ kaĝdej strony. Wystarczy wprowadziÊ poprawkÚ w arkuszu stylów i moĝna caïkowicie odmieniÊ wyglÈd witryny. Obramowanie WïaĂciwoĂÊ border umoĝliwia utworzenie obramowania. Ma ona nastÚ- pujÈcÈ postaÊ: selektor {border: wartoħci atrybutów} m W I C Z E N I E 5.1 Obramowanie podwójne Utwórz dokument (X)HTML, w którym akapit wyróĝniony bÚdzie podwójnym obramowaniem w kolorze srebrnym. SzerokoĂÊ obramo- wania powinna wynosiÊ 18 pikseli. W akapicie uĝyj czcionki szarej, która przypomina pismo rÚczne. 128 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne 1. Otwórz Notatnik. 2. 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 Danuħka weszđa na đawú i zaczúđa graè na lutownicy. /p /BODY /HTML 3. Zapisz kod do pliku index74.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.1). Rysunek 5.1. Tekst akapitu w obramowaniu podwójnym Obramowanie czÈstkowe CSS umoĝliwia zdefiniowanie innego rodzaju obramowania dla kaĝdej krawÚdzi. Rozdziaï 5. • Obramowania i przejĂcia 129 m W I C Z E N I E 5.2 Inny rodzaj obramowania dla kaĝdej krawÚdzi Utwórz dokument (X)HTML, w którym na górze akapitu bÚdzie obra- mowanie róĝowe liniÈ podwójnÈ o szerokoĂci 6 pikseli, zaĂ na dole obramowanie róĝowe liniÈ kropkowanÈ o szerokoĂci 12 pikseli. W aka- picie uĝyj czcionki szarej, która przypomina pismo rÚczne. 1. Otwórz Notatnik. 2. 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 Wđoszech dziađali m.in. Leonardo da Vinci, Rafael ´i Michađ Aniođ Stróľ. /p /BODY /HTML 3. Zapisz kod do pliku index75.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.2). Rysunek 5.2. CSS pozwala zdefiniowaÊ inny rodzaj obramowania dla kaĝdej krawÚdzi 130 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne m W I C Z E N I E 5.3 Obramowanie przy jednej krawÚdzi Utwórz dokument (X)HTML, w którym po lewej stronie akapitu bÚdzie obramowanie czerwone liniÈ pojedynczÈ o szerokoĂci 12 pikseli. W akapicie uĝyj czcionki w kolorze morskim, która przypomina pismo rÚczne. 1. Otwórz Notatnik. 2. 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 zawođađ Eurekú. /p /BODY /HTML 3. Zapisz kod do pliku index76.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.3). Rysunek 5.3. Obramowanie przy lewej krawÚdzi tekstu Rozdziaï 5. • Obramowania i przejĂcia 131 Do lokalizowania obramowania sïuĝÈ nastÚpujÈce atrybuty: T bottom — dolne obramowanie, T left — lewe obramowanie, T right — prawe obramowanie, T top — górne obramowanie. Jednolity styl obramowania WïaĂciwoĂÊ border-style umoĝliwia zdefiniowanie jednolitego stylu obramowania. Ma ona nastÚpujÈcÈ postaÊ: selektor {border-style: styl} m W I C Z E N I E 5.4 PrzeglÈd stylów obramowania Utwórz dokument (X)HTML, w którym uĝyte zostanÈ wszystkie style obramowania. W kaĝdej ramce wpisz nazwÚ stylu. Obramowanie powinno byÊ szare, o szerokoĂci 10 pikseli. Do napisów uĝyj czcionki w kolorze szarym, która przypomina pismo rÚczne. 1. Otwórz Notatnik. 2. 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 132 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne p style= border: inset 10px; inset /p p style= border: outset 10px; outset /div /BODY /HTML 3. Zapisz kod do pliku index77.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.4). Rysunek 5.4. Wszystkie rodzaje obramowania Niejednolity styl obramowania WïaĂciwoĂÊ border-...-style umoĝliwia zdefiniowanie innego stylu obramowania dla kaĝdej krawÚdzi. Ma ona nastÚpujÈcÈ postaÊ: selektor {border-...-style: styl} Rozdziaï 5. • Obramowania i przejĂcia 133 m W I C Z E N I E 5.5 Przypisane obramowanie do nagïówka Utwórz dokument (X)HTML, w którym uĝyte zostanÈ style h1 i h2. Do stylu h2 przypisz obramowanie. Z lewej strony i od góry powinno byÊ liniÈ ciÈgïÈ o szerokoĂci 3 pikseli. Z prawej strony i od doïu powinno byÊ liniÈ podwójnÈ o szerokoĂci 4 pikseli. Do napisów uĝyj czcionki, która przypomina pismo rÚczne. Wszystkie elementy strony powinny byÊ w kolorze zielonym. 1. Otwórz Notatnik. 2. 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 3. Zapisz kod do pliku index78.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.5). Do definiowania innego stylu obramowania dla kaĝdej krawÚdzi sïuĝÈ nastÚpujÈce atrybuty: T border-bottom-style — dolna krawÚdě obramowania, T border-left-style — lewa krawÚdě obramowania, T border-right-style — prawa krawÚdě obramowania, T border-top-style — górna krawÚdě obramowania. 134 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne Rysunek 5.5. Do nagïówka h2 przypisane jest obramowanie o dwóch stylach SzerokoĂÊ obramowania WïaĂciwoĂÊ border-width umoĝliwia okreĂlenie szerokoĂci obramowa- nia. Ma ona nastÚpujÈcÈ postaÊ: selektor { border-width: szerokoħè} m W I C Z E N I E 5.6 Definiowanie szerokoĂci ramek sïownie i liczbowo Utwórz dokument (X)HTML, w którym uĝyte zostanÈ trzy definicje sïowne szerokoĂci obramowania oraz obramowanie o szerokoĂci 7 pikseli. W kaĝdej ramce wpisz szerokoĂÊ. Do napisów uĝyj czcionki, która przypomina pismo rÚczne. Dokument powinien byÊ utrzymany w kolorystyce: tïo róĝowe, napisy i obramowanie kasztanowe. 1. Otwórz Notatnik. 2. 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 Rozdziaï 5. • Obramowania i przejĂcia 135 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 3. Zapisz kod do pliku index79.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.6). Rysunek 5.6. SzerokoĂci ramek zdefiniowane sïownie i liczbowo Obramowanie zaokrÈglone WïaĂciwoĂÊ border-radius umoĝliwia okreĂlenie zaokrÈglenia ramki. Ma ona nastÚpujÈcÈ postaÊ: selektor { border-radius: promieē} m W I C Z E N I E 5.7 Obramowanie z zaokrÈgleniami Utwórz dokument (X)HTML, w którym uĝyte zostanie obramowanie zaokrÈglone o gruboĂci i promieniu krzywizny wynoszÈcych 25 pikseli. W caïym dokumencie uĝyj czcionki przypominajÈcej pismo rÚczne, pogrubionej. Kolor tïa powinien byÊ ĝóïty, a ramki i tekstu kasztanowy. 1. Otwórz Notatnik. 2. Wpisz w nim kod: 136 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne 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 byđo nawet ciekawie, bo kilka razy interweniowađa ´policja. /div /BODY /HTML 3. Zapisz kod do pliku index80.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.7). Rysunek 5.7. Obramowanie z zaokrÈgleniami. Efekt uzyskany bez uĝycia plików graficznych Rozdziaï 5. • Obramowania i przejĂcia 137 Obramowanie cieniowane WïaĂciwoĂÊ box-shadow umoĝliwia okreĂlenie cieniowania obramowa- nia. Ma ona nastÚpujÈcÈ postaÊ: selektor { box-shadow: przesuniúcie-poziome przesuniúcie-pionowe ´promieē-rozmycia zasiúg kolor } m W I C Z E N I E 5.8 Obramowanie z cieniem na zewnÈtrz Utwórz dokument (X)HTML, w którym wokóï napisu utworzone zosta- nie obramowanie. Kolor tïa powinien byÊ srebrny, a napisów i obra- mowania szary. Obramowanie powinno mieÊ rozmycie na zewnÈtrz. W caïym dokumencie uĝyj czcionki przypominajÈcej pismo rÚczne, pogrubionej. 1. Otwórz Notatnik. 2. 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 3. Zapisz kod do pliku index81.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.8). 138 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne Rysunek 5.8. Obramowanie z cieniem na zewnÈtrz m W I C Z E N I E 5.9 Obramowanie z cieniem do wewnÈtrz Utwórz dokument (X)HTML, w którym wokóï napisu utworzone zosta- nie obramowanie. Kolor tïa powinien byÊ srebrny, a napisów i obra- mowania szary. Obramowanie powinno mieÊ rozmycie do wewnÈtrz. W caïym dokumencie uĝyj czcionki przypominajÈcej pismo rÚczne, pogrubionej. 1. Otwórz Notatnik. 2. 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 3. Zapisz kod do pliku index82.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.9). Rozdziaï 5. • Obramowania i przejĂcia 139 Rysunek 5.9. Obramowanie z cieniem do wewnÈtrz m W I C Z E N I E 5.10 Obramowanie tÚczowe Utwórz dokument (X)HTML, w którym wokóï napisu utworzone zosta- nie obramowanie tÚczowe. Kolor tïa powinien byÊ ĝóïty, a napisów zielony. Obramowanie powinno mieÊ rozmycie na zewnÈtrz. W caïym dokumencie uĝyj czcionki przypominajÈcej pismo rÚczne, pogrubionej. 1. Otwórz Notatnik. 2. 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 140 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne 3. Zapisz kod do pliku index83.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.10). Rysunek 5.10. Obramowanie z cieniem na zewnÈtrz m W I C Z E N I E 5.11 Ramka w ramce Utwórz dokument (X)HTML, w którym brÈzowy tekst zostanie umiesz- czony na pomarañczowym tle. Wokóï akapitu utworzona zostanie brÈ- zowa ramka o szerokoĂci 4 pikseli. OdlegïoĂÊ pomiÚdzy ramkÈ a tek- stem powinna wynosiÊ 50 pikseli. W caïym dokumencie uĝyj czcionki przypominajÈcej pismo rÚczne, pogrubionej. 1. Otwórz Notatnik. 2. 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 mađym, ľe wyrywa sobie kđaki sierħci z brzucha, ľeby wyħcieliè im gniazdko. Któryľ ojciec rodziny zdobyđby siú na to? Rozdziaï 5. • Obramowania i przejĂcia 141 /p /body /html 3. Zapisz kod do pliku index84.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.11). Rysunek 5.11. Tekst wyróĝniony przy wykorzystaniu wïaĂciwoĂci background-clip m W I C Z E N I E 5.12 ZawiniÚcie tekstu Utwórz dokument (X)HTML, w którym tekst zostanie umieszczony w ramce. Spowoduj, aby nawet dïugie sïowo nie wychodziïo na zewnÈtrz ramki. 1. Otwórz Notatnik. 2. 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 142 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne Huraaaaaaaaaaaaaaaaaaaaaaaaaa! Zakrzyknúli Indianie, a potem zabijali i skalpowali, co popadnie. /p /body /html 3. Zapisz kod do pliku index85.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.12). Rysunek 5.12. WïaĂciwoĂÊ word- wrap:break-word powoduje zawiniÚcie tekstu m W I C Z E N I E 5.13 Justowanie wewnÈtrz ramki Utwórz dokument (X)HTML, w którym tekst akapitu zostanie umiesz- czony w ramce. Wyjustuj tekst. 1. Otwórz Notatnik. 2. 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 Sđowianie /h1 div Sđowianie mieszkali w domach z drewna, z których dym wychodziđ mniejszymi otworami, a Sđowianie wiúkszymi. /div /body /html 3. Zapisz kod do pliku index86.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.13). Rozdziaï 5. • Obramowania i przejĂcia 143 Rysunek 5.13. Justowanie za pomocÈ wïaĂciwoĂci text-justify:inter-word 5. Zmieñ szerokoĂÊ okna (rysunek 5.14). Rysunek 5.14. Mimo zmiany szerokoĂci strony tekst pozostaje wyjustowany PrzejĂcia Wyróĝnienie elementu strony nie musi byÊ statyczne. Moĝe siÚ ono zmieniaÊ np. po wskazaniu obiektu kursorem. PrzejĂcia CSS3 sÈ efek- tami, które pozwalajÈ elementom stopniowo zmieniaÊ wyglÈd. m 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 bÚdzie 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 poïoĝenie pierwotne. 144 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne 1. Otwórz Notatnik. 2. 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 kođa i pieniúdzy ludzie zaczúli krúciè interesy. /div /body /html 3. Zapisz kod do pliku index87.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.15). Rysunek 5.15. Tekst w poïoĝeniu poczÈtkowym 5. UmieĂÊ kursor wewnÈtrz ramki z tekstem (rysunek 5.16). Rozdziaï 5. • Obramowania i przejĂcia 145 Rysunek 5.16. Podczas rotacji pogorszeniu ulega czytelnoĂÊ czcionki m W I C Z E N I E 5.15 Zmiana ksztaïtu ramki podczas obracania tekstu Utwórz dokument (X)HTML, w którym tekst bÚdzie obracaï siÚ po naprowadzeniu na niego kursora. Tekst ma znajdowaÊ siÚ na srebrnym tle z szarÈ ramkÈ. PoczÈtkowo tïo ma byÊ prostokÈtne, a po obrocie okrÈgïe. Obrót ma wynosiÊ 360 stopni. Lewa krawÚdě obiektu wraz z napisem ma przesunÈÊ siÚ od 120 pikseli do 400 pikseli. Po przesu- niÚciu kursora z tekstu ma on wracaÊ w poïoĝenie pierwotne. 1. Otwórz Notatnik. 2. 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); 146 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne -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 kođa i pieniúdzy ludzie zaczúli krúciè interesy. /div /body /html 3. Zapisz kod do pliku index88.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.17). Rysunek 5.17. Tekst w poïoĝeniu poczÈtkowym 5. UmieĂÊ kursor wewnÈtrz ramki z tekstem (rysunek 5.18). Rysunek 5.18. Podczas przetaczania rogi ramki ulegajÈ zaokrÈgleniu Rozdziaï 5. • Obramowania i przejĂcia 147 m 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 bÚdzie siÚ roz- szerzaïa po naprowadzeniu na niÈ kursora. Tekst ma znajdowaÊ siÚ na ĝóïtym tle. PoczÈtkowe wymiary ramki majÈ wynosiÊ 60×150 pikseli, a koñcowe 320×150 pikseli. Transformacja ma siÚ rozpoczynaÊ po 2 sekundach od wskazania obiektu kursorem. Czas jej trwania ma wynosiÊ 1 sekundÚ. 1. Otwórz Notatnik. 2. 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 148 CSS3. Kaskadowe arkusze stylów • mwiczenia praktyczne body div Telewizja to zđodziej czasu, ale ja tego zđodzieja lubiú. /div /body /html 3. Zapisz kod do pliku index89.htm. 4. WyĂwietl plik w oknie przeglÈdarki (rysunek 5.19). Rysunek 5.19. Obiekt przed transformacjÈ 5. Wskaĝ kursorem lewy górny naroĝnik ramki (rysunek 5.20). Rysunek 5.20. Kontener zwiÚkszyï szerokoĂÊ
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS3. Kaskadowe arkusze stylów. Ćwiczenia praktyczne
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: