CSS3 vam omogućuje da budete kreativni i eksperimentirate sa svojim dizajnom kako biste izgradili lijepe i jedinstvene web stranice. Jedno područje dizajna s kojim vam CSS omogućuje rad je tipografija.

Možete koristiti obitelj fontova i tekst-sjena svojstva za stvaranje jednostavnih, ali izvanrednih učinaka. Možda već znate o osnovnim primjenama sjene teksta u CSS-u. Međutim, s ovim svojstvima možete stvoriti širok raspon stilova.

U ovom ćete članku naučiti učinkovit način stvaranja različitih efekata sjene teksta pomoću HTML-a i CSS-a.

Početak rada s HTML-om i CSS-om

Možete kopirati i zalijepiti ove primjere koda da biste dobili željeni efekt sjene teksta. Započnite stvaranjem index.html datoteka i a style.css datoteka. Ovo su jedine datoteke koje ćete trebati isprobati primjere, ali ćete morati promijeniti obje datoteke za svaki primjer.

index.html

 sjena #01 


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


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


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


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


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


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


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

style.css

tijelo {
transformacija teksta: velika slova;
visina linije: 1;
poravnavanje teksta: središte;
veličina fonta: 5rem;
prikaz: mreža;
razmak: 4rem;
}

Prođimo sada kroz 11 primjera sjene teksta da ih isprobate.

Povezano: Kako promijeniti tekst svoje web stranice pomoću svojstva obitelji fontova CSS

Mistična

Mystic je staklast stil koji daje hladan prijelazni efekt bez upotrebe transformirati imovine. To je super jednostavan, ali estetski ugodan učinak za hrabru web stranicu usmjerenu na rast.

Izlaz

HTML

 Sjena #01 
Mistična

CSS

tijelo {
boja pozadine: #5e5555;
}
.mistic {
font-family: 'Bowlby One', kurziv;
boja: rgba (255, 255, 255, 0,596);
sjena teksta: 20px 0px 10px rgb (0, 0, 0);
}

monoton

Ovo je razigrani tekstualni efekt koji koristi font "Monoton". Možete se poigrati s tekstom i bojom sjene kako biste odgovarali primarnim bojama vaše web stranice.

Izlaz

HTML

 Sjena #02 
monoton

CSS

.monoton {
font-family: 'Monoton', kurziv;
veličina fonta: 15rem;
boja: rgb (255, 0, 0);
neprozirnost: 0,5;
sjena teksta: 0px -78px rgb (255, 196, 0);
}

Bungee

Ovo je cool stil koji koristi font "Bungee Shade". U kombinaciji s tamnom pozadinom, proizvodi sirovi učinak s osjećajem sumnje.

Izlaz

HTML

 sjena #03 
Bungee

CSS

tijelo {
boja pozadine: #222;
}
.bungee {
font-family: 'Bungee Shade', kurziv;
boja: rgb (160, 12, 12);
neprozirnost: 0,9;
sjena teksta: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktivna

Ovaj efekt možete koristiti za znakove upozorenja ili opasnosti. Koristi font "Rampart One".

Izlaz

HTML

 sjena #04 
Radioaktivna

CSS

tijelo {
boja pozadine: #27292d;
}
.radioaktivno {
font-family: 'Rampart One', kurziv;
boja: rgb (97, 214, 43);
neprozirnost: 0,6;
sjena teksta: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Ovaj tekući efekt teksta koristi font 'Faster One', the tekst-sjena imovine, i an ::nakonpseudo-element istog sadržaja kao i tekst. To stvara učinak 'udvostručavanja'.

Izlaz

HTML

 sjena #05 
Sprint

CSS

tijelo {
boja pozadine: #27292d;
}
.sprint {
font-family: 'Faster One', kurziv;
veličina fonta: 10rem;
boja: rgba (255, 0, 242, 0,322);
sjena teksta: -20px -108px 0px rgba (255, 255, 255, 0,445);
razmak između slova: 1rem;
položaj: relativan;
}
.sprint:: nakon {
sadržaj: 'sprint';
pozicija: apsolutna;
vrh: 215px;
desno: 300px;
}

Bodljikav

Ovaj zastrašujući efekt bodljikavog teksta koristi font "Eater". Možete pokušati pomaknuti tekst-sjena umjesto toga prema donjem desnom kutu.

Izlaz

HTML

 sjena #06 
Bodljikav

CSS

.bodljikavo {
font-family: 'Eater', kurziv;
sjena teksta: -18px -18px 2px #777;
}

Codystar

Sjena teksta može djelovati kao zamagljen, ali vidljiv obris teksta. Ovaj svijetli efekt čini čuda s fontom "Codystar".

Izlaz

HTML

 sjena #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', kurziv;
font-weight: bold;
boja: rgb (55, 58, 255);
sjena teksta: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Kraljevstvo

Ovim efektom sjene možete postići autoritativnu tipografiju. Koristi se ::prije pseudo-element i transformirati svojstvo da kosi sjenu.

Izlaz

HTML

 sjena #08 
Kraljevstvo

CSS

tijelo {
boja pozadine: #5e5555;
}
.kraljevstvo {
boja: bijela;
obitelj fontova: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
veličina fonta: 10rem;
visina linije: 1;
poravnavanje teksta: središte;
}
.kingdom--shadow:: prije {
boja: #000;
sadržaj: attr(podaci-tekst);
margin-top: 0,7rem;
pozicija: apsolutna;
transformacija: perspektiva (205px) rotateX(38deg) skala (0,84);
z-indeks: -1;
}

Koder

Ovo svijetlo i pozitivno tekst-sjena učinak prenosi samosvjesnu i motiviranu osobnost web stranice. Možete ga dodati na svoju web stranicu kako biste stvorili jednostavan smokey izgled.

Izlaz

HTML

 sjena #09 


Jesti 

Spavati 

Kodirati 

Ponoviti

CSS

tijelo {
boja pozadine: #5e5555;
}
div {
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 40px;
margina: 0px auto;
font-weight: bold;
visina linije: 5,8rem;
text-align: lijevo;
boja: rgb (94, 94, 94);
} 
.coder-life {
sjena teksta: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Elegantan

Ako volite minimalizam, ovaj efekt sjene teksta savršeno se uklapa. Budući da koristi veliku veličinu fonta, smanjili smo slovni razmak i primijenio tekst-sjena svojstvo za stvaranje ovog efekta.

Izlaz

HTML

 sjena #10 


s
h
r
a
d
d
h
a

CSS

.elegantan {
obitelj fontova: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
veličina fonta: 10rem;
razmak između slova: -1rem;
boja: bijela;
sjena teksta: -18px 8px 18px #b4bbbb;
}

Razigran

Tanak i podebljan obris čini ovaj tekst privlačnim i živahnim. Možete se igrati s tekst-sjena svojstvo bez radijusa zamućenja na različitim pozicijama. Sjene teksta primjenjuju se na sve znakove, uključujući HTML entitete kao što su ♥. Možete koristiti a Referentni grafikon karakternog entiteta istraživati ​​dalje.

Izlaz

HTML

 sjena #11 
Kodiranje je ♥

CSS

.razigran {
obitelj fontova: 'Baloo Tamma', kurziv;
boja: #fff;
razmak između slova: 0,2rem;
sjena teksta: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Nastavite eksperimentirati s naprednim efektima sjene

Sjene teksta su jednostavan i učinkovit način da poboljšate svoj web dizajn i učinite svoju web stranicu vizualno privlačnom. Također možete eksperimentirati s različitim efektima sjena. Možete saznati više o efektima sjene kako biste nastavili svoje CSS putovanje.

Naincy Mourya (Objavljeno 15 članaka)

Naincy je specijalizirana za izgradnju web-mjesta s visokom brzinom i učinkovitom strategijom sadržaja zajedno s web-kopijama. Ona je slobodna tehnička spisateljica koja budno prati trendovske tehnologije.

Više od Naincy Mourya