CSS3 vam omogoča, da ste ustvarjalni in eksperimentirate s svojim dizajnom, da ustvarite čudovite in edinstvene spletne strani. Eno področje oblikovanja, s katerim vam CSS omogoča delo, je tipografija.

Lahko uporabite družina pisav in senca besedila lastnosti za ustvarjanje preprostih, a izjemnih učinkov. Morda že poznate osnovne aplikacije sence besedila v CSS. Vendar pa lahko s temi lastnostmi ustvarite široko paleto slogov.

V tem članku se boste naučili učinkovitega načina ustvarjanja različnih učinkov senc besedila z uporabo HTML in CSS.

Začetek uporabe HTML in CSS

Te primere kode lahko kopirate in prilepite, da dobite želeni učinek sence besedila. Začnite z ustvarjanjem index.html datoteko in a style.css mapa. To so edine datoteke, ki jih boste morali preizkusiti v primerih, vendar boste morali spremeniti obe datoteki za vsak primer.

index.html

 senca #01 


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


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


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


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


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


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


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

style.css

telo {
preoblikovanje besedila: velike črke;
višina vrstice: 1;
poravnava besedila: središče;
velikost pisave: 5rem;
zaslon: mreža;
reža: 4 rem;
}

Zdaj pa pojdimo skozi 11 primerov senc besedila, ki jih lahko preizkusite.

Povezano: Kako spremeniti besedilo vašega spletnega mesta z lastnostjo družine pisav CSS

Mistična

Mystic je stekleni slog, ki daje hladen prehodni učinek brez uporabe preoblikovati lastnine. To je zelo preprost, a estetsko prijeten učinek za drzno in rast usmerjeno spletno mesto.

Izhod

HTML

 Senca #01 
Mistična

CSS

telo {
barva ozadja: #5e5555;
}
.mistični {
družina pisav: 'Bowlby One', kurziv;
barva: rgba (255, 255, 255, 0,596);
senca besedila: 20px 0px 10px rgb (0, 0, 0);
}

Monotona

To je igriv besedilni učinek z uporabo pisave »Monoton«. Lahko se igrate z besedilom in barvo sence, da se ujema s primarnimi barvami vašega spletnega mesta.

Izhod

HTML

 Senca #02 
Monotona

CSS

.monoton {
družina pisav: 'Monoton', kurziv;
velikost pisave: 15 rem;
barva: rgb (255, 0, 0);
motnost: 0,5;
senca besedila: 0px -78px rgb (255, 196, 0);
}

Bungee

To je kul slog z uporabo pisave "Bungee Shade". V kombinaciji s temnim ozadjem ustvari surov učinek z občutkom suma.

Izhod

HTML

 senca #03 
Bungee

CSS

telo {
barva ozadja: #222;
}
.bungee {
družina pisave: 'Bungee Shade', kurziv;
barva: rgb (160, 12, 12);
motnost: 0,9;
senca besedila: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktivna

Ta učinek lahko uporabite za opozorilne znake ali znake nevarnosti. Uporablja pisavo "Rampart One".

Izhod

HTML

 senca #04 
Radioaktivna

CSS

telo {
barva ozadja: #27292d;
}
.radioaktivno {
družina pisav: 'Rampart One', kurziv;
barva: rgb (97, 214, 43);
motnost: 0,6;
senca besedila: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Ta tekoči učinek besedila uporablja pisavo »Faster One«, senca besedila lastnine in an :: potempsevdoelement z enako vsebino kot besedilo. To ustvarja učinek "podvojitve".

Izhod

HTML

 senca #05 
Sprint

CSS

telo {
barva ozadja: #27292d;
}
.sprint {
font-family: 'Faster One', kurziv;
velikost pisave: 10rem;
barva: rgba (255, 0, 242, 0,322);
senca besedila: -20px -108px 0px rgba (255, 255, 255, 0,445);
razmik med črkami: 1rem;
položaj: relativni;
}
.sprint:: po {
vsebina: 'šprint';
položaj: absolutni;
zgoraj: 215 slikovnih pik;
desno: 300 slikovnih pik;
}

Bodeča

Ta grozljiv učinek bodičastega besedila uporablja pisavo »Eater«. Lahko poskusite prestaviti senca besedila namesto tega spodaj desno.

Izhod

HTML

 senca #06 
Bodeča

CSS

.bodeča {
družina pisav: 'Eater', kurziv;
senca besedila: -18px -18px 2px #777;
}

Codystar

Senca besedila lahko deluje kot zamegljen, a viden obris besedila. Ta svetel učinek dela čudeže s pisavo "Codystar".

Izhod

HTML

 senca #06 
Codystar

CSS

.codystar {
družina pisav: 'Codystar', kurziv;
teža pisave: krepko;
barva: rgb (55, 58, 255);
senca besedila: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

kraljestvo

S tem učinkom sence lahko dosežete avtoritativno tipografijo. Uporablja :: prej psevdoelement in preoblikovati lastnost nagnjenja sence.

Izhod

HTML

 senca #08 
kraljestvo

CSS

telo {
barva ozadja: #5e5555;
}
.kingdom {
barva: bela;
družina pisav: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
velikost pisave: 10rem;
višina vrstice: 1;
poravnava besedila: središče;
}
.kingdom--shadow:: pred {
barva: #000;
vsebina: attr(podatkovno besedilo);
margin-top: 0,7rem;
položaj: absolutni;
transform: perspektiva (205 slikovnih pik) rotateX (38 stopinj) lestvica (0,84);
z-indeks: -1;
}

Koder

To svetlo in pozitivno senca besedila učinek izraža samozavestno in motivirano osebnost spletne strani. Dodate ga lahko na svoje spletno mesto, da ustvarite preprost dimljen videz.

Izhod

HTML

 senca #09 


Jejte 

spi 

Koda 

Ponovi

CSS

telo {
barva ozadja: #5e5555;
}
div {
družina pisav: Verdana, Geneva, Tahoma, sans-serif;
oblazinjenje: 40px;
rob: 0px samodejno;
teža pisave: krepko;
višina vrstice: 5,8rem;
poravnava besedila: levo;
barva: rgb (94, 94, 94);
} 
.coder-life {
senca besedila: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Eleganten

Če imate radi minimalizem, potem je ta učinek sence besedila popoln. Ker uporablja veliko velikost pisave, smo zmanjšali razmik med črkami in uporabil senca besedila lastnost za ustvarjanje tega učinka.

Izhod

HTML

 senca #10 


s
h
r
a
d
d
h
a

CSS

.elegantno {
družina pisav: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
velikost pisave: 10rem;
razmik med črkami: -1rem;
barva: bela;
senca besedila: -18px 8px 18px #b4bbbb;
}

Igrivo

Tanek in drzen obris naredi to besedilo privlačno in živahno. Lahko se igrate z senca besedila lastnost brez polmera zamegljenosti na različnih položajih. Sence besedila veljajo za vse znake, vključno z entitetami HTML, kot je npr ♥. Lahko uporabite a Referenčni diagram entitete znakov raziskati naprej.

Izhod

HTML

 senca #11 
Kodiranje je ♥

CSS

.igrivo {
družina pisav: 'Baloo Tamma', kurziv;
barva: #fff;
razmik med črkami: 0,2rem;
senca besedila: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Nadaljujte z eksperimentiranjem z naprednimi učinki senc

Senčila za besedilo so preprost in učinkovit način za izboljšanje spletnega oblikovanja in vizualno privlačnost spletne strani. Eksperimentirate lahko tudi z različnimi učinki senc. Izveste lahko več o učinkih padajoče sence, da nadaljujete svojo pot CSS.

Naincy Mourya (Objavljenih 15 člankov)

Naincy je specializirana za gradnjo zelo odzivnih spletnih mest in učinkovite vsebinske strategije skupaj s spletnimi kopijami. Je svobodna pisateljica o tehnologiji, ki budno spremlja trendne tehnologije.

Več od Naincy Mourya