Ako vytvoriť vrhnutý tieň pomocou CSS

Aj keď sa trendy v dizajne každý rok líšia, môžete sa spoľahnúť na použitie základných tieňových efektov, ako je napr box-shadow a Vrhať tieň pozitívne prispieť k estetike webovej stránky. Môžeš použiť vrhnuté tiene na vytvorenie príjemných, krásne vykreslených efektov bez toho, aby pôsobili syrovo.

Pozrime sa bližšie na CSS Vrhať tieň nehnuteľnosť.

Čo je to CSS drop-shadow?

Vrhať tieň( ) je CSS efekt, ktorý zobrazuje tieň okolo tvaru určeného objektu. Tu je syntax na použitie CSS Vrhať tieň.

Syntax:
filter: drop-shadow (offset-x offset-y blur-radius color);

Existuje široká škála filtračné funkcie počítajúc do toho rozmazať( ), jas ( ), a Vrhať tieň( ).

posun-x určuje horizontálnu vzdialenosť a ofset-y určuje vertikálnu vzdialenosť. Všimnite si, že záporné hodnoty umiestnia tieň doľava (posun-x) a nad (ofset-y) objekt.

Posledné dva parametre sú voliteľné. Polomer rozmazania tieňa môžete určiť ako dĺžku. V predvolenom nastavení je nastavená na 0. Nemôžete mať záporný polomer rozmazania.

Farba tieňa je špecifikovaná ako. Ak ste nešpecifikovali farbu, nasleduje hodnota farba nehnuteľnosť.

Kedy je CSS drop-shadow užitočný?

To už možno viete box-shadow robí prácu celkom dobre. Takže si môžete myslieť, prečo to potrebujeme Vrhať tieň vôbec? Existuje množstvo prípadov, kedy Vrhať tieň( ) funkcia je záchrana života. Poďme sa pozrieť na niekoľko z nich:

Neobdĺžnikové tvary

Na rozdiel od a box-shadow, môžete pridať a Vrhať tieň na iné ako pravouhlé tvary. Napríklad máme priehľadný SVG alebo PNG s neobdĺžnikovým tvarom – napríklad hviezdou. Tu pridanie tieňa, ktorý zodpovedá samotnému objektu, možno doplniť jedným z nich box-shadow alebo Vrhať tieň. Zvážte oba scenáre:

HTML

CSS

.star-img img {
displej: inline-block;
výška: 15em;
šírka: 25em;
}
.box-shadow {
farba: červená;
box-shadow: 0,60em 0,60em 0,2em;
}
.Vrhať tieň {
filter: drop-shadow (0,60em 0,60em 0,2em);
}

Výkon:

Pri porovnaní oboch účinkov je zrejmé, že a box-shadow dáva obdĺžnikový tieň; tiež nezáleží na tom, či je obrázok priehľadný alebo už má pozadie. Na druhej strane, Vrhať tieň umožňuje vytvoriť tieň, ktorý sa prispôsobí tvaru samotného obrazu.

Limitujúcimi faktormi sú, že Vrhať tieň( ) funkcia akceptuje všetky parametre typu okrem vložka kľúčové slovo a šírenie parameter.

Zoskupené prvky

Existuje niekoľko prípadov, keď možno budete musieť zostaviť komponenty prekrytím určitých prvkov. Ak používate box-shadow, budete čeliť problému pokusu vrhnúť tieň správnym spôsobom. Pri zoskupovaní obrázka a textového komponentu to funguje takto:

HTML

Žite v okamihu

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

Základné CSS

telo {
výplň: 5em 1em;
rodina písiem: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
„Lucida Sans Unicode“, Ženeva, Verdana, bezpätkové;
}
h2 {
veľkosť písma: 2rem;
}
p {
veľkosť písma: 0,8rem;
}
.parent-container {
displej: flex;
smer ohybu: stĺpec;
výška: 17rem;
šírka: 50em;
}
.image-container img {
šírka: 15em;
pozícia: absolútna;
z-index: 1;
hore: 2em;
vľavo: 1,5 em;
}
.text-container {
farba: rgb (255, 236, 236);
farba pozadia: rgb (141 0 35);
šírka: 30rem;
polstrovanie: 3rem;
align-self: flex-end;
poloha: relatívna;
}

Teraz použite box-shadow a Vrhať tieň vidieť rozdiel.

.Vrhať tieň {
filter: drop-shadow (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.box,
.box img {
box-shadow: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Výkon:

Ako môžete vidieť, box-shadow sa aplikuje na každý prvok jednotlivo, zatiaľ čo Vrhať tieň zoskupí oboch a aplikuje tieň.

Orezané prvky

Môžete použiť klip-cesta vlastnosť na orezanie určitej oblasti, ktorá určuje, aké časti obrázka alebo prvku sa majú zobraziť. The filter drop-shadow nám umožňuje vytvoriť a Vrhať tieň na orezaný prvok tak, že ho použijete na rodiča tohto prvku:

HTML

CSS

.parent-container {
filter: drop-shadow (0rem 0rem 1,5rem maroon);
}
.clipped-element {
šírka: 50em;
výška: 50 em;
okraj: 0 auto;
background-image: url (smiling-girl.jpg);
klip-cesta: kruh (50 %);
veľkosť pozadia: obal;
background-repeat: no-repeat;
}

Výkon:

Orezali sme 50 % obrázka kruhovou cestou. Preto, filter drop-shadow sa aplikuje iba na viditeľnú časť obrázka. nie je to úžasné?

Obmedzenia a rozdiely

Ako sme diskutovali vyššie, Vrhať tieň nepodporuje šírenie parameter. To znamená, že vytvorenie efektu obrysu by nebolo možné pomocou Vrhať tieň( ) funguje, pretože sa zabíja všade. Tiež vykresľuje rôzne tieňové efekty od box-shadow a textový tieň (s rovnakými parametrami). Môžete mať pocit, že rozdiely medzi box-shadow a Vrhať tieň uvariť do CSS Box Model. Jeden to nasleduje, zatiaľ čo druhý nie. Tu je príklad:

HTML

Každý článok MUO vás priblíži o krok bližšie.


Každý článok MUO vás priblíži o krok bližšie.



Každý článok MUO vás priblíži o krok bližšie.

Základné CSS

telo {
výplň: 5em 1em;
rodina písiem: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
„Lucida Sans Unicode“, Ženeva, Verdana, bezpätkové;
}
.parent-container {
šírka: 72rem;
}
p {
veľkosť písma: 3em;
štýl písma: tučné;
}

Aplikácia tieňových efektov

.Vrhať tieň {
filter: 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;
}

Výkon:

Môžete vidieť, že box-shadow dáva ťažší, tmavší tieň ako textový tieň a Vrhať tieň. Tiež je tu malý rozdiel v umiestnení tieňa medzi textový tieň a Vrhať tieň. Napriek tomu môžete uprednostniť rôzne efekty tieňov podľa vašich požiadaviek.

Podpora prehliadača

The Vrhať tieň( ) funkcia je podporovaná vo všetkých moderných prehliadačoch okrem starších prehliadačov, ako je Internet Explorer. Aj keď to nie je niečo, čo by vážne obmedzovalo UX, môžete pridať dotaz na funkciu pomocou a box-shadow záložný.

Experimentujte s rôznymi tieňovými efektmi

Popularita box-shadow je celkom zrejmé z dôvodu množstva prípadov použitia. Avšak, Vrhať tieň( ) funkcia je veľmi málo využívaná. Dúfame, že budete experimentovať s rôznymi efektmi tieňov a pokúsite sa ich implementovať Vrhať tieň vo vašich budúcich projektoch.

Pseudotriedy pridávajú do CSS a vášho osobného repertoáru vývoja webu úplne nový rozsah funkcií. Zistite o nich viac, aby ste sa stali zdatnejším a efektívnejším webovým vývojárom.

Ako používať CSS box-shadow: 13 trikov a príkladov

Nevýrazné boxy vyzerajú nudne. Ozdobte ich efektom CSS box-shadow!

Prečítajte si ďalej

O autorovi