[Tutorial] Efekty cienia – CSS3

Wszyscy z pewnością wiecie lub domyślacie się, że kaskadowe arkusze stylów w wersji 3 są na prawdę potężnym narzędziem. Cuda można robić, dosłownie. Dzis chciałbym zaprezentować bardziej podstawowe zagadnienia – a dokładniej skupić się ma możliwości dodania cieni do tekstu. W wykorzystaniu jest to na prawdę wygodna sprawa, ze względu na to, że jeżeli stworzymy ładny styl czcionce i dodamy efekt cienia – nie będziemy musieli tworzyć obrazów graficznych. Do wszystkich przykładów użyłem znacznika <h2> Zaczynajmy.

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

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]

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]

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]

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.