CSS3 ļauj jums būt radošam un eksperimentēt ar savu dizainu, lai izveidotu skaistas un unikālas tīmekļa lapas. Viena no dizaina jomām, ar kuru CSS ļauj strādāt, ir tipogrāfija.

Jūs varat izmantot fontu ģimene un teksts-ēna īpašības, lai radītu vienkāršus, bet ievērojamus efektus. Iespējams, jūs jau zināt par teksta ēnas pamata lietojumprogrammām CSS. Tomēr ar šīm īpašībām varat izveidot plašu stilu klāstu.

Šajā rakstā jūs uzzināsit, kā efektīvi izveidot dažādus teksta ēnu efektus, izmantojot HTML un CSS.

Darba sākšana ar HTML un CSS

Varat kopēt un ielīmēt šos kodu piemērus, lai iegūtu vēlamo teksta ēnas efektu. Sāciet, izveidojot index.html fails un a stils.css failu. Šie ir vienīgie faili, kas jums būs nepieciešami, lai izmēģinātu piemērus, taču katram piemēram būs jāmaina abi faili.

index.html

 ēna #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stila lapa"
/>
 ēna #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stila lapa"
/>
 ēna #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stila lapa"
/>
 ēna #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stila lapa"
/>
 ēna #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stila lapa"
/>
 ēna #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stila lapa"
/>
 ēna #07 


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

stils.css

body {
teksta pārveidošana: lielie burti;
līnijas augstums: 1;
teksta līdzināšana: centrs;
fonta izmērs: 5rem;
displejs: režģis;
atstarpe: 4rem;
}

Tagad apskatīsim 11 teksta ēnu piemērus, ko varat izmēģināt.

Saistīts: Kā mainīt vietnes tekstu, izmantojot CSS fontu saimes īpašumu

Mistiķis

Mystic ir stiklveida stils, kas nodrošina vēsu pārejas efektu, neizmantojot pārveidot īpašums. Tas ir ļoti vienkāršs, taču estētiski pievilcīgs efekts drosmīgai un uz izaugsmi vērstai vietnei.

Izvade

HTML

 Ēna #01 
Mistiķis

CSS

body {
fona krāsa: #5e5555;
}
.mystic {
fontu saime: 'Bowlby One', kursīvs;
krāsa: rgba (255, 255, 255, 0,596);
teksta ēna: 20 pikseļi 0 pikseļi 10 pikseļi rgb (0, 0, 0);
}

Monotons

Šis ir rotaļīgs teksta efekts, izmantojot fontu “Monoton”. Varat spēlēties ar teksta un ēnu krāsu, lai tas atbilstu jūsu vietnes pamatkrāsām.

Izvade

HTML

 Ēna #02 
Monotons

CSS

.monoton {
fontu saime: 'Monoton', kursīvs;
fonta izmērs: 15 rem;
krāsa: rgb (255, 0, 0);
necaurredzamība: 0,5;
teksta ēna: 0 pikseļi -78 pikseļi rgb (255, 196, 0);
}

Bungee

Šis ir foršs stils, izmantojot fontu “Bungee Shade”. Apvienojumā ar tumšu fonu tas rada neapstrādātu efektu ar aizdomīgumu.

Izvade

HTML

 ēna #03 
Bungee

CSS

body {
fona krāsa: #222;
}
.bungee {
fontu saime: 'Bungee Shade', kursīvs;
krāsa: rgb (160, 12, 12);
necaurredzamība: 0,9;
teksta ēna: -18 pikseļi 18 pikseļi 0 rgb (66, 45, 45);
}

Radioaktīvs

Šo efektu varat izmantot brīdinājuma vai bīstamības zīmēm. Tas izmanto fontu “Rampart One”.

Izvade

HTML

 ēna #04 
Radioaktīvs

CSS

body {
fona krāsa: #27292d;
}
.radioactive {
fontu saime: 'Rampart One', kursīvs;
krāsa: rgb (97, 214, 43);
necaurredzamība: 0,6;
teksta ēna: -18px -18px 20px rgb (87, 255, 9);
}

Sprints

Šajā teksta efektā tiek izmantots “Faster One” fonts teksts-ēna īpašums un an ::pēcpseidoelements ar tādu pašu saturu kā teksts. Tas rada "dubultošanās" efektu.

Izvade

HTML

 ēna #05 
Sprints

CSS

body {
fona krāsa: #27292d;
}
.sprint {
fontu saime: 'Faster One', kursīvs;
fonta izmērs: 10rem;
krāsa: rgba (255, 0, 242, 0,322);
teksta ēna: -20 pikseļi -108 pikseļi 0 pikseļi rgba (255, 255, 255, 0,445);
burtu atstarpes: 1rem;
pozīcija: relatīvs;
}
.sprint:: pēc {
saturs: 'sprints';
pozīcija: absolūta;
augšpusē: 215 pikseļi;
pa labi: 300 pikseļi;
}

dzeloņains

Šis šausminošais dzeloņains teksta efekts izmanto fontu “Ēdējs”. Varat mēģināt pārslēgt teksts-ēna tā vietā apakšā pa labi.

Izvade

HTML

 ēna #06 
dzeloņains

CSS

.prickly {
font-family: 'ēdājs', kursīvs;
teksta ēna: -18px -18px 2px #777;
}

Codystar

Teksta ēna var darboties kā neskaidra, taču redzama teksta kontūra. Šis spilgtais efekts rada brīnumus ar fontu “Codystar”.

Izvade

HTML

 ēna #06 
Codystar

CSS

.codystar {
fontu saime: 'Codystar', kursīvs;
fonta svars: treknrakstā;
krāsa: rgb (55, 58, 255);
teksta ēna: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Karaliste

Izmantojot šo ēnu efektu, varat iegūt autoritatīvu tipogrāfiju. Tas izmanto ::pirms pseidoelements un pārveidot īpašums slīpi ēnu.

Izvade

HTML

 ēna #08 
Karaliste

CSS

body {
fona krāsa: #5e5555;
}
.kingdom {
krāsa: balta;
fontu saime: Impact, Haettenschweiler, "Arial Narrow Bold", bez serifa;
fonta izmērs: 10rem;
līnijas augstums: 1;
teksta līdzināšana: centrs;
}
.kingdom--shadow:: before {
krāsa: #000;
saturs: attr(dati-teksts);
augšdaļa: 0,7 rem;
pozīcija: absolūta;
pārveidot: perspektīva (205 pikseļi) pagriezt X(38 grādu) skalu (0,84);
z-indekss: -1;
}

Kodētājs

Šis gaišs un pozitīvs teksts-ēna efekts atspoguļo sevi apzinošu un motivētu vietnes personību. Varat to pievienot savai vietnei, lai radītu vienkāršu dūmakainu izskatu.

Izvade

HTML

 ēna #09 


Ēst 

Gulēt 

Kods 

Atkārtojiet

CSS

body {
fona krāsa: #5e5555;
}
div {
fontu saime: Verdana, Geneva, Tahoma, sans-serif;
polsterējums: 40 pikseļi;
piemale: 0px auto;
fonta svars: treknrakstā;
līnijas augstums: 5,8 rem;
teksta līdzināšana: pa kreisi;
krāsa: rgb (94, 94, 94);
} 
.coder-life {
teksta ēna: 5 pikseļi 5 pikseļi #ffff00;
filtrs: drop-shadow (-10px 10px 20px #fff000);
}

Elegants

Ja jums patīk minimālisms, tad šis teksta ēnu efekts ir lieliski piemērots. Tā kā tas izmanto lielu fonta izmēru, mēs samazinājām burtu atstarpes un piemēroja teksts-ēna īpašums, lai radītu šo efektu.

Izvade

HTML

 ēna #10 


s
h
r
a
d
d
h
a

CSS

.elegant {
fontu saime: Impact, Haettenschweiler, "Arial Narrow Bold", bez serifa;
fonta izmērs: 10rem;
burtu atstarpes: -1rem;
krāsa: balta;
teksta ēna: -18px 8px 18px #b4bbbb;
}

Rotaļīgs

Plānās un drosmīgās kontūras padara šo tekstu pievilcīgu un dzīvīgu. Jūs varat spēlēties ar teksts-ēna īpašums bez izplūduma rādiusa dažādās pozīcijās. Teksta ēnas attiecas uz visām rakstzīmēm, tostarp HTML entītijām, piemēram, ♥. Jūs varat izmantot a Rakstzīmju entītijas atsauces diagramma izpētīt tālāk.

Izvade

HTML

 ēna #11 
Kodēšana ir ♥

CSS

.playful {
fontu saime: 'Baloo Tamma', kursīvs;
krāsa: #fff;
burtu atstarpes: 0,2rem;
teksta ēna: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Turpiniet eksperimentēt ar uzlabotajiem ēnu efektiem

Teksta ēnas ir vienkāršs un efektīvs veids, kā uzlabot tīmekļa dizainu un padarīt vietni vizuāli pievilcīgu. Varat arī eksperimentēt ar dažādiem ēnu efektiem. Lai turpinātu savu CSS ceļu, varat uzzināt vairāk par ēnu efektiem.

Naincy Mouya (15 publicēti raksti)

Naincy specializējas ļoti atsaucīgu vietņu un efektīvas satura stratēģijas izveidē, kā arī tīmekļa kopijām. Viņa ir ārštata tehnoloģiju rakstniece, kas rūpīgi seko līdzi jaunākajām tehnoloģijām.

Vairāk no Naincy Mourya