CSS3 låter dig vara kreativ och experimentera med din design för att bygga vackra och unika webbsidor. Ett designområde som CSS låter dig arbeta med är typografi.

Du kan använda typsnittsfamilj och text-skugga egenskaper för att skapa enkla men anmärkningsvärda effekter. Du kanske redan känner till grundläggande tillämpningar av textskugga i CSS. Du kan dock skapa ett brett utbud av stilar med dessa egenskaper.

I den här artikeln kommer du att lära dig ett effektivt sätt att skapa olika textskuggeffekter med HTML och CSS.

Komma igång med HTML och CSS

Du kan kopiera och klistra in dessa kodexempel för att få vilken textskuggeffekt du föredrar. Börja med att skapa en index.html fil och en style.css fil. Det här är de enda filerna du behöver för att prova exemplen, men du måste ändra båda filerna för varje exempel.

index.html

 skugga #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stylesheet"
/>
 skugga #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stylesheet"
/>
 skugga #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stylesheet"
/>
 skugga #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stylesheet"
/>
 skugga #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stylesheet"
/>
 skugga #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stylesheet"
/>
 skugga #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="stylesheet"
/>

style.css

kropp {
text-transform: versaler;
linjehöjd: 1;
text-align: center;
teckenstorlek: 5rem;
display: rutnät;
gap: 4rem;
}

Låt oss nu gå igenom 11 textskuggexempel som du kan prova.

Relaterad: Hur man ändrar texten på din webbplats med CSS-typsnittsfamiljens egendom

Mystiker

Mystic är en glasig stil som ger en cool övergångsliknande effekt utan att använda omvandla fast egendom. Det är en superenkel, men ändå estetiskt tilltalande effekt för en djärv och tillväxtorienterad webbplats.

Produktion

HTML

 Skugga #01 
Mystiker

CSS

kropp {
bakgrundsfärg: #5e5555;
}
.mystic {
font-family: 'Bowlby One', kursiv;
färg: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Detta är en lekfull texteffekt med typsnittet "Monoton". Du kan leka med texten och skuggfärgen för att matcha din webbplatss primära färger.

Produktion

HTML

 Skugga #02 
Monoton

CSS

.monoton {
font-family: 'Monoton', kursiv;
teckenstorlek: 15rem;
färg: rgb (255, 0, 0);
opacitet: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Bungee

Det här är en cool stil med typsnittet "Bungee Shade". I kombination med en mörk bakgrund ger den en rå effekt med en känsla av misstänksamhet.

Produktion

HTML

 skugga #03 
Bungee

CSS

kropp {
bakgrundsfärg: #222;
}
.bungee {
font-family: 'Bungee Shade', kursiv;
färg: rgb (160, 12, 12);
opacitet: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktiv

Du kan använda den här effekten för varnings- eller farosignaler. Den använder typsnittet "Rampart One".

Produktion

HTML

 skugga #04 
Radioaktiv

CSS

kropp {
bakgrundsfärg: #27292d;
}
.radioactive {
font-family: 'Rampart One', kursiv;
färg: rgb (97, 214, 43);
opacitet: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprinta

Denna löpande texteffekt använder typsnittet "Faster One", text-skugga egendom och en ::efterpseudoelement med samma innehåll som texten. Detta skapar en "fördubblingseffekt".

Produktion

HTML

 skugga #05 
Sprinta

CSS

kropp {
bakgrundsfärg: #27292d;
}
.sprint {
font-family: 'Faster One', kursiv;
teckenstorlek: 10rem;
färg: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
bokstavsmellanrum: 1rem;
position: relativ;
}
.sprint:: efter {
innehåll: 'sprint';
position: absolut;
topp: 215px;
höger: 300px;
}

Taggig

Denna skrämmande taggiga texteffekt använder typsnittet "Eater". Du kan prova att växla text-skugga nere till höger istället.

Produktion

HTML

 skugga #06 
Taggig

CSS

.prickly {
font-family: 'Eater', kursiv;
text-shadow: -18px -18px 2px #777;
}

Codystar

Textskuggan kan fungera som en suddig men ändå synlig kontur till texten. Den här ljusa effekten gör underverk med typsnittet "Codystar".

Produktion

HTML

 skugga #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', kursiv;
font-weight: fet;
färg: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Rike

Du kan uppnå auktoritativ typografi med denna skuggeffekt. Den använder ::innan pseudo-element och omvandla egendom för att luta skuggan.

Produktion

HTML

 skugga #08 
Rike

CSS

kropp {
bakgrundsfärg: #5e5555;
}
.kingdom {
färg vit;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
teckenstorlek: 10rem;
linjehöjd: 1;
text-align: center;
}
.kingdom--shadow:: före {
färg: #000;
innehåll: attr(data-text);
marginal-top: 0,7rem;
position: absolut;
transform: perspektiv (205px) rotateX(38grader) skala (0,84);
z-index: -1;
}

Kodare

Detta ljusa och positiva text-skugga effekt förmedlar en självmedveten och motiverad webbplatspersonlighet. Du kan lägga till den på din webbplats för att skapa en enkel rökig look.

Produktion

HTML

 skugga #09 


Äta 

Sömn 

Koda 

Upprepa

CSS

kropp {
bakgrundsfärg: #5e5555;
}
div {
teckensnittsfamilj: Verdana, Genève, Tahoma, sans-serif;
stoppning: 40px;
marginal: 0px auto;
font-weight: fet;
linjehöjd: 5,8 rem;
text-align: vänster;
färg: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Elegant

Om du älskar minimalism är denna textskuggeffekt en perfekt passform. Eftersom den använder en stor teckenstorlek minskade vi teckenavstånd och tillämpade text-skugga egenskap för att skapa denna effekt.

Produktion

HTML

 skugga #10 


s
h
r
a
d
d
h
a

CSS

.elegant {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
teckenstorlek: 10rem;
bokstavsmellanrum: -1rem;
färg vit;
text-shadow: -18px 8px 18px #b4bbbb;
}

Lekfull

Den tunna och djärva konturen gör denna text attraktiv och livlig. Du kan leka med text-skugga egenskap utan oskärpa radie vid olika positioner. Textskuggor gäller för alla tecken, inklusive HTML-enheter som t.ex ♥. Du kan använda en Referensdiagram för karaktär Entitet att utforska vidare.

Produktion

HTML

 skugga #11 
Kodning är ♥

CSS

.lekfull {
font-family: 'Baloo Tamma', kursiv;
färg: #fff;
bokstavsmellanrum: 0,2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Fortsätt att experimentera med avancerade skuggeffekter

Textskuggor är ett enkelt och effektivt sätt att förbättra din webbdesign och göra din webbplats visuellt tilltalande. Du kan också experimentera med olika skuggeffekter. Du kan lära dig mer om skuggeffekter för att fortsätta din CSS-resa.

Naincy Mourya (15 publicerade artiklar)

Naincy specialiserar sig på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologier.

Mer från Naincy Mourya