DHTML0135

Praktyczne zastosowanie CSS

Listing 8.5. Zewnętrzny plik CSS o nazwie Listing-8-5.css, zawierający trzy identyfikatory, które mogą zostać użyte do stworzenia rzucanego cienia

#tekst { position: absolute; top: 5px; left: ->5px; color:#000000; z-index:2; }

#cienl { position: absolute; top: 2px; left: ->2px; color:#CCCCCC; z-index:0; >

#cien2 { position: absolute; top: 8px; left: -»8px; color:#666666; z-index:l; }

Listing 8.6. Reguły z listingu 8.5 są importowane do dokumentu HTML-owego za pomocą znacznika <L!NK>

<htmi>

<head>

cmeta http-equiv="Contenr.-Type"

-+content«"text/html; charset=ISO-8859-2">

<titie>Listing 8.fi</ti-le>

HI f font-size: 75pc; )

</style>

</head>

<span id="cienl”xhl>ALICJA</hlx/span> <span id="cien2"><h1>ALICJA</hl></span> <span id="tekst" Xhl>ALICJA</hlX/span>

</body>

</html>

Rysunek 8.7. Rzucany cień jest tworzony za pomocą trzech klas, które nieco przesuwają kopie słowa wyświetlane w różnych odcieniach szarości

Tworzenie rzucanych cieni

Innym popularnym efektem specjalnym wykorzystywanym na stronach WWW jest rzucany cień. Rzucany cień powoduje, że tekst, a w szczególności duże nagłówki i tytuły, odróżniają się od reszty strony, dodając znaczenia i uwydatniając te elementy strony. Jednak przed pojawieniem się kaskadowych arkuszy stylów jedyną metodą stworzenia rzucanych cieni było stworzenie grafiki zawierającej tekst i rzucany przez niego cień. Teraz drobne sztuczki z wykorzystaniem CSS umożliwiają zrobienie tego samego, i to bez konieczności ładowania grafiki.

Aby stworzyć rzucany cień za pomocą CSS

1. W liście reguł CSS stwórz trzy selektory identyfikatorów, o nazwach text, cieni oraz cien2, tak jak pokazano na listingu 8.5.

2. Stwórz trzy identyczne wersje tekstu, dla którego chcesz stworzyć rzucany cień. Następnie użyj znacznika <SPAN>, aby umieścić w pierwszej wersji tekstu identyfikator cieni, identyfikator cien2

w drugiej wersji tekstu oraz identyfikator text w trzeciej wersji tekstu (patrz listing 8.6). Zapisz plik i wyświetl go w przeglądarce. Jego wygląd powinien przypominać stronę przedstawioną na rysunku 8.7.

S Rada

■ Jedno ostrzeżenie: Przeglądarki, które nie obsługują kaskadowych arkuszy stylów wyświetlając stronę zawierającą rzucane cienie stworzone w przedstawiony powyżej sposób, wyświetlą podany tekst trzy razy, linia po linii, co nie będzie wyglądało atrakcyjnie.

Tworzenie rzucanych cieni

139

Wyszukiwarka

Podobne podstrony:
DHTML0137 Praktyczne zastosowanie CSS Listing 8.9. Określanie wyglądu trzech różnych stanów
DHTML0139 Praktyczne zastosowanie CSS Listing X. 10. W tym arkuszu stylów zdefiniowane zostały ident
DHTML0129 Praktyczne zastosowanie CSS Istnieje wiele różnych sposobów wykorzystania kaskadowych arku
DHTML0131 Praktyczne zastosowanie CSS Praktyczne zastosowanie CSS Rozdział 3 KIM iłów o tabelach W j
DHTML0133 Praktyczne zastosowanie C5S [jjj-Usting 8.3 “ Netscape Rysunek 8.5. Opuszczona i powiększo
DHTML0036 Rozdział 1. Dodawanie CSS do dokumentu HTML-owego Głównym zastosowaniem CSS jest definiowa
DHTML0065 Kontrola tekstu w CSS Listing 3.4. Zapisywanie kwadratu jako indeksu górnego <head>
DHTML0067 Kontrola tekstu w CSS Listing 3.6. Użycie klasy nazwisku spowoduje. : • wyrazy będą się za
DHTML0059 Kontrola tekstu w CSS Wielu projektantów rozpoczynających działanie w sieci zaczynało od p
DHTML0061 Kontrola tekstu w CSS Określanie odstępów między wyrazamiPodobnie jak odstępy miiftoy lite
DHTML0069 Kontrola tekstu w CSS m 3 /< j*. K> cł.. 8ack -
img278 jest najczęściej stosowany w praktycznych zastosowaniach regresji krzywoliniowej ze względu n
C I - student nabywa wiedzę z zakresu podstaw antropologu kulturowej oraz sposoby jej praktycznego z
Streszczenie W pracy przedstawiono praktyczne zastosowanie zasady maksimum Pontriagina. Twierdzenie
1. Badania nad wypadkami przy pracy. Praktyczne zastosowania socjologii medycyny.

więcej podobnych podstron