A CSS3 lehetővé teszi, hogy kreatív legyen, és kísérletezzen a tervezéssel, hogy gyönyörű és egyedi weboldalakat készítsen. A tervezés egyik területe, amellyel a CSS lehetővé teszi a munkát, a tipográfia.

Használhatja a betűtípus család és szöveg-árnyék tulajdonságok egyszerű, de figyelemre méltó hatások létrehozásához. Lehet, hogy már ismeri a szöveges árnyék alapvető alkalmazásait a CSS-ben. Ezekkel a tulajdonságokkal azonban stílusok széles skáláját hozhatja létre.

Ebből a cikkből megtudhat egy hatékony módszert a különböző szövegárnyék-effektusok létrehozására HTML és CSS használatával.

A HTML és a CSS használatának első lépései

Kimásolhatja és beillesztheti ezeket a kódpéldákat, hogy elérje a kívánt szöveges árnyékhatást. Kezdje azzal, hogy hozzon létre egy

index.html

 árnyék #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stíluslap"
/>
 árnyék #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stíluslap"
/>
 árnyék #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stíluslap"
/>
 árnyék #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stíluslap"
/>
 árnyék #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stíluslap"
/>
 árnyék #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stíluslap"
/>
 árnyék #07 


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

stílus.css

body {
szöveg-átalakítás: nagybetűk;
vonalmagasság: 1;
szöveg igazítása: középre;
betűméret: 5rem;
kijelző: rács;
rés: 4 rem;
}

Most nézzünk meg 11 szöveges árnyékpéldát, amelyeket kipróbálhat.

Összefüggő: Webhelye szövegének módosítása a CSS-betűcsalád-tulajdonsággal

Misztikus

A Mystic egy üveges stílus, amely hűvös átmenet-szerű hatást ad a használat nélkül átalakítani ingatlan. Ez egy szuper egyszerű, mégis esztétikus hatás egy merész és növekedésorientált weboldalhoz.

Kimenet

HTML

 Árnyék #01 
Misztikus

CSS

body {
háttérszín: #5e5555;
}
.mystic {
font-family: 'Bowlby One', kurzív;
szín: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Ez egy játékos szövegeffektus a „Monoton” betűtípus használatával. Játszhat a szöveg és az árnyék színével, hogy megfeleljen webhelye elsődleges színeinek.

Kimenet

HTML

 Árnyék #02 
Monoton

CSS

.monoton {
font-family: 'Monoton', kurzív;
betűméret: 15 rem;
szín: rgb (255, 0, 0);
átlátszatlanság: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Bungee

Ez egy klassz stílus a „Bungee Shade” betűtípus használatával. Sötét háttérrel kombinálva nyers hatást kelt, gyanakvó érzéssel.

Kimenet

HTML

 árnyék #03 
Bungee

CSS

body {
háttérszín: #222;
}
.bungee {
font-family: 'Bungee Shade', kurzív;
szín: rgb (160, 12, 12);
átlátszatlanság: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktív

Ezt az effektust figyelmeztető vagy veszélyjelzésekre használhatja. A „Rampart One” betűtípust használja.

Kimenet

HTML

 árnyék #04 
Radioaktív

CSS

body {
háttérszín: #27292d;
}
.radioactive {
font-family: 'Rampart One', kurzív;
szín: rgb (97, 214, 43);
átlátszatlanság: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprintel

Ez a futó szövegeffektus a „Faster One” betűtípust használja, a szöveg-árnyék ingatlan, és egy ::utánpszeudo-elem a szöveggel azonos tartalommal. Ez „duplázó” hatást hoz létre.

Kimenet

HTML

 árnyék #05 
Sprintel

CSS

body {
háttérszín: #27292d;
}
.sprint {
font-family: 'Faster One', kurzív;
betűméret: 10 rem;
szín: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
betűköz: 1 rem;
pozíció: relatív;
}
.sprint:: after {
tartalom: 'sprint';
pozíció: abszolút;
felső: 215 képpont;
jobbra: 300 képpont;
}

Tüskés

Ez a borzasztó szúrós szöveghatás az „Eater” betűtípust használja. Megpróbálhatod váltani a szöveg-árnyék inkább a jobb alsó felé.

Kimenet

HTML

 árnyék #06 
Tüskés

CSS

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

Codystar

A szöveg-árnyék a szöveg elmosódott, mégis látható körvonalaként működhet. Ez a fényes hatás csodákra képes a „Codystar” betűtípussal.

Kimenet

HTML

 árnyék #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', kurzív;
betűsúly: félkövér;
szín: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Királyság

Ezzel az árnyékhatással hiteles tipográfiát érhet el. Használja a ::előtt álelem és az átalakítani tulajdonsága, hogy ferdítse az árnyékot.

Kimenet

HTML

 árnyék #08 
Királyság

CSS

body {
háttérszín: #5e5555;
}
.kingdom {
fehér szín;
font-család: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
betűméret: 10 rem;
vonalmagasság: 1;
szöveg igazítása: középre;
}
.kingdom--shadow:: before {
szín: # 000;
tartalom: attr(adat-szöveg);
margó felső: 0,7 rem;
pozíció: abszolút;
transzformáció: perspektíva (205px) forgatásX(38deg) skála (0,84);
z-index: -1;
}

Kódoló

Ez fényes és pozitív szöveg-árnyék hatás öntudatos és motivált weboldal személyiséget közvetít. Hozzáadhatja webhelyéhez, hogy egyszerű füstös megjelenést kapjon.

Kimenet

HTML

 árnyék #09 


Eszik 

Alvás 

Kód 

Ismétlés

CSS

body {
háttérszín: #5e5555;
}
div {
font-család: Verdana, Genf, Tahoma, sans-serif;
padding: 40px;
margó: 0px auto;
betűsúly: félkövér;
vonalmagasság: 5,8 rem;
szöveg igazítása: balra;
szín: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
szűrő: drop-shadow(-10px 10px 20px #fff000);
}

Elegáns

Ha szereted a minimalizmust, akkor ez a szöveges árnyékhatás tökéletesen illeszkedik. Mivel nagy betűméretet használ, csökkentettük a betűtávolságok és alkalmazta a szöveg-árnyék tulajdonság létrehozásához ezt a hatást.

Kimenet

HTML

 árnyék #10 


s
h
r
a
d
d
h
a

CSS

.elegant {
font-család: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
betűméret: 10 rem;
betűköz: -1rem;
fehér szín;
text-shadow: -18px 8px 18px #b4bbbb;
}

Játékos

A vékony és merész körvonal vonzóvá és élettel telivé teszi ezt a szöveget. Játszhatsz a szöveg-árnyék elmosódási sugár nélkül különböző pozíciókban. A szövegárnyékok minden karakterre vonatkoznak, beleértve a HTML-entitásokat is, mint pl ♥. Használhatja a Karakter entitás referenciadiagram tovább kutatni.

Kimenet

HTML

 árnyék #11 
A kódolás ♥

CSS

.playful {
font-család: 'Baloo Tamma', kurzív;
szín: #fff;
betűköz: 0,2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Kísérletezzen tovább a fejlett árnyékeffektusokkal

A szöveges árnyékok egyszerű és hatékony módja annak, hogy javítsa webdizájnját, és vonzóvá tegye webhelyét. Különféle árnyékeffektusokkal is kísérletezhet. A CSS-útjának folytatásához többet megtudhat a vetett árnyékhatásokról.

Naincy Mourya (15 cikk megjelent)

A Naincy rendkívül reszponzív webhelyek és hatékony tartalomstratégia, valamint webes másolatok készítésére specializálódott. Ő egy szabadúszó technológiai író, aki élesen figyeli a felkapott technológiákat.

Továbbiak Naincy Mouryától