CSS3 lar deg være kreativ og eksperimentere med designet ditt for å bygge vakre og unike nettsider. Et designområde som CSS lar deg jobbe med er typografi.

Du kan bruke font-familie og tekst-skygge egenskaper for å skape enkle, men bemerkelsesverdige effekter. Du vet kanskje allerede om grunnleggende applikasjoner av tekstskygge i CSS. Du kan imidlertid lage et bredt spekter av stiler med disse egenskapene.

I denne artikkelen lærer du en effektiv måte å lage forskjellige tekstskyggeeffekter ved å bruke HTML og CSS.

Komme i gang med HTML og CSS

Du kan kopiere og lime inn disse kodeeksemplene for å få den tekstskyggeeffekten du foretrekker. Start med å lage en index.html fil og en style.css fil. Dette er de eneste filene du trenger for å prøve eksemplene, men du må endre begge filene 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

kropp {
tekst-transform: store bokstaver;
linje-høyde: 1;
tekst-align: center;
skriftstørrelse: 5rem;
display: rutenett;
gap: 4rem;
}

La oss nå gå gjennom 11 tekstskyggeeksempler som du kan prøve ut.

I slekt: Hvordan endre teksten til nettstedet ditt med CSS-fontfamilie-eiendommen

Mystiker

Mystic er en glassaktig stil som gir en kul overgangslignende effekt uten å bruke forvandle eiendom. Det er en superenkel, men likevel estetisk tiltalende effekt for et dristig og vekstorientert nettsted.

Produksjon

HTML

 Skygge #01 
Mystiker

CSS

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

Monoton

Dette er en leken teksteffekt som bruker fonten "Monoton". Du kan leke med teksten og skyggefargen for å matche nettstedets primærfarger.

Produksjon

HTML

 Skygge #02 
Monoton

CSS

.monoton {
font-family: 'Monoton', kursiv;
skriftstørrelse: 15rem;
farge: rgb (255, 0, 0);
opasitet: 0,5;
tekstskygge: 0px -78px rgb (255, 196, 0);
}

Bungee

Dette er en kul stil med skrifttypen "Bungee Shade". Kombinert med en mørk bakgrunn gir den en rå effekt med en følelse av mistenksomhet.

Produksjon

HTML

 skygge #03 
Bungee

CSS

kropp {
bakgrunnsfarge: #222;
}
.bungee {
font-family: 'Bungee Shade', kursiv;
farge: rgb (160, 12, 12);
opasitet: 0,9;
tekst-skygge: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktivt

Du kan bruke denne effekten for varsel- eller faresignaler. Den bruker skrifttypen "Rampart One".

Produksjon

HTML

 skygge #04 
Radioaktivt

CSS

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

Sprint

Denne løpende teksteffekten bruker 'Faster One'-fonten, den tekst-skygge eiendom, og en ::etterpseudo-element med samme innhold som teksten. Dette skaper en "dobling"-effekt.

Produksjon

HTML

 skygge #05 
Sprint

CSS

kropp {
bakgrunnsfarge: #27292d;
}
.sprint {
font-family: 'Faster One', kursiv;
skriftstørrelse: 10rem;
farge: rgba (255, 0, 242, 0,322);
tekst-skygge: -20px -108px 0px rgba (255, 255, 255, 0,445);
bokstavavstand: 1rem;
stilling: pårørende;
}
.sprint:: etter {
innhold: 'sprint';
posisjon: absolutt;
topp: 215px;
høyre: 300px;
}

stikkende

Denne grufulle stikkende teksteffekten bruker «Eater»-fonten. Du kan prøve å skifte tekst-skygge mot nede til høyre i stedet.

Produksjon

HTML

 skygge #06 
stikkende

CSS

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

Codystar

Tekstskyggen kan fungere som en uskarp, men likevel synlig kontur av teksten. Denne lyse effekten gjør underverker med 'Codystar'-fonten.

Produksjon

HTML

 skygge #06 
Codystar

CSS

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

kongedømme

Du kan oppnå autoritativ typografi med denne skyggeeffekten. Den bruker ::før pseudo-elementet og forvandle eiendom for å skråstille skyggen.

Produksjon

HTML

 skygge #08 
kongedømme

CSS

kropp {
bakgrunnsfarge: #5e5555;
}
.kongedømme {
farge: hvit;
font-familie: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
skriftstørrelse: 10rem;
linje-høyde: 1;
tekst-align: center;
}
.kingdom--shadow:: før {
farge: #000;
innhold: attr(data-tekst);
margin-topp: 0,7rem;
posisjon: absolutt;
transform: perspektiv (205px) rotateX(38grader) skala (0,84);
z-indeks: -1;
}

Koder

Dette lyse og positive tekst-skygge effekt formidler en selvbevisst og motivert nettsidepersonlighet. Du kan legge den til på nettstedet ditt for å produsere et enkelt røykfylt utseende.

Produksjon

HTML

 skygge #09 


Spise 

Søvn 

Kode 

Gjenta

CSS

kropp {
bakgrunnsfarge: #5e5555;
}
div {
font-familie: Verdana, Genève, Tahoma, sans-serif;
polstring: 40px;
margin: 0px auto;
font-weight: fet;
linjehøyde: 5,8 rem;
tekstjustering: venstre;
farge: rgb (94, 94, 94);
} 
.coder-life {
tekst-skygge: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Elegant

Hvis du elsker minimalisme, passer denne tekstskyggeeffekten perfekt. Siden den bruker en stor skriftstørrelse, reduserte vi avstand mellom bokstavene og brukte tekst-skygge egenskap for å skape denne effekten.

Produksjon

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;
bokstavavstand: -1rem;
farge: hvit;
tekst-skygge: -18px 8px 18px #b4bbbb;
}

Leken

Den tynne og dristige omrisset gjør denne teksten attraktiv og livlig. Du kan leke med tekst-skygge egenskap uten uskarphet i forskjellige posisjoner. Tekstskygger gjelder for alle tegn, inkludert HTML-enheter som f.eks ♥. Du kan bruke en Character Entity Reference Chart å utforske videre.

Produksjon

HTML

 skygge #11 
Koding er ♥

CSS

.leken {
font-family: 'Baloo Tamma', kursiv;
farge: #fff;
bokstavavstand: 0,2rem;
tekstskygge: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Fortsett å eksperimentere med avanserte skyggeeffekter

Tekstskygger er en enkel og effektiv måte å forbedre webdesignet ditt og gjøre nettstedet ditt visuelt tiltalende. Du kan også eksperimentere med forskjellige skyggeeffekter. Du kan lære mer om skyggeeffekter for å fortsette CSS-reisen.

Naincy Mourya (15 artikler publisert)

Naincy spesialiserer seg på å bygge svært responsive nettsteder og effektiv innholdsstrategi sammen med nettkopier. Hun er en freelance tech-skribent som holder et skarpt øye med trendende teknologier.

Mer fra Naincy Mourya