Text Shadow – Cień Tekstu CSS

Cień tekstu CSS

text-shadow

W celu dodania efektu cienia do tekstu możemy posłużyć się własnością text-shadow (ang. cień tekstu).

/* 1-szy sposób zapisu */
text-shadow: x y blur-radius color;

/* 2-gi sposób zapisu */
text-shadow: color x y blur-radius;

/* 3-ci sposób zapisu */
text-shadow: x y;

x i y
Zmienne x oraz y mogą przyjmować zarówno wartości dodatnie jak i ujemne. Działają one na zasadzie osi układu współrzędnych, którą możliwe, że pamiętacie z matematyki.

blur-radius
Wartość blur-radius (ang. promień rozmycia) określa w jakim stopniu cień zostanie rozmyty. Im większa wartość promienia, tym większy stopień rozmycia cienia. Nie musimy jej deklarować, wtedy przyjmie domyślną wartość 0.

p.no-blur { text-shadow: 1px 1px 0 black; }
p.medium-blur { text-shadow: 1px 1px 5px black; }
p.large-blur { text-shadow: 1px 1px 15px black; }

<p class="no-blur">Cień bez rozmycia</p>
<p class="medium-blur">Cień z rozmyciem 5px</p>
<p class="large-blur">Cień z rozmyciem 15px</p>

color
Kolor cienia możemy umieścić na początku, bądź na końcu, oba zapisy są prawidłowe. Wprowadzanie koloru jest nieobowiązkowe, jednak jeśli go nie wprowadzimy mogą pojawić się różnice w wyświetlaniu go, gdyż każda przeglądarka ma inną wartość domyślną, dlatego zalecane jest deklarowanie koloru.

p.red { text-shadow: 1px 1px 2px red; }
p.blue { text-shadow: 1px 1px 2px blue; }
p.black { text-shadow: 1px 1px 2px black; }

<p class="red">Tekst z cieniem koloru czerwonego</p>
<p class="blue">Tekst z cieniem koloru niebieskiego</p>
<p class="black">Tekst z cieniem koloru czarnego</p>

Możemy użyć dowolnego koloru do cienia za tekstem, jednak jak już będziemy korzystali z tej własności CSS najczęściej będzie to zapewne jakiś odcień szarego.