Własność CSS text-shadow

Własność CSS text-shadow dodaje do tekstu cień, który obejmuje także elementy dekoracyjne tekstu. Za jej pomocą można uzyskać bardzo ciekawe efekty, jak również spowodować, że tekst stanie się całkowicie nieczytelny, dlatego własnością tą należy posługiwać się z rozwagą.

Wartości i składnia

Własność text-shadow przyjmuje rozdzielaną przecinkami listę definicji cieni, tzn. umożliwia zdefiniowanie więcej niż jednego cienia dla tekstu.

Każda definicja cienia może składać się z dwóch lub trzech wartości z jednostką długości i opcjonalnej definicji koloru:

• Pierwsza wartość z jednostką długości: określa położenie cienia na osi poziomej.
• Druga wartość z jednostką długości: określa położenia cienia na osi pionowej.
• Trzecia wartość z jednostką długości: określa rozmiar rozmazania cienia i jest opcjonalna.
• Wartość koloru: określa kolor cienia.

Przykłady

Poniższy przykład przedstawia dodanie różowego cienia do elementów nagłówka pierwszego poziomu. Jest to pojedynczy cień bez rozmazania.

h1 {
  text-shadow: 6px 6px pink;
}

Efekt:

Jeśli zdefiniowanych jest więcej niż jeden cień, to są one układane warstwowo w taki sposób, że na wierzchu znajduje się ten, który został zdefiniowany jako pierwszy. Spójrz na poniższy przykład:

h1 {
  text-shadow: 15px 15px pink, 12px 12px green;
}

Efekt:

W tym przypadku zostały zdefiniowane dwa cienie. Ponieważ cień różowy w deklaracji jest zdefiniowany przed cieniem zielonym, to znajduje się na wierzchu i częściowo go przesłania.

Podsumowanie