CSS3 võimaldab teil olla loominguline ja katsetada oma disainiga, et luua ilusaid ja ainulaadseid veebilehti. Üks disainivaldkond, millega CSS võimaldab töötada, on tüpograafia.

Saate kasutada font-perekond ja tekst-vari omadused, et luua lihtsaid, kuid tähelepanuväärseid efekte. Võib-olla teate juba CSS-i tekstivarju põhirakendusi. Nende omadustega saate aga luua laia valikut stiile.

Sellest artiklist saate teada, kuidas HTML-i ja CSS-i abil luua erinevaid tekstivarjuefekte.

HTML-i ja CSS-iga alustamine

Saate need koodinäited kopeerida ja kleepida, et saada soovitud tekstivarjuefekt. Alustage selle loomisega index.html fail ja a stiil.css faili. Need on ainsad failid, mida näidete proovimiseks vajate, kuid iga näite puhul peate mõlemat faili muutma.

index.html

 vari nr 01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="laadileht"
/>
 vari nr 02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="laadileht"
/>
 vari nr 03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="laadileht"
/>
 vari nr 04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="laadileht"
/>
 vari nr 05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="laadileht"
/>
 vari nr 06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="laadileht"
/>
 vari nr 07 


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

stiil.css

keha {
text-transform: suurtähtedega;
joone kõrgus: 1;
teksti joondamine: keskel;
fondi suurus: 5rem;
ekraan: ruudustik;
vahe: 4rem;
}

Vaatame nüüd proovimiseks läbi 11 tekstivarjunäidet.

Seotud: Kuidas muuta oma veebisaidi teksti CSS-i fondiperekonna atribuudiga

Müstika

Mystic on klaasjas stiil, mis annab laheda üleminekutaolise efekti ilma seda kasutamata teisendada vara. See on ülilihtne, kuid esteetiliselt meeldiv efekt julge ja kasvule orienteeritud veebisaidi jaoks.

Väljund

HTML

 Vari nr 01 
Müstika

CSS

keha {
taustavärv: #5e5555;
}
.mystic {
fondiperekond: 'Bowlby One', kursiiv;
värv: rgba (255, 255, 255, 0,596);
tekstivari: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

See on mänguline tekstiefekt, mis kasutab fondi "Monoton". Saate mängida teksti ja varjuvärviga, et need sobiksid teie veebisaidi põhivärvidega.

Väljund

HTML

 Vari nr 02 
Monoton

CSS

.monoton {
fondiperekond: 'Monoton', kursiiv;
fondi suurus: 15rem;
värv: rgb (255, 0, 0);
läbipaistmatus: 0,5;
tekstivari: 0px -78px rgb (255, 196, 0);
}

Benji

See on lahe stiil, kasutades fonti "Bungee Shade". Kombineerituna tumeda taustaga tekitab see toores efekti koos kahtlustava tundega.

Väljund

HTML

 vari nr 03 
Benji

CSS

keha {
taustavärv: #222;
}
.bengee {
fondiperekond: 'Bungee Shade', kursiiv;
värv: rgb (160, 12, 12);
läbipaistmatus: 0,9;
tekstivari: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktiivne

Saate seda efekti kasutada hoiatus- või ohumärkide jaoks. See kasutab fondi "Rampart One".

Väljund

HTML

 vari nr 04 
Radioaktiivne

CSS

keha {
taustavärv: #27292d;
}
.radioactive {
fondiperekond: 'Rampart One', kursiiv;
värv: rgb (97, 214, 43);
läbipaistmatus: 0,6;
tekstivari: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

See töötav tekstiefekt kasutab fonti "Faster One". tekst-vari vara ja an ::pärastpseudoelement tekstiga sama sisuga. See loob "kahekordistava" efekti.

Väljund

HTML

 vari nr 05 
Sprint

CSS

keha {
taustavärv: #27292d;
}
.sprint {
font-family: 'Faster One', kursiiv;
fondi suurus: 10rem;
värv: rgba (255, 0, 242, 0,322);
tekstivari: -20px -108px 0px rgba (255, 255, 255, 0,445);
tähtede vahe: 1rem;
asend: suhteline;
}
.sprint:: pärast {
sisu: 'sprint';
positsioon: absoluutne;
ülemine: 215 pikslit;
paremal: 300 pikslit;
}

Kipitav

See õõvastav kipitav tekstiefekt kasutab kirjatüüpi "Eater". Võite proovida nihutada tekst-vari selle asemel all paremale.

Väljund

HTML

 vari nr 06 
Kipitav

CSS

.prickly {
font-family: 'Sööja', kursiiv;
text-shadow: -18px -18px 2px #777;
}

Codystar

Tekstivari võib toimida teksti häguse, kuid siiski nähtava piirjoonena. See särav efekt teeb fondi "Codystar" abil imesid.

Väljund

HTML

 vari nr 06 
Codystar

CSS

.codystar {
fondiperekond: 'Codystar', kursiiv;
fondi kaal: paks;
värv: rgb (55, 58, 255);
tekstivari: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Kuningriik

Selle varjuefektiga saate saavutada autoriteetse tüpograafia. See kasutab :: enne pseudoelement ja teisendada omadus varju kallutada.

Väljund

HTML

 vari nr 08 
Kuningriik

CSS

keha {
taustavärv: #5e5555;
}
.kuningriik {
värvus: valge;
fondiperekond: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
fondi suurus: 10rem;
joone kõrgus: 1;
teksti joondamine: keskel;
}
.kuningriik--vari:: enne {
värv: #000;
sisu: attr(andmetekst);
margin-top: 0,7rem;
positsioon: absoluutne;
teisendus: perspektiiv (205 pikslit) pööra X (38 kraadi) skaalat (0,84);
z-indeks: -1;
}

Kodeerija

See helge ja positiivne tekst-vari efekt annab edasi eneseteadliku ja motiveeritud veebisaidi isikupära. Saate selle oma veebisaidile lisada, et luua lihtne suitsune välimus.

Väljund

HTML

 vari nr 09 


Sööma 

Magama 

Kood 

Korda

CSS

keha {
taustavärv: #5e5555;
}
div {
fondiperekond: Verdana, Genf, Tahoma, sans-serif;
polsterdus: 40px;
veeris: 0px auto;
fondi kaal: paks;
joone kõrgus: 5,8rem;
teksti joondamine: vasakule;
värv: rgb (94, 94, 94);
} 
.coder-life {
tekstivari: 5px 5px #ffff00;
filter: drop-shadow (-10px 10px 20px #fff000);
}

Elegantne

Kui teile meeldib minimalism, siis see tekstivarjuefekt sobib ideaalselt. Kuna see kasutab suurt kirjasuurust, vähendasime tähevahe ja rakendas tekst-vari omadus selle efekti loomiseks.

Väljund

HTML

 vari nr 10 


s
h
r
a
d
d
h
a

CSS

.elegant {
fondiperekond: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
fondi suurus: 10rem;
tähtede vahe: -1rem;
värvus: valge;
tekst-vari: -18px 8px 18px #b4bbbb;
}

Mänguline

Õhuke ja julge piirjoon muudab selle teksti atraktiivseks ja elavaks. Saate ringi mängida tekst-vari atribuut ilma hägususe raadiuseta erinevates kohtades. Tekstivarjud kehtivad kõikidele tähemärkidele, sealhulgas HTML-i olemitele, näiteks ♥. Võite kasutada a Tähemärgi olemi viitetabel edasi uurima.

Väljund

HTML

 vari nr 11 
Kodeerimine on ♥

CSS

.playful {
fondiperekond: 'Baloo Tamma', kursiiv;
värv: #fff;
tähtede vahe: 0,2rem;
tekstivari: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Jätkake täiustatud varjuefektidega katsetamist

Tekstivarjud on lihtne ja tõhus viis oma veebikujunduse täiustamiseks ja veebisaidi visuaalselt atraktiivseks muutmiseks. Katsetada saab ka erinevate varjuefektidega. CSS-i teekonna jätkamiseks saate lisateavet varjuefektide kohta.

Naincy Mourya (15 avaldatud artiklit)

Naincy on spetsialiseerunud väga tundlike veebisaitide ja tõhusa sisustrateegia koostamisele koos veebikoopiatega. Ta on vabakutseline tehnikakirjanik, kes hoiab trendikatel tehnoloogiatel teravat silma peal.

Veel Naincy Mouryalt