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.

Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.