Text Shadow – Cień Tekstu CSS

text shadow cien za tekstem blur x y color kurs css 3 html 5

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 przesunięcie cienia w poziomie w px
y przesunięcie cienia w pionie w px
blur-radius rozmycie cienia w px (opcjonalnie)
color kolor cienia (opcjonalnie)

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.

-1px 1px
x 1px w lewo 1px w prawo
y 1px w dół 1px w górę

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>

Cień bez rozmycia

Cień z rozmyciem 5px

Cień z rozmyciem 15px

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>

Tekst z cieniem koloru czerwonego

Tekst z cieniem koloru niebieskiego

Tekst z cieniem koloru czarnego

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.