search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Cienie pod tekstem

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