Podczas projektowania strony internetowej upewnij się, że ogólny wygląd strony jest estetycznie przyjemny, aby poprawić wrażenia użytkownika. W tym celu możesz dodawać obrazy lub tekst na swojej stronie, jednak dodanie zwykłego tekstu może mieć negatywny wpływ na wrażenia użytkownika, aby poprawić piękno zwykłego tekstu, możesz dodać do niego efekt cienia, używając CSS właściwość tekstu tekstowego.

Zaprojektowaliśmy ten samouczek, aby dowiedzieć się, jak możesz sprawić, by swój zwykły tekst był interesujący na różne sposoby, dodając cienie tekstowe.

Zaczynajmy.

CSS Tekst Shadow

Możesz dodać cień w tekście pojawiającym się na stronach internetowych za pomocą właściwości tekstu tekstowego CSS. Tutaj zademonstrujemy różne sposoby, w jakie możesz użyć, aby dodać cień do tekstu.

Dodaj poziomy i pionowy cień

Aby dodać cień do tekstu w poziomie i pionowo, po prostu podaj wartości obu wymiarów właściwości tekstu tekstowego. Postępuj zgodnie z przykładem poniżej.

Html

Witaj świecie

Tutaj stworzyliśmy

element i dodał w nim trochę tekstu.

CSS

H1
Tekst-shadow: 2px 2px;
kolor niebieski;

Korzystając z właściwości tekstu tekstowego, podajemy 2px zarówno poziomym, jak i pionowym wymiarom tekstu. Dodatkowo dostarczamy również niebieski kolor do tekstu.

Wyjście

Do tekstu dodano poziomy i pionowy cień.

Dodawanie koloru do cienia

Kolejną zabawną rzeczą, którą możesz zrobić, jest dodanie koloru wraz z cieniem do tekstu. Użyj następującego fragmentu kodu.

CSS

H1
Tekst-shadow: 2px 2px niebieski;

Oprócz nadania pewnej wartości poziomym i pionowym wymiarom tekstu, który również zapewniamy kolor cienia. Ten kolor nie jest stosowany do cienia, a nie tekstu.

Wyjście

Cień otrzymał kolor niebieski.

Dodaj efekt rozmycia do cienia

Aby dodać efekt rozmycia do cienia, musisz określić intensywność rozmycia jako trzecią wartość właściwości tekstowej. Postępuj zgodnie z poniższym kodem.

CSS

H1
Tekst-shadow: 2px 2px 6px RGB (255,20,147);

W powyższym kodzie dwie wartości właściwości tekstowej reprezentują długość cienia poziomego i pionowego, a trzecia wartość reprezentuje intensywność rozmycia. Zapewniliśmy również cień głęboki różowy kolor.

Wyjście

Efekt rozmycia został pomyślnie dodany.

Dodaj efekt blasku do cienia

Aby dodać efekt blasku tuż za tekstem, postępuj zgodnie z przykładem.

CSS

H1
Tekst-shadow: 0 0 5px czerwony;

W powyższym fragmencie kodu, aby dodać efekt świecącego, przypisujemy 0px do poziomych i pionowych wymiarów tekstu, nadając pewną wartość do promienia zamazania wraz z czerwonym kolorem.

Wyjście

Do tekstu dodano efekt świecący.

Dodawanie wielu cieni

Aby dodać liczne cienie w tekście, możesz dodać listę cieni we właściwości tekstowej oddzielonej przecinkami.

CSS

H1
Tekst-shadow: 3px 3px 4px żółty, 4px 4px 6px fioletowy;

W powyższym przykładzie dodajemy do tekstu żółty i fioletowy efekt cienia.

Wyjście

Z powodzeniem dodano wiele cieni.

Dodanie konturu do tekstu

Aby dodać kontur do tekstu za pomocą właściwości tekstowej, postępuj zgodnie z przykładem:

CSS

H1
Kolor: Bisque;
Tekst -shadow: 1px 1px czarny, -1px -1px czarny;

W powyższym przykładzie przypisaliśmy czarny cień kolorów z wymiarami 1px prawy i w dół oraz -1px top i lewe wymiary.

Wyjście

Do tekstu dodano zarys.

Wniosek

Aby Twój zwykły tekst był interesujący, możesz dodać do niego efekt cienia, używając właściwości tekstowej. W tym celu musisz określić długość poziomego, a także pionowego wymiaru cienia w właściwości tekstu tekstu. Oprócz dodania cienia możesz również dodać kolor, efekt rozmycia lub efekt świecącego do tekstu. Możliwe jest również dodanie wielu cieni do tego samego tekstu za pomocą właściwości tekstu tekstowego. W tym przewodniku podsumowaliśmy różne sposoby dodania efektu cienia do tekstu.