Początek

Tworząc poniższe przykłady, dodawałem właściwość do zwykłego selektora h2, więc oryginalny tekst wygląda tak

zNWT2IAbOh3Du2y7MMTgL2DJwA2eAJggycANngCYIMnADZ4AmCDJwA2eAJggycANngCYIMnADZ4AmCDJwA2eAJggycANngCYIMnADZ4AmCDJwA2eAJggycANngCYIMnADZ4AmDzB3YUV+MHiKADAAAAAElFTkSuQmCC

Podstawowy cień

Najpierw cień tekstu najprostszy i najłatwiejszy co wcale nie czyni go najmniej efektownym. Selektor wskazuje, że cień ma być poniżej tekstu o 2px, na prawo o 4px + stopień rozmycia – 3px. Kolor tła czarny (RGBa) z przezroczystością 30%.

[css]text-shadow: 2px 4px 3px rgba(0,0,0,0.3);[/css]

wUuNSVbOUgzsQAAAABJRU5ErkJggg==

Można zamiennie korzystać z poniższego kodu, ale wówczas nie można ustawić przezroczystości:

[css]text-shadow: 2px 4px 3px #000000;[/css]

Mocny cień

Analogicznie do powyższego przykładu można ustawić bardziej wyrazisty cień, posłuży do tego polecenie:

[css]text-shadow: 6px 6px 0px rgba(0,0,0,0.2);[/css]

Podwójny cień

Dodajmy kolejny efekt podwójnego cienia. By móc z niego skorzystać należy zastosować się do zasady:

[css]text-shadow: deklaracja_cień1, deklaracja_cień2;[/css]

Co w praktyce będzie wyglądać tak:

[css]text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);[/css]

RXIgSCLQA4EWQRyIMgikANBFoEcCLII5ECQRSAHgiwCORBkEciBIItADgRZBHIgyCKQA0EWgRwIsgjkQJBFIAeCLAI5EGQRyIEgi0AOBFkEciDIIpADQRaBHAiy6H8AW7enAVyXZAAAAABJRU5ErkJggg==

Cienie 3d

By zobrazować wam, jak potężnym narzędziem jest właściwością jest polecenie text-shadow – zapożyczyłem poniższy przykład z innej strony. Sami zobaczcie:

[css]
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);</pre>
[/css]

wMO9bwy0QCLAwAAAABJRU5ErkJggg==

Wnioski

Mam cichą nadzieje, że powyższe przykłady uzmysłowią wam potencjał text-shadow do wykorzystania na własnych witrynach. Jestem przekonany, że dobrze dobierając kolory, czcionkę czy położenie – spokojnie można zostawić programy graficzne na boku. Jaka jest główna korzyść korzystania z tego parametru stylizując tekst na witrynie zamiast grafiki? Pamiętajcie, że Google lepiej indeksuje tekst niż obrazy, więc z punktu widzenia SEO jest to świetne rozwiązanie.


Posłuchaj nas!