CSS3 vám umožňuje být kreativní a experimentovat se svým designem, abyste vytvořili krásné a jedinečné webové stránky. Jednou oblastí designu, se kterou vám CSS umožňuje pracovat, je typografie.

Můžete použít rodina písem a textový stín vlastnosti k vytvoření jednoduchých, ale pozoruhodných efektů. Možná již víte o základních aplikacích stínování textu v CSS. S těmito vlastnostmi však můžete vytvořit širokou škálu stylů.

V tomto článku se naučíte efektivní způsob, jak vytvořit různé efekty stínu textu pomocí HTML a CSS.

Začínáme s HTML a CSS

Tyto příklady kódu můžete zkopírovat a vložit, abyste získali libovolný efekt stínu textu, který preferujete. Začněte vytvořením index.html soubor a a styl.css soubor. Toto jsou jediné soubory, které budete potřebovat k vyzkoušení příkladů, ale pro každý příklad budete muset změnit oba soubory.

index.html

 stín #01 


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


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


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


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


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


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


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

styl.css

tělo {
text-transform: velká písmena;
výška řádku: 1;
text-align: center;
velikost písma: 5rem;
displej: mřížka;
mezera: 4rem;
}

Nyní si projdeme 11 příkladů stínů textu, které si můžete vyzkoušet.

Příbuzný: Jak změnit text vašeho webu pomocí vlastnosti rodiny písem CSS

Mystik

Mystic je skelný styl poskytující chladný přechodový efekt bez použití přeměnit vlastnictví. Je to super jednoduchý, ale esteticky příjemný efekt pro odvážné a růstově orientované webové stránky.

Výstup

HTML

 Stín #01 
Mystik

CSS

tělo {
barva pozadí: #5e5555;
}
.mystic {
font-family: 'Bowlby One', kurzíva;
barva: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

Monotónní

Jedná se o hravý textový efekt využívající písmo „Monoton“. Můžete si pohrát s barvou textu a stínu, aby odpovídaly primárním barvám vašeho webu.

Výstup

HTML

 Stín #02 
Monotónní

CSS

.monoton {
rodina písem: 'Monotónní', kurzíva;
velikost písma: 15rem;
barva: rgb (255, 0, 0);
krytí: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Bungee

Toto je skvělý styl s použitím písma „Bungee Shade“. V kombinaci s tmavým pozadím vytváří syrový efekt s pocitem podezření.

Výstup

HTML

 stín #03 
Bungee

CSS

tělo {
barva pozadí: #222;
}
.bungee {
font-family: 'Bungee Shade', kurzíva;
barva: rgb (160, 12, 12);
krytí: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktivní

Tento efekt můžete použít pro výstražné nebo nebezpečné značky. Používá font ‚Rampart One‘.

Výstup

HTML

 stín #04 
Radioaktivní

CSS

tělo {
barva pozadí: #27292d;
}
.radioactive {
font-family: 'Rampart One', kurzíva;
barva: rgb (97, 214, 43);
krytí: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Tento efekt běžícího textu používá písmo ‚Faster One‘, the textový stín majetek, a ::popseudoprvek se stejným obsahem jako text. To vytváří „dvojitý“ efekt.

Výstup

HTML

 stín #05 
Sprint

CSS

tělo {
barva pozadí: #27292d;
}
.sprint {
font-family: 'Faster One', kurzíva;
velikost písma: 10rem;
barva: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
mezera mezi písmeny: 1rem;
poloha: relativní;
}
.sprint:: po {
obsah: 'sprint';
pozice: absolutní;
nahoře: 215px;
vpravo: 300px;
}

Pichlavý

Tento děsivý pichlavý textový efekt používá písmo „Eater“. Můžete zkusit posunout textový stín místo toho směrem vpravo dole.

Výstup

HTML

 stín #06 
Pichlavý

CSS

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

Codystar

Stín textu může fungovat jako rozmazaný, ale viditelný obrys textu. Tento jasný efekt dělá s fontem „Codystar“ zázraky.

Výstup

HTML

 stín #06 
Codystar

CSS

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

Království

Pomocí tohoto stínového efektu můžete dosáhnout autoritativní typografie. Používá se ::před pseudoprvek a přeměnit vlastnost naklonit stín.

Výstup

HTML

 stín #08 
Království

CSS

tělo {
barva pozadí: #5e5555;
}
.království {
barva bílá;
rodina písem: Impact, Haettenschweiler, 'Arial Narrow Bold', bezpatkové;
velikost písma: 10rem;
výška řádku: 1;
text-align: center;
}
.kingdom--shadow:: before {
barva: #000;
obsah: attr(data-text);
margin-top: 0,7rem;
pozice: absolutní;
transformace: perspektiva (205px) otočeníX(38deg) měřítko (0,84);
z-index: -1;
}

Kodér

Tento jasný a pozitivní textový stín efekt vyjadřuje sebevědomou a motivovanou osobnost webu. Můžete jej přidat na svůj web a vytvořit jednoduchý kouřový vzhled.

Výstup

HTML

 stín #09 


Jíst 

Spát 

Kód 

Opakovat

CSS

tělo {
barva pozadí: #5e5555;
}
div {
rodina písem: Verdana, Geneva, Tahoma, sans-serif;
výplň: 40px;
okraj: 0px auto;
váha písma: tučné;
výška čáry: 5,8rem;
text-align: left;
barva: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
filtr: drop-shadow(-10px 10px 20px #fff000);
}

Elegantní

Pokud máte rádi minimalismus, pak se tento stínový efekt textu perfektně hodí. Protože používá velkou velikost písma, zmenšili jsme mezery mezi písmeny a aplikoval textový stín vlastnost k vytvoření tohoto efektu.

Výstup

HTML

 stín #10 


s
h
r
A
d
d
h
A

CSS

.elegantní {
rodina písem: Impact, Haettenschweiler, 'Arial Narrow Bold', bezpatkové;
velikost písma: 10rem;
mezera mezi písmeny: -1rem;
barva bílá;
text-shadow: -18px 8px 18px #b4bbbb;
}

Hravý

Tenký a tučný obrys činí tento text atraktivním a živým. Můžete si pohrát s textový stín vlastnost bez poloměru rozostření na různých pozicích. Stíny textu se vztahují na všechny znaky, včetně entit HTML, jako je např ♥. Můžete použít a Referenční tabulka znakových entit prozkoumat dále.

Výstup

HTML

 stín #11 
Kódování je ♥

CSS

.hravý {
font-family: 'Baloo Tamma', kurzíva;
barva: #fff;
mezera mezi písmeny: 0,2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Pokračujte v experimentování s pokročilými stínovými efekty

Textové stíny jsou snadným a efektivním způsobem, jak vylepšit svůj webový design a učinit váš web vizuálně přitažlivým. Můžete také experimentovat s různými efekty stínů. Můžete se dozvědět více o efektech vrženého stínu, abyste mohli pokračovat ve své cestě CSS.

Naincy Mouryaová (15 zveřejněných článků)

Naincy se specializuje na vytváření vysoce responzivních webových stránek a efektivní obsahové strategie spolu s webovými kopiemi. Je to nezávislá tech spisovatelka, která ostře sleduje trendy technologií.

Více od Naincy Mouryaové