CSS3 leidžia būti kūrybingam ir eksperimentuoti su savo dizainu, kad sukurtumėte gražius ir unikalius tinklalapius. Viena dizaino sričių, su kuria CSS leidžia dirbti, yra tipografija.

Galite naudoti šrifto šeima ir tekstas-šešėlis savybes, kad sukurtų paprastus, bet nepaprastus efektus. Galbūt jau žinote apie pagrindines teksto šešėlio programas CSS. Tačiau naudodami šias savybes galite sukurti daugybę stilių.

Šiame straipsnyje sužinosite, kaip efektyviai sukurti skirtingus teksto šešėlių efektus naudojant HTML ir CSS.

Darbo su HTML ir CSS pradžia

Galite nukopijuoti ir įklijuoti šiuos kodo pavyzdžius, kad gautumėte norimą teksto šešėlio efektą. Pradėkite kurdami index.html failas ir a stilius.css failą. Tai yra vieninteliai failai, kurių jums reikės norint išbandyti pavyzdžius, tačiau kiekvienam pavyzdžiui turėsite pakeisti abu failus.

index.html

 šešėlis #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stiliaus lapas"
/>
 šešėlis #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stiliaus lapas"
/>
 šešėlis #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stiliaus lapas"
/>
 šešėlis #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stiliaus lapas"
/>
 šešėlis #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stiliaus lapas"
/>
 šešėlis #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stiliaus lapas"
/>
 šešėlis #07 


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

stilius.css

kūnas {
teksto transformavimas: didžiosios raidės;
linijos aukštis: 1;
teksto lygiavimas: centre;
šrifto dydis: 5rem;
ekranas: tinklelis;
tarpas: 4rem;
}

Dabar panagrinėkime 11 šešėlinių teksto pavyzdžių, kuriuos galite išbandyti.

Susijęs: Kaip pakeisti savo svetainės tekstą naudojant CSS šriftų šeimos nuosavybę

Mistikas

Mystic yra stiklinis stilius, suteikiantis šaunų perėjimą panašų efektą nenaudojant transformuoti nuosavybė. Tai itin paprastas, tačiau estetiškas efektas drąsiai ir į augimą orientuotai svetainei.

Išvestis

HTML

 Šešėlis #01 
Mistikas

CSS

kūnas {
fono spalva: #5e5555;
}
.mystic {
šriftų šeima: „Bowlby One“, kursyvas;
spalva: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

Monotoniškas

Tai žaismingas teksto efektas naudojant „Monoton“ šriftą. Galite žaisti su tekstu ir šešėlių spalvomis, kad atitiktų pagrindines jūsų svetainės spalvas.

Išvestis

HTML

 Šešėlis #02 
Monotoniškas

CSS

.monoton {
šriftų šeima: 'Monoton', kursyvas;
šrifto dydis: 15 rem;
spalva: rgb (255, 0, 0);
neskaidrumas: 0,5;
teksto šešėlis: 0px -78px rgb (255, 196, 0);
}

Bungee

Tai puikus stilius, naudojant šriftą „Bungee Shade“. Kartu su tamsiu fonu sukuriamas neapdorotas efektas su įtarimu.

Išvestis

HTML

 šešėlis #03 
Bungee

CSS

kūnas {
fono spalva: #222;
}
.bungee {
šriftų šeima: „Bungee Shade“, kursyvas;
spalva: rgb (160, 12, 12);
neskaidrumas: 0,9;
tekstas-šešėlis: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktyvus

Šį efektą galite naudoti įspėjamiesiems ar pavojaus ženklams. Jis naudoja šriftą „Rampart One“.

Išvestis

HTML

 šešėlis #04 
Radioaktyvus

CSS

kūnas {
fono spalva: #27292d;
}
.radioactive {
šriftų šeima: „Rampart One“, kursyvas;
spalva: rgb (97, 214, 43);
neskaidrumas: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprintas

Šiam veikiančiam teksto efektui naudojamas šriftas „Faster One“. tekstas-šešėlis turtas ir an ::popseudoelementas tokio pat turinio kaip ir tekstas. Tai sukuria „dvigubą“ efektą.

Išvestis

HTML

 šešėlis #05 
Sprintas

CSS

kūnas {
fono spalva: #27292d;
}
.sprint {
šriftų šeima: 'Faster One', kursyvus;
šrifto dydis: 10rem;
spalva: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
tarpai tarp raidžių: 1rem;
padėtis: santykinė;
}
.sprint:: po {
turinys: „sprintas“;
padėtis: absoliuti;
viršuje: 215 pikselių;
dešinėje: 300 taškų;
}

Dygliuotas

Šiam siaubingam dygliuoto teksto efektui naudojamas šriftas „Eater“. Galite pabandyti perjungti tekstas-šešėlis į apačią į dešinę.

Išvestis

HTML

 šešėlis #06 
Dygliuotas

CSS

.dygliuotas {
šriftų šeima: 'Valgytojas', kursyvas;
tekstas-šešėlis: -18px -18px 2px #777;
}

Codystar

Teksto šešėlis gali veikti kaip neryškus, bet matomas teksto kontūras. Šis ryškus efektas daro stebuklus naudojant „Codystar“ šriftą.

Išvestis

HTML

 šešėlis #06 
Codystar

CSS

.codystar {
šriftų šeima: „Codystar“, kursyvas;
šrifto svoris: paryškintas;
spalva: rgb (55, 58, 255);
teksto šešėlis: 1 piks. 1 piks. 10 piks. rgb (16, 72, 255), 1 piks. 1 piks. 10 piks. rgb (0, 195, 255);
}

Karalystė

Su šiuo šešėlio efektu galite pasiekti autoritetingos tipografijos. Jis naudoja ::prieš pseudoelementas ir transformuoti savybė pasvirusi šešėlį.

Išvestis

HTML

 šešėlis #08 
Karalystė

CSS

kūnas {
fono spalva: #5e5555;
}
.kingdom {
spalva: balta;
šriftų šeima: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
šrifto dydis: 10rem;
linijos aukštis: 1;
teksto lygiavimas: centre;
}
.karalystė – šešėlis:: prieš {
spalva: #000;
turinys: attr(duomenys-tekstas);
paraštė-viršus: 0,7rem;
padėtis: absoliuti;
transformuoti: perspektyvos (205 pikselių) pasuktiX (38 laipsnių) skalė (0,84);
z indeksas: -1;
}

Koderis

Tai šviesu ir teigiama tekstas-šešėlis efektas perteikia save žinančią ir motyvuotą svetainės asmenybę. Galite pridėti jį prie savo svetainės, kad sukurtumėte paprastą dūminį vaizdą.

Išvestis

HTML

 šešėlis #09 


Valgyk 

Miegoti 

Kodas 

Pakartokite

CSS

kūnas {
fono spalva: #5e5555;
}
div {
šriftų šeima: Verdana, Geneva, Tahoma, sans-serif;
pamušalas: 40px;
paraštė: 0px automatinis;
šrifto svoris: paryškintas;
linijos aukštis: 5,8rem;
teksto lygiavimas: kairėje;
spalva: rgb (94, 94, 94);
} 
.coder-life {
teksto šešėlis: 5 pikseliai 5 pikseliai #ffff00;
filtras: drop-shadow (-10px 10px 20px #fff000);
}

Elegantiškas

Jei mėgstate minimalizmą, šis teksto šešėlių efektas puikiai tiks. Kadangi naudojamas didelis šriftas, sumažinome tarpai tarp raidžių ir pritaikė tekstas-šešėlis savybė sukurti šį efektą.

Išvestis

HTML

 šešėlis #10 


s
h
r
a
d
d
h
a

CSS

.elegant {
šriftų šeima: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
šrifto dydis: 10rem;
tarpai tarp raidžių: -1rem;
spalva: balta;
tekstas-šešėlis: -18px 8px 18px #b4bbbb;
}

Žaismingas

Ploni ir drąsūs kontūrai daro šį tekstą patrauklų ir gyvą. Galite žaisti su tekstas-šešėlis nuosavybė be suliejimo spindulio skirtingose ​​padėtyse. Teksto šešėliai taikomi visiems simboliams, įskaitant HTML objektus, tokius kaip ♥. Galite naudoti a Simbolių objekto nuorodos diagrama tyrinėti toliau.

Išvestis

HTML

 šešėlis #11 
Kodavimas yra ♥

CSS

.playful {
šriftų šeima: „Baloo Tamma“, kursyvas;
spalva: #fff;
tarpai tarp raidžių: 0,2rem;
teksto šešėlis: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Eksperimentuokite su išplėstiniais šešėlių efektais

Teksto šešėliai yra paprastas ir efektyvus būdas patobulinti savo interneto dizainą ir padaryti svetainę vizualiai patrauklią. Taip pat galite eksperimentuoti su skirtingais šešėlių efektais. Norėdami tęsti savo CSS kelionę, galite sužinoti daugiau apie šešėlių efektus.

Naincy Mourya (15 straipsnių paskelbta)

Naincy specializuojasi kuriant labai reaguojančias svetaines ir efektyvią turinio strategiją bei žiniatinklio kopijas. Ji yra laisvai samdoma technologijų rašytoja, kuri atidžiai stebi naujausias technologijas.

Daugiau iš Naincy Mourya