CSS3 vám umožňuje byť kreatívny a experimentovať so svojím dizajnom, aby ste vytvorili krásne a jedinečné webové stránky. Jednou z oblastí dizajnu, s ktorou vám CSS umožňuje pracovať, je typografia.

Môžete použiť font-family a textový tieň vlastnosti na vytváranie jednoduchých, no pozoruhodných efektov. Možno už viete o základných aplikáciách tieňa textu v CSS. S týmito vlastnosťami však môžete vytvoriť širokú škálu štýlov.

V tomto článku sa naučíte efektívny spôsob vytvárania rôznych efektov tieňa textu pomocou HTML a CSS.

Začíname s HTML a CSS

Tieto príklady kódu môžete skopírovať a prilepiť, aby ste získali ľubovoľný efekt tieňa textu, ktorý uprednostňujete. Začnite vytvorením index.html súbor a a style.css súbor. Toto sú jediné súbory, ktoré budete potrebovať na vyskúšanie príkladov, ale pre každý príklad budete musieť zmeniť oba súbory.

index.html

 tieň #01 


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


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


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


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


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


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


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

style.css

telo {
text-transform: veľké písmená;
výška riadku: 1;
text-align: center;
veľkosť písma: 5rem;
displej: mriežka;
medzera: 4rem;
}

Teraz si prejdeme 11 príkladov tieňov textu, ktoré si môžete vyskúšať.

Súvisiace: Ako zmeniť text svojej webovej stránky pomocou vlastnosti rodiny písiem CSS

Mystik

Mystic je sklenený štýl, ktorý poskytuje chladný prechodový efekt bez použitia transformovať nehnuteľnosť. Je to super jednoduchý, no zároveň esteticky príjemný efekt pre odvážnu webovú stránku zameranú na rast.

Výkon

HTML

 Tieň #01 
Mystik

CSS

telo {
farba pozadia: #5e5555;
}
.mystic {
font-family: 'Bowlby One', kurzíva;
farba: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

Monotónna

Ide o hravý textový efekt s použitím písma „Monoton“. Môžete si pohrať s farbou textu a tieňa tak, aby zodpovedala primárnym farbám vášho webu.

Výkon

HTML

 Tieň #02 
Monotónna

CSS

.monotón {
font-family: 'Monotónny', kurzíva;
veľkosť písma: 15rem;
farba: rgb (255, 0, 0);
nepriehľadnosť: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Bungee

Toto je skvelý štýl s použitím písma „Bungee Shade“. V kombinácii s tmavým pozadím vytvára surový efekt so zmyslom pre podozrenie.

Výkon

HTML

 tieň #03 
Bungee

CSS

telo {
farba pozadia: #222;
}
.bungee {
font-family: 'Bungee Shade', kurzíva;
farba: rgb (160, 12, 12);
nepriehľadnosť: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Rádioaktívne

Tento efekt môžete použiť pre výstražné alebo nebezpečné značky. Používa písmo „Rampart One“.

Výkon

HTML

 tieň #04 
Rádioaktívne

CSS

telo {
farba pozadia: #27292d;
}
.radioactive {
font-family: 'Rampart One', kurzíva;
farba: rgb (97, 214, 43);
nepriehľadnosť: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

šprint

Tento bežiaci textový efekt používa písmo „Faster One“, the textový tieň majetok, a ::popseudoprvok s rovnakým obsahom ako text. To vytvára „zdvojujúci“ efekt.

Výkon

HTML

 tieň #05 
šprint

CSS

telo {
farba pozadia: #27292d;
}
.sprint {
font-family: 'Faster One', kurzíva;
veľkosť písma: 10rem;
farba: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
medzera medzi písmenami: 1rem;
poloha: relatívna;
}
.sprint:: po {
obsah: 'sprint';
pozícia: absolútna;
hore: 215px;
vpravo: 300px;
}

Pichľavý

Tento strašný pichľavý textový efekt používa písmo „Eater“. Môžete skúsiť posunúť textový tieň smerom vpravo dole.

Výkon

HTML

 tieň #06 
Pichľavý

CSS

.pichľavý {
font-family: 'Eater', kurzíva;
text-shadow: -18px -18px 2px #777;
}

Codystar

Tieň textu môže pôsobiť ako rozmazaný, ale viditeľný obrys textu. Tento jasný efekt robí zázraky s písmom „Codystar“.

Výkon

HTML

 tieň #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', kurzíva;
váha písma: tučné;
farba: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Kráľovstvo

Pomocou tohto tieňového efektu môžete dosiahnuť autoritatívnu typografiu. Používa sa ::predtým pseudoprvok a transformovať vlastnosť nakloniť tieň.

Výkon

HTML

 tieň #08 
Kráľovstvo

CSS

telo {
farba pozadia: #5e5555;
}
.kráľovstvo {
farba: biela;
rodina písiem: Impact, Haettenschweiler, 'Arial Narrow Bold', bezpätkové;
veľkosť písma: 10rem;
výška riadku: 1;
text-align: center;
}
.kingdom--shadow:: before {
farba: #000;
obsah: attr(data-text);
margin-top: 0,7rem;
pozícia: absolútna;
transformácia: perspektíva (205px) rotáciaX(38deg) mierka (0,84);
z-index: -1;
}

kódovač

Tento jasný a pozitívny textový tieň efekt sprostredkúva sebauvedomenú a motivovanú osobnosť webovej stránky. Môžete ho pridať na svoj web a vytvoriť jednoduchý dymový vzhľad.

Výkon

HTML

 tieň #09 


Jedzte 

Spánok 

kód 

Opakujte

CSS

telo {
farba pozadia: #5e5555;
}
div {
rodina písiem: Verdana, Ženeva, Tahoma, sans-serif;
výplň: 40px;
okraj: 0px auto;
váha písma: tučné;
výška čiary: 5,8rem;
zarovnanie textu: doľava;
farba: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Elegantný

Ak máte radi minimalizmus, tento efekt tieňa textu sa perfektne hodí. Keďže používa veľkú veľkosť písma, zmenšili sme medzi písmenami a aplikoval textový tieň vlastnosť na vytvorenie tohto efektu.

Výkon

HTML

 tieň #10 


s
h
r
a
d
d
h
a

CSS

.elegant {
rodina písiem: Impact, Haettenschweiler, 'Arial Narrow Bold', bezpätkové;
veľkosť písma: 10rem;
medzera medzi písmenami: -1rem;
farba: biela;
text-shadow: -18px 8px 18px #b4bbbb;
}

Hravé

Tenký a tučný obrys robí tento text atraktívnym a živým. Môžete sa hrať s textový tieň vlastnosť bez polomeru rozmazania v rôznych polohách. Tiene textu sa vzťahujú na všetky znaky vrátane HTML entít ako napr ♥. Môžete použiť a Referenčná tabuľka znakovej entity skúmať ďalej.

Výkon

HTML

 tieň #11 
Kódovanie je ♥

CSS

.hravý {
font-family: 'Baloo Tamma', kurzíva;
farba: #fff;
medzera medzi písmenami: 0,2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Pokračujte v experimentovaní s pokročilými tieňovými efektmi

Tiene textu predstavujú jednoduchý a efektívny spôsob, ako vylepšiť svoj webový dizajn a urobiť webovú stránku vizuálne príťažlivou. Môžete tiež experimentovať s rôznymi efektmi tieňov. Môžete sa dozvedieť viac o efektoch vrhnutých tieňov, aby ste mohli pokračovať vo svojej ceste CSS.

Naincy Mouryaová (15 publikovaných článkov)

Naincy sa špecializuje na vytváranie vysoko responzívnych webových stránok a efektívnu obsahovú stratégiu spolu s webovými kópiami. Je technologickou spisovateľkou na voľnej nohe, ktorá pozorne sleduje trendy technológií.

Viac od Naincy Mouryaovej