[Tutorial] Efekty cienia - CSS3 | DailyWeb.pl

[Tutorial] Efekty cienia - CSS3

Opublikowano 6 lat temu -


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%.

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

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

text-shadow: 2px 4px 3px #000000;

Mocny cień

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

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Podwójny cień

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

text-shadow: deklaracja_cień1, deklaracja_cień2;

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

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

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:

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>

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.