CSS3 pozwala być kreatywnym i eksperymentować z projektem, aby tworzyć piękne i niepowtarzalne strony internetowe. Jednym z obszarów projektowania, z którymi CSS pozwala pracować, jest typografia.

Możesz użyć rodzina czcionek oraz cień tekstu właściwości do tworzenia prostych, ale niezwykłych efektów. Być może znasz już podstawowe zastosowania cienia tekstu w CSS. Dzięki tym właściwościom możesz jednak tworzyć szeroką gamę stylów.

W tym artykule dowiesz się, jak skutecznie tworzyć różne efekty cienia tekstu za pomocą HTML i CSS.

Pierwsze kroki z HTML i CSS

Możesz skopiować i wkleić te przykłady kodu, aby uzyskać dowolny efekt cienia tekstu. Zacznij od stworzenia index.html plik i styl.css plik. Są to jedyne pliki, których będziesz potrzebować, aby wypróbować przykłady, ale musisz zmienić oba pliki dla każdego przykładu.

index.html

 cień #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="arkusz stylów"
/>
 cień #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="arkusz stylów"
/>
 cień #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="arkusz stylów"
/>
 cień #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="arkusz stylów"
/>
 cień #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="arkusz stylów"
/>
 cień #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="arkusz stylów"
/>
 cień #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="arkusz stylów"
/>

styl.css

ciało {
transformacja tekstu: wielkie litery;
wysokość linii: 1;
wyrównanie tekstu: środek;
rozmiar czcionki: 5rem;
wyświetlacz: siatka;
odstęp: 4rem;
}

Teraz przejrzyjmy 11 przykładów cieni tekstowych, które możesz wypróbować.

Związane z: Jak zmienić tekst swojej witryny za pomocą właściwości rodziny czcionek CSS?

Mistyk

Mystic to szklisty styl dający fajny efekt przejścia bez użycia przekształcać własność. Jest to super prosty, ale estetyczny efekt dla odważnej i zorientowanej na rozwój strony internetowej.

Wyjście

HTML

 Cień #01 
Mistyk

CSS

ciało {
kolor tła: #5e5555;
}
.mistyczny {
rodzina czcionek: 'Bowlby One', kursywa;
kolor: rgba (255, 255, 255, 0,596);
cień tekstu: 20px 0px 10px rgb (0, 0, 0);
}

Monotoni

To zabawny efekt tekstowy przy użyciu czcionki „Monoton”. Możesz bawić się kolorem tekstu i cienia, aby dopasować go do podstawowych kolorów Twojej witryny.

Wyjście

HTML

 Cień #02 
Monotoni

CSS

.monoton {
rodzina czcionek: „Monoton”, kursywa;
rozmiar czcionki: 15rem;
kolor: rgb (255, 0, 0);
krycie: 0,5;
cień tekstu: 0px -78px rgb (255, 196, 0);
}

Bungee

To fajny styl z czcionką „Bungee Shade”. W połączeniu z ciemnym tłem daje surowy efekt z poczuciem podejrzliwości.

Wyjście

HTML

 cień #03 
Bungee

CSS

ciało {
kolor tła: #222;
}
.bungee {
rodzina czcionek: 'Bungee Shade', kursywa;
kolor: rgb (160, 12, 12);
krycie: 0,9;
cień tekstu: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktywny

Możesz użyć tego efektu dla znaków ostrzegawczych lub ostrzegawczych. Używa czcionki „Rampart One”.

Wyjście

HTML

 cień #04 
Radioaktywny

CSS

ciało {
kolor tła: #27292d;
}
radioaktywny {
rodzina czcionek: 'Rampart One', kursywa;
kolor: rgb (97, 214, 43);
krycie: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Ten płynny efekt tekstowy wykorzystuje czcionkę „Faster One”, cień tekstu nieruchomość i ::popseudoelement z taką samą treścią jak tekst. Stwarza to efekt „podwojenia”.

Wyjście

HTML

 cień #05 
Sprint

CSS

ciało {
kolor tła: #27292d;
}
.sprint {
rodzina czcionek: 'Faster One', kursywa;
rozmiar czcionki: 10rem;
kolor: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
odstęp między literami: 1rem;
pozycja: względna;
}
.sprint:: po {
treść: „sprint”;
pozycja: bezwzględna;
góra: 215px;
po prawej: 300px;
}

Kolczasty

Ten przerażający, kłujący efekt tekstowy wykorzystuje czcionkę „Eater”. Możesz spróbować przesunąć cień tekstu zamiast tego w prawym dolnym rogu.

Wyjście

HTML

 cień #06 
Kolczasty

CSS

.kolczasty {
rodzina czcionek: „Zjadacz”, kursywa;
cień tekstu: -18px -18px 2px #777;
}

Codystar

Cień tekstu może działać jako rozmyty, ale widoczny kontur tekstu. Ten jasny efekt działa cuda z czcionką „Codystar”.

Wyjście

HTML

 cień #06 
Codystar

CSS

.codystar {
rodzina czcionek: 'Codystar', kursywa;
grubość czcionki: pogrubiona;
kolor: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Królestwo

Dzięki temu efektowi cienia możesz uzyskać autorytatywną typografię. Wykorzystuje ::przed pseudoelement i przekształcać właściwość pochylania cienia.

Wyjście

HTML

 cień #08 
Królestwo

CSS

ciało {
kolor tła: #5e5555;
}
.Królestwo {
kolor biały;
rodzina czcionek: Impact, Haettenschweiler, „Arial Narrow Bold”, bezszeryfowy;
rozmiar czcionki: 10rem;
wysokość linii: 1;
wyrównanie tekstu: środek;
}
.kingdom--shadow:: przed {
kolor: #000;
zawartość: atrybut(tekst-danych);
margines górny: 0,7 rem;
pozycja: bezwzględna;
transformacja: perspektywa (205px) obrótX(38deg) skala (0,84);
indeks z: -1;
}

Koder

To jasne i pozytywne cień tekstu efekt przekazuje samoświadomą i zmotywowaną osobowość witryny. Możesz dodać go do swojej witryny, aby uzyskać prosty wygląd smokey.

Wyjście

HTML

 cień #09 


Jeść 

Spać 

Kod 

Powtarzać

CSS

ciało {
kolor tła: #5e5555;
}
dziel {
rodzina czcionek: Verdana, Genewa, Tahoma, bezszeryfowa;
wypełnienie: 40px;
margines: 0px auto;
grubość czcionki: pogrubiona;
wysokość linii: 5,8rem;
wyrównanie tekstu: do lewej;
kolor: rgb (94, 94, 94);
} 
.coder-życie {
cień tekstu: 5px 5px #ffff00;
filtr: drop-shadow(-10px 10px 20px #fff000);
}

Elegancki

Jeśli kochasz minimalizm, ten efekt cienia tekstu jest idealnym rozwiązaniem. Ponieważ używa dużego rozmiaru czcionki, zmniejszyliśmy odstępy między literami i zastosował cień tekstu właściwość, aby stworzyć ten efekt.

Wyjście

HTML

 cień #10 


s
h
r
a
D
D
h
a

CSS

.elegancki {
rodzina czcionek: Impact, Haettenschweiler, „Arial Narrow Bold”, bezszeryfowy;
rozmiar czcionki: 10rem;
odstępy między literami: -1rem;
kolor biały;
cień tekstu: -18px 8px 18px #b4bbbb;
}

Figlarny

Cienki i pogrubiony kontur sprawia, że ​​ten tekst jest atrakcyjny i żywy. Możesz bawić się cień tekstu nieruchomość bez promienia rozmycia w różnych pozycjach. Cienie tekstu dotyczą wszystkich znaków, w tym jednostek HTML, takich jak ♥. Możesz użyć Tabela referencyjna jednostek znaków do dalszego eksploracji.

Wyjście

HTML

 cień #11 
Kodowanie to ♥

CSS

.zabawny {
rodzina czcionek: „Baloo Tamma”, kursywa;
kolor: #fff;
odstęp między literami: 0,2 rem;
cień tekstu: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Eksperymentuj z zaawansowanymi efektami cieni

Cienie tekstu to łatwy i skuteczny sposób na ulepszenie projektu strony internetowej i uczynienie witryny atrakcyjną wizualnie. Możesz także eksperymentować z różnymi efektami cienia. Możesz dowiedzieć się więcej o efektach cienia, aby kontynuować swoją przygodę z CSS.

Naincy Mourya (15 opublikowanych artykułów)

Naincy specjalizuje się w budowaniu wysoce responsywnych stron internetowych oraz efektywnej strategii treści wraz z kopiami internetowymi. Jest niezależną pisarką o technologiach, która bacznie obserwuje trendy w technologiach.

Więcej od Naincy Mouryi