Hogyan készítsünk árnyékot CSS-sel

Bár a tervezési trendek évről évre változnak, számíthat az olyan alapvető árnyékhatások használatára, mint pl doboz-árnyék és árnyék pozitívan hozzájárul a webhely esztétikájához. Te tudod használni vetett árnyékok kellemes, gyönyörűen renderelt hatások létrehozásához anélkül, hogy sajtosak lennének.

Nézzük meg közelebbről a CSS-t árnyék ingatlan.

Mi az a CSS árnyékoló?

árnyék( ) egy CSS-effektus, amely árnyékot jelenít meg egy adott objektum alakja körül. Íme a CSS alkalmazásának szintaxisa árnyék.

Szintaxis:
szűrő: drop-shadow (offset-x offset-y blur-radius color);

Sokféle van szűrőfunkciók beleértve elmosódás ( ), Fényerősség( ), és árnyék( ).

offset-x meghatározza a vízszintes távolságot és offset-y meghatározza a függőleges távolságot. Vegye figyelembe, hogy a negatív értékek az árnyékot balra helyezik (offset-x) és fölötte (offset-y) a tárgy.

Az utolsó két paraméter nem kötelező. Hosszúságként megadhatja az árnyék elmosódási sugarát. Alapértelmezés szerint 0-ra van állítva. Nem lehet negatív elmosódási sugár.

Az árnyék színe a következőképpen van megadva. Ha nem adott meg színt, akkor az a értékét követi szín ingatlan.

Mikor hasznos a CSS drop-shadow?

Lehet, hogy ezt már tudod doboz-árnyék elég jól teszi a dolgát. Szóval gondolhatja, miért van erre szükségünk árnyék egyáltalán? Számos olyan eset van, amikor a árnyék( ) funkció életmentő. Nézzünk meg ezek közül néhányat:

Nem téglalap alakú formák

Ellentétben a doboz-árnyék, hozzáadhat a árnyék nem téglalap alakúra. Például van egy átlátszó SVG vagy PNG, amelynek nem téglalap alakú – például csillag. Itt az objektumnak megfelelő árnyék hozzáadását bármelyikkel kiegészíthetjük doboz-árnyék vagy árnyék. Vegye figyelembe mindkét forgatókönyvet:

HTML

CSS

.star-img img {
kijelző: inline-block;
magasság: 15em;
szélesség: 25em;
}
.box-shadow {
piros szín;
box-shadow: 0,60em 0,60em 0,2em;
}
.árnyék {
szűrő: drop-shadow (0,60em 0,60em 0,2em);
}

Kimenet:

A két hatás összehasonlítása során nyilvánvaló, hogy a doboz-árnyék téglalap alakú árnyékot ad; az sem mindegy, hogy a kép átlátszó vagy már rendelkezik háttérrel. Másrészről, árnyék lehetővé teszi magának a képnek az alakjához igazodó árnyék létrehozását.

A korlátozó tényezők az, hogy a árnyék( ) függvény minden típusú paramétert elfogad kivéve a betét kulcsszó és terjedés paraméter.

Csoportosított elemek

Több esetben előfordulhat, hogy bizonyos elemek átfedésével kell összeállítani az összetevőket. Ha használsz doboz-árnyék, akkor szembe kell néznie azzal a problémával, hogy megpróbál a megfelelő módon árnyékot vetni. Ez a következőképpen működik egy kép és egy szövegkomponens csoportosítása során:

HTML

A pillanatnak élni

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

Alap CSS

body {
párnázás: 5em 1em;
font-család: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Genf, Verdana, sans-serif;
}
h2 {
betűméret: 2rem;
}
p {
betűméret: 0,8 rem;
}
.parent-container {
kijelző: flex;
hajlítási irány: oszlop;
magasság: 17 rem;
szélesség: 50em;
}
.image-container img {
szélesség: 15em;
pozíció: abszolút;
z-index: 1;
felső: 2em;
bal: 1,5em;
}
.text-container {
szín: rgb (255, 236, 236);
háttérszín: rgb (141 0 35);
szélesség: 30 rem;
párnázás: 3 rem;
align-self: flex-end;
pozíció: relatív;
}

Most alkalmazza a doboz-árnyék és árnyék látni a különbséget.

.árnyék {
szűrő: drop-shadow (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.doboz,
.box img {
box-shadow: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Kimenet:

Mint látható, a doboz-árnyék minden elemre külön-külön kerül alkalmazásra, míg a árnyék csoportosítja mindkettőt, és alkalmazza az árnyékot.

Vágott elemek

Használhatja a clip-path tulajdonság egy bizonyos régió kivágásához, amely meghatározza, hogy egy kép vagy elem mely részei jelenjenek meg. Az árnyékoló szűrő lehetővé teszi számunkra, hogy a árnyék a kivágott elemen úgy, hogy alkalmazza az elem szülőjére:

HTML

CSS

.parent-container {
szűrő: drop-shadow (0rem 0rem 1,5rem barna);
}
.clipped-element {
szélesség: 50em;
magasság: 50 em;
margó: 0 auto;
background-image: url (mosolygó-lány.jpg);
clip-path: kör (50%);
háttér-méret: borító;
háttér-ismétlés: nincs ismétlés;
}

Kimenet:

A kép 50%-át körpályával vágtuk le. Ezért a árnyékoló szűrő csak a kép látható részére vonatkozik. Hát nem fantasztikus?

Korlátozások és különbségek

Ahogy fentebb tárgyaltuk, árnyék nem támogatja a terjedés paraméter. Ez azt jelenti, hogy a körvonalhatás létrehozása nem lehetséges a árnyék( ) funkciót, mert mindenhol elpusztul. Ezenkívül különböző árnyékhatásokat eredményez a doboz-árnyék és szöveg-árnyék (ugyanolyan paraméterekkel). Úgy érezheti, hogy a különbségek a doboz-árnyék és árnyék forraljuk le a CSS Box modell. Az egyik követi, míg a másik nem. Íme egy példa:

HTML

Minden MUO cikk egy lépéssel közelebb visz.


Minden MUO cikk egy lépéssel közelebb visz.



Minden MUO cikk egy lépéssel közelebb visz.

Alap CSS

body {
párnázás: 5em 1em;
font-család: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Genf, Verdana, sans-serif;
}
.parent-container {
szélesség: 72 rem;
}
p {
betűméret: 3em;
betűstílus: félkövér;
}

Árnyékhatások alkalmazása

.árnyék {
szűrő: drop-shadow (0,5em 0,5em 0,1em #555);
}
.box-shadow {
box-shadow: 0,5em 0,5em 0,1em #555;
}
.text-shadow {
text-shadow: 0,5em 0,5em 0,1em #555;
}

Kimenet:

Láthatod, hogy a doboz-árnyék nehezebb, sötétebb árnyékot ad, mint a szöveg-árnyék és árnyék. Ezenkívül van egy kis különbség az árnyék elhelyezése között a szöveg-árnyék és árnyék. Mindazonáltal az igényeinek megfelelően különböző árnyékhatásokat részesíthet előnyben.

Böngésző támogatás

Az árnyék( ) A funkció minden modern böngészőben támogatott, kivéve a régebbi böngészőket, például az Internet Explorert. Bár ez nem olyan dolog, ami komolyan akadályozná az UX-t, hozzáadhat egy funkciólekérdezést egy doboz-árnyék tartalék.

Kísérletezzen különböző árnyékeffektusokkal

A népszerűsége doboz-árnyék elég nyilvánvaló a felhasználási esetek sokasága miatt. Azonban a árnyék( ) funkció nagyon kevéssé kihasznált. Reméljük, hogy különböző árnyékhatásokkal kísérletezik, és megpróbálja megvalósítani árnyék jövőbeli projektjei során.

Az álosztályok a funkciók egy teljesen új skáláját adják a CSS-hez és a személyes webfejlesztési repertoárhoz. Tudjon meg többet róluk, hogy gyakorlottabb és hatékonyabb webfejlesztővé váljon.

A CSS box-shadow használata: 13 trükk és példa

Az unalmas dobozok unalmasnak tűnnek. Fesítse fel őket a CSS box-shadow effektussal!

Olvassa el a következőt

A szerzőről