[CSS] Cienie pod tekstem

W dzisiejszym bardzo krótkim wpisie, poruszę temat związany z cieniami pod tekstem. Jest to część specyfikacji CSS3.
Specyfikacja CSS3 dostarcza wielu ciekawych możliwości. Nowe modele pudełka, dynamiczne przeliczanie szerokości czy też nowe możliwości tworzenia responsywnych szablonów stron WWW. W tym artykule przyjrzymy się bliżej cieniom, a dokładniej cieniom pod tekstem.

Cienie pod tekstem mogą się przyczynić do uatrakcyjnienia wyglądu strony lub podkreślenia ważności jakiegoś tekstu. Jego wykorzystanie jest banalnie proste. Służy do tego właściwość: text-shadow, którą zapisujemy w arkuszu stylów.

Text-shadow - sposób użycia

Są dwa sposoby użycia tej właściwości. Jedna z nich utworzy jedną warstwę cienia, a druga pozwala na tworzenie kilku warstw cienia. Są one bardzo podobne do siebie.

Pierwsza z nich wygląda następująco:

1

        h1 { text-shadow: 2px 2px 10px black; }

W takim zapisie:

• pierwsza wartość to współrzędna OX,
• druga wartość to współrzędna OY,
• promień rozmycia (wartość opcjonalna),
• kolor cienia

Natomiast, druga z nich rozszerza zapis pierwszej i wygląda to następująco:

1

        h1 { text-shadow: 2px 2px 10px red, 2px 2px 2px gold; }

Podobnie jak wyżej, kolejne wartości są wg powyższego schematu. Jedyna zmiana jest taka, że po przecinku zaczyna się definicja następnego cienia.