A CSS tele van lehetőségekkel a webhelyek megjelenésének javítására; a szöveg és a keretes árnyékok kiváló példák. Hasonló eredményeket kínálnak a képszerkesztő szoftverekben, például a Photoshopban található árnyékokhoz.

De hogyan működnek a CSS árnyékok? Ugorjunk bele.

A CSS Box Shadow használata

Alkalmazhat CSS-doboz-árnyékot egyetlen CSS-sorral, amely legfeljebb hat értéktartományt tartalmaz. Az értékek sorrendje kulcsfontosságú a CSS-doboz árnyékának működéséhez, és így néz ki:

box-shadow: offset-x offset-y blur spread color inset;

Nézzük meg sorrendben az egyes értékeket.

CSS-doboz árnyékpozíciója

Az offset-x és offset-y értékek szabályozzák a doboz árnyékának helyzetét. Az offset-x érték az árnyék vízszintes helyzetét, míg az offset-y a függőleges eltolást jelenti.

 box-shadow: 10px 10px;

A pozitív értékek árnyékot eredményeznek az elem alatt és jobbra.

Negatív értékeket is használhat a h-eltoláshoz és a v-eltoláshoz:

 box-shadow: -10px -10px;

A negatív h-eltolás balra, míg a negatív v-eltolás felfelé mozgatja az árnyékot:

instagram viewer

CSS Box Shadow Blur

Amint láthatja, a h-eltolás és a v-eltolás hozzáadásával az árnyékhoz szilárd árnyék jön létre tollazat nélkül. Az elmosódás érték elhomályosítja a CSS-doboz árnyékát, és akkor lép életbe, ha megad egy harmadik értéket:

box-shadow: 10px 10px 20px;

Minél nagyobb számot ad hozzá az elmosódás értékéhez, annál elmosódottabb lesz a CSS-doboz árnyéka. Ez az érték nem lehet negatív.

CSS Box Shadow Spread

A terjedési érték lehetővé teszi az árnyék méretének megváltoztatását anélkül, hogy megváltoztatná a pozícióját.

 box-shadow: 10px 10px 20px 30px;

A pozitív szórási érték növeli a CSS-doboz árnyékát, míg a negatív érték kisebbíti azt.

CSS Box Shadow Color

A CSS-doboz árnyéka alapértelmezés szerint az elem szövegszíne, de ezt felülírhatja egy szín hozzáadásával:

box-shadow: 10px 10px 20px 10px #0000ff;

A használt színnek legális CSS színformátumban kell lennie, például hexadecimális kódnak, RGB-kódnak vagy előre meghatározott színnek. tudsz tanulni a hexadecimális kódokról és más legális CSS-színbeállításokat, mielőtt elkezdené az árnyékokat.

CSS Box Shadow Inset

A CSS-doboz árnyékai alapértelmezés szerint kívül esnek a hozzájuk rendelt elemen. Ha a box-shadow tulajdonsághoz beszúrást ad, az árnyékot megjelenítheti az elem belsejében.

box-shadow: 10px 10px 20px 10px #0000ff betét;

Ez egy előre meghatározott szöveges érték; egyszerűen adja hozzá vagy távolítsa el az érték beállításához.

A CSS Text Shadow használata

A CSS szövegárnyékok olyanok, mint a doboz árnyékok, bár kevesebb módosítható értékük van. A CSS szövegárnyék szintaxisa így néz ki:

text-shadow: offset-x offset-y blur-radius color;

De hogyan működnek ezek az értékek?

CSS szöveg árnyék pozíciója

A CSS-szöveg árnyékeltolásai nagyon hasonlóan működnek, mint ugyanazon doboz árnyékértékei:

text-shadow: 10px 10px;

A pozitív értékek az árnyékot a szöveg alatt és jobbra helyezik.

A negatív értékek az ellenkezőjét teszik, az árnyékot a szöveg fölé és balra helyezik.

 text-shadow: -10px -10px;

Keverheti a negatív és a pozitív értékeket a CSS-szöveg árnyékának tökéletes elhelyezéséhez.

CSS-szöveg árnyék-elmosódási sugara

A CSS-szöveg árnyék-elmosódási sugara lehetővé teszi a szöveg mögötti árnyék elmosását.

text-shadow: 10px 10px 10px;

Ennek az értéknek az alapértelmezett értéke 0 (nincs elmosódás).

CSS szöveg árnyék színe

Alapértelmezés szerint a CSS-szövegárnyékok megegyeznek a szöveg színével. Módosíthatja a szöveg színét, ha hozzáadja azt a CSS text shadow tulajdonság végéhez.

szöveg-árnyék: 10px 10px 10px #0000ff;

A CSS doboz árnyékszíneihez hasonlóan ehhez a CSS legális színét kell használnia.

Példák a CSS-dobozra és a szöveges árnyékolásra

Ha megértette az alapokat, elkezdheti a kísérletezést a CSS mező és a szöveges árnyékok használatával. Az alábbi ötletek ösztönzik Önt arra, hogy saját kreatív módokat találjon ki e CSS-tulajdonságok használatára.

Kétszínű szegélyek két CSS doboz árnyékkal

Egy HTML-elemhez egynél több mező- vagy szövegárnyékot is hozzáadhat. Mindaddig, amíg vessző van köztük, új árnyékokat adhat egyetlen tulajdonsághoz.

doboz-árnyék: 30px 30px#0000ff, -30 képpont-30 képpont 0px#00ff00;

Ez a kétszínű keret jó példa erre. Két, egymással ellentétes helyzetű, elmosódás/terjedés nélküli CSS-doboz-árnyék kiváló kreatív szegélyt biztosít.

Kettős CSS-szövegárnyék a drámai hatás érdekében

A fenti ötlethez hasonlóan érdekes eredmények érdekében több szöveges árnyékot is hozzáadhat és elhelyezhet.

text-shadow: 35px 20px 4px sötétszürke, -35px -20px 4px sötétszürke;

Ez a példa egy szövegsort mutat be egy árnyékkal felette és egy árnyékkal alatta, mindkettő szövegalapú színértékekkel rendelkezik.

Többszínű hátterek beszúrt CSS doboz árnyékokkal

A CSS elég erős ahhoz, hogy egyedi és érdekes eszközöket hozzon létre külső fájlok nélkül. Erre remek példa a beágyazott CSS-doboz árnyékának használata háttérként.

box-shadow: 20px 10px 10px 40px #000000 beillesztés, -50px -30px 8px 60px szürke betét, 30px 20px 6px 90px világosszürke betét;

Ennek a doboznak fehér a háttere, valamint három különböző színű beillesztett árnyék. Az árnyékok átfedik egymást, így egyedi hátteret hoznak létre.

Ennek a hatásnak a további fokozása egyszerű dolog stílusos CSS-háttér gradiens hozzáadása elemedhez.

CSS Box Shadows és Szövegárnyékok a kreatív webdesignhoz

A CSS-dobozok és a szöveges árnyékok könnyen használhatók, ha már tudja, hogyan kell velük dolgozni. Mostantól megvannak azok az eszközök, amelyekre szüksége van ahhoz, hogy elkezdjen dolgozni saját tervein, de tovább kell kutatnia a CSS-t, hogy javítsa képességeit.