Dekoracja tekstu CSS – text- shadow

Raczej często i dość nagminnie graficy w swoich pracach wyróżniają nagłówki na stronach poprzez nałożenie na tekst gradientu lub delikatnego cienia. Z Bogiem sprawa jeżeli jest to strona statyczna i właściciel nie będzie dokładał kolejnych zakładek nowymi nagłówkami, wtedy zrobimy sobie kilka ilustracji z tekstem nagłówka. Ale problem pojawia się w przypadku cięcia np.: sklepów. Wraz ze zmianą nazwy kategorii lub nazwy produktu nagłówek powinien prezentować się równie okazale co w poprzedniej wersji. I co wtedy? Moja propozycja to użycie w arkuszu css polecenia „text-shadow”. Podając kolejne wartości definiujemy odstępy i kolor cienia.

Dekoracja tekstu css

<h3 style="text-shadow:1px 1px 0px #000;">Dekoracja tekstu css</h3>

Zwiększając pierwszą wartość zwiększamy odstęp z lewej strony:

Dekoracja tekstu css

<h3 style="text-shadow:2px 1px 0px #000;">Dekoracja tekstu css</h3>

Zwiększając drugą wartość zwiększamy dolny odstęp:

Dekoracja tekstu css

<h3 style="text-shadow:2px 3px 0px #000;">Dekoracja tekstu css</h3>

I teraz najciekawsze zwiększając trzecią wartość uzyskujemy efekt rozmycia:

Dekoracja tekstu css

<h3 style="text-shadow:2px 3px 2px #000;">Dekoracja tekstu css</h3>

I ostatni element to kolor:

Dekoracja tekstu css

<h3 style="text-shadow:1px 2px 1px #000">Dekoracja tekstu css</h3>

Stosując to rozwiązanie możemy wzbogacić naszą stronę co ciekawie wyglądające nagłówki, ale nie ma róży bez kolców. O ile większość nowych przeglądarek radzi sobie z prezentowaniem text- shadow, to (fuck) IE ^ ma problem i takiej dekoracji nam nie pokarze ale to problem tych, którzy tej przeglądarki używają.