CSS3 giver dig mulighed for at være kreativ og eksperimentere med dit design for at bygge smukke og unikke websider. Et designområde, som CSS giver dig mulighed for at arbejde med, er typografi.

Du kan bruge skrifttype-familie og tekst-skygge egenskaber for at skabe enkle, men bemærkelsesværdige effekter. Du kender måske allerede til grundlæggende anvendelser af tekstskygge i CSS. Du kan dog oprette en lang række stilarter med disse egenskaber.

I denne artikel lærer du en effektiv måde at skabe forskellige tekstskyggeeffekter ved hjælp af HTML og CSS.

Kom godt i gang med HTML og CSS

Du kan kopiere og indsætte disse kodeeksempler for at få den tekstskyggeeffekt, du foretrækker. Start med at oprette en index.html fil og en style.css fil. Dette er de eneste filer, du skal bruge for at prøve eksemplerne, men du skal ændre begge filer for hvert eksempel.

index.html

 skygge #01 


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


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


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


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


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


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


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

style.css

krop {
tekst-transform: store bogstaver;
linje-højde: 1;
tekst-align: center;
skriftstørrelse: 5rem;
display: gitter;
mellemrum: 4rem;
}

Lad os nu gennemgå 11 tekstskyggeeksempler, som du kan prøve.

Relaterede: Sådan ændrer du teksten på dit websted med CSS-fontfamiliens egenskab

Mystiker

Mystic er en glasagtig stil, der giver en cool overgangslignende effekt uden at bruge transformere ejendom. Det er en super enkel, men alligevel æstetisk tiltalende effekt til en fed og vækstorienteret hjemmeside.

Produktion

HTML

 Skygge #01 
Mystiker

CSS

krop {
baggrundsfarve: #5e5555;
}
.mystic {
font-family: 'Bowlby One', kursiv;
farve: rgba (255, 255, 255, 0,596);
tekst-skygge: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Dette er en legende teksteffekt ved hjælp af 'Monoton'-skrifttypen. Du kan lege med teksten og skyggefarven for at matche dit websteds primære farver.

Produktion

HTML

 Skygge #02 
Monoton

CSS

.monoton {
font-family: 'Monoton', kursiv;
skriftstørrelse: 15rem;
farve: rgb (255, 0, 0);
opacitet: 0,5;
tekst-skygge: 0px -78px rgb (255, 196, 0);
}

Bungee

Dette er en cool stil, der bruger skrifttypen 'Bungee Shade'. Kombineret med en mørk baggrund giver det en rå effekt med en følelse af mistænksomhed.

Produktion

HTML

 skygge #03 
Bungee

CSS

krop {
baggrundsfarve: #222;
}
.bungee {
font-family: 'Bungee Shade', kursiv;
farve: rgb (160, 12, 12);
opacitet: 0,9;
tekst-skygge: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktiv

Du kan bruge denne effekt til advarsels- eller faretegn. Den bruger skrifttypen 'Rampart One'.

Produktion

HTML

 skygge #04 
Radioaktiv

CSS

krop {
baggrundsfarve: #27292d;
}
.radioactive {
font-family: 'Rampart One', kursiv;
farve: rgb (97, 214, 43);
opacitet: 0,6;
tekst-skygge: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Denne kørende teksteffekt bruger skrifttypen 'Faster One', tekst-skygge ejendom, og en ::efterpseudo-element med samme indhold som teksten. Dette skaber en 'fordobling'-effekt.

Produktion

HTML

 skygge #05 
Sprint

CSS

krop {
baggrundsfarve: #27292d;
}
.sprint {
font-family: 'Faster One', kursiv;
skriftstørrelse: 10rem;
farve: rgba (255, 0, 242, 0,322);
tekst-skygge: -20px -108px 0px rgba (255, 255, 255, 0,445);
bogstav-mellemrum: 1rem;
stilling: relativ;
}
.sprint:: efter {
indhold: 'sprint';
position: absolut;
top: 215px;
højre: 300px;
}

stikkende

Denne rædselsvækkende stikkende teksteffekt bruger skrifttypen 'Eater'. Du kan prøve at skifte tekst-skygge mod nederste højre i stedet.

Produktion

HTML

 skygge #06 
stikkende

CSS

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

Codystar

Tekstskyggen kan fungere som en sløret, men synlig omrids til teksten. Denne lyse effekt gør underværker med 'Codystar'-skrifttypen.

Produktion

HTML

 skygge #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', kursiv;
font-weight: fed;
farve: rgb (55, 58, 255);
tekst-skygge: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Kongerige

Du kan opnå autoritativ typografi med denne skyggeeffekt. Den bruger ::Før pseudo-element og transformere ejendom til at skrå skyggen.

Produktion

HTML

 skygge #08 
Kongerige

CSS

krop {
baggrundsfarve: #5e5555;
}
.Kongerige {
farve: hvid;
font-familie: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
skriftstørrelse: 10rem;
linje-højde: 1;
tekst-align: center;
}
.kingdom--shadow:: før {
farve: #000;
indhold: attr(data-tekst);
margin-top: 0,7rem;
position: absolut;
transform: perspektiv (205px) rotateX(38deg) skala (0,84);
z-indeks: -1;
}

Koder

Denne lyse og positive tekst-skygge effekt formidler en selvbevidst og motiveret hjemmesidepersonlighed. Du kan tilføje det til dit websted for at skabe et simpelt røget look.

Produktion

HTML

 skygge #09 


Spise 

Søvn 

Kode 

Gentage

CSS

krop {
baggrundsfarve: #5e5555;
}
div {
skrifttype-familie: Verdana, Geneve, Tahoma, sans-serif;
polstring: 40px;
margin: 0px auto;
font-weight: fed;
line-højde: 5.8rem;
tekst-align: venstre;
farve: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Elegant

Hvis du elsker minimalisme, så passer denne tekstskyggeeffekt perfekt. Da den bruger en stor skriftstørrelse, reducerede vi bogstavmellemrum og anvendte tekst-skygge egenskab for at skabe denne effekt.

Produktion

HTML

 skygge #10 


s
h
r
-en
d
d
h
-en

CSS

.elegant {
font-familie: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
skriftstørrelse: 10rem;
bogstav-mellemrum: -1rem;
farve: hvid;
tekst-skygge: -18px 8px 18px #b4bbbb;
}

legende

Den tynde og dristige kontur gør denne tekst attraktiv og livlig. Du kan lege med tekst-skygge egenskab uden sløringsradius ved forskellige positioner. Tekstskygger gælder for alle tegn, inklusive HTML-enheder som f.eks ♥. Du kan bruge en Character Entity Reference Chart at udforske yderligere.

Produktion

HTML

 skygge #11 
Kodning er ♥

CSS

.legende {
font-family: 'Baloo Tamma', kursiv;
farve: #fff;
bogstavmellemrum: 0,2rem;
tekst-skygge: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Fortsæt med at eksperimentere med avancerede skyggeeffekter

Tekstskygger er en nem og effektiv måde at forbedre dit webdesign og gøre din hjemmeside visuelt tiltalende. Du kan også eksperimentere med forskellige skyggeeffekter. Du kan lære mere om drop shadow-effekter for at fortsætte din CSS-rejse.

Naincy Mourya (15 artikler udgivet)

Naincy har specialiseret sig i at bygge meget responsive hjemmesider og effektiv indholdsstrategi sammen med webkopier. Hun er en freelance tech-skribent, der holder skarpt øje med trendende teknologier.

Mere fra Naincy Mourya