Jak vytvořit vržený stín pomocí CSS

I když se designové trendy každý rok mění, můžete se spolehnout na použití základních stínových efektů, jako je např box-shadow a vrhat stín pozitivně přispět k estetice webu. Můžeš použít vržené stíny vytvářet příjemné, krásně vykreslené efekty, aniž by působily jako sýr.

Podívejme se blíže na CSS vrhat stín vlastnictví.

Co je vržený stín CSS?

vrhat stín( ) je CSS efekt, který zobrazuje stín kolem tvaru určeného objektu. Zde je syntaxe pro použití CSS vrhat stín.

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

Existuje široká škála funkce filtru počítaje v to rozmazat ( ), jas ( ), a vrhat stín( ).

offset-x určuje vodorovnou vzdálenost a offset-y určuje vertikální vzdálenost. Všimněte si, že záporné hodnoty umístí stín doleva (offset-x) a výše (offset-y) objekt.

Poslední dva parametry jsou volitelné. Poloměr rozostření stínu můžete určit jako délku. Ve výchozím nastavení je nastavena na 0. Nemůžete mít záporný poloměr rozostření.

Barva stínu je specifikována jako. Pokud jste neurčili barvu, bude následovat za hodnotou barva vlastnictví.

Kdy je vržený stín CSS užitečný?

To už možná víte box-shadow dělá práci docela dobře. Takže si můžete myslet, proč to potřebujeme vrhat stín vůbec? Existuje řada případů, kdy vrhat stín( ) funkce je zachránce života. Pojďme se na některé z nich podívat:

Nepravoúhlé tvary

Na rozdíl od a box-shadow, můžete přidat a vrhat stín do nepravoúhlých tvarů. Máme například průhledný SVG nebo PNG s nepravoúhlým tvarem – například hvězdou. Zde lze přidání stínu, který odpovídá samotnému objektu, dokončit jedním z nich box-shadow nebo vrhat stín. Zvažte oba scénáře:

HTML

CSS

.star-img img {
displej: inline-block;
výška: 15m;
šířka: 25em;
}
.box-shadow {
červená barva;
box-shadow: 0,60em 0,60em 0,2em;
}
.vrhat stín {
filtr: vržený stín (0,60em 0,60em 0,2em);
}

Výstup:

Při porovnání obou efektů je zřejmé, že a box-shadow dává obdélníkový stín; také nezáleží na tom, zda je obrázek průhledný nebo již má pozadí. Na druhou stranu, vrhat stín umožňuje vytvořit stín, který odpovídá tvaru samotného obrázku.

Limitujícími faktory jsou, že vrhat stín( ) funkce přijímá všechny parametry typu kromě toho vložka klíčové slovo a rozpětí parametr.

Seskupené prvky

Existuje několik případů, kdy budete možná potřebovat sestavit komponenty překrytím určitých prvků. Pokud používáte box-shadow, budete čelit problému pokusit se vrhnout stín správným způsobem. Při seskupování obrázku a textové komponenty to funguje takto:

HTML

Žijte okamžikem

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

Základní CSS

tělo {
polstrování: 5em 1em;
rodina písem: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
}
h2 {
velikost písma: 2rem;
}
p {
velikost písma: 0,8rem;
}
.parent-container {
displej: flex;
směr ohybu: sloupec;
výška: 17rem;
šířka: 50em;
}
.image-container img {
šířka: 15em;
pozice: absolutní;
z-index: 1;
nahoře: 2em;
vlevo: 1,5 em;
}
.text-container {
barva: rgb (255, 236, 236);
barva pozadí: rgb (141 0 35);
šířka: 30rem;
polstrování: 3rem;
align-self: flex-end;
poloha: relativní;
}

Nyní použijte box-shadow a vrhat stín vidět rozdíl.

.vrhat stín {
filtr: vržený stín (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.krabice,
.box img {
box-shadow: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Výstup:

Jak můžete vidět, box-shadow se aplikuje na každý prvek samostatně, zatímco vrhat stín seskupí oba a aplikuje stín.

Oříznuté prvky

Můžete použít klipová cesta vlastnost pro oříznutí určité oblasti, která určuje, jaké části obrázku nebo prvku se mají zobrazit. The filtr vrženého stínu nám umožňuje vytvořit a vrhat stín na oříznutý prvek jeho aplikováním na nadřazený prvek tohoto prvku:

HTML

CSS

.parent-container {
filtr: drop-shadow (0rem 0rem 1,5rem maroon);
}
.clipped-element {
šířka: 50em;
výška: 50 em;
okraj: 0 auto;
background-image: url (smiling-girl.jpg);
clip-path: circle (50%);
background-size: cover;
background-repeat: no-repeat;
}

Výstup:

Ořízli jsme 50 % obrázku kruhovou cestou. Proto, filtr vrženého stínu se aplikuje pouze na viditelnou část obrázku. není to úžasné?

Omezení a rozdíly

Jak jsme diskutovali výše, vrhat stín nepodporuje rozpětí parametr. To znamená, že vytvoření efektu obrysu by nebylo možné pomocí vrhat stín( ) fungovat, protože se zabíjí všude. Také vykresluje různé stínové efekty od box-shadow a stín textu (se stejnými parametry). Můžete mít pocit, že rozdíly mezi box-shadow a vrhat stín svařit na CSS Box Model. Jeden to následuje, zatímco druhý ne. Zde je příklad:

HTML

Každý článek MUO vás o krok přiblíží.


Každý článek MUO vás o krok přiblíží.



Každý článek MUO vás o krok přiblíží.

Základní CSS

tělo {
polstrování: 5em 1em;
rodina písem: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
}
.parent-container {
šířka: 72rem;
}
p {
velikost písma: 3em;
styl písma: tučné;
}

Aplikace stínových efektů

.vrhat stín {
filtr: vržený stín (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ýstup:

Můžete vidět, že box-shadow dává těžší, tmavší stín než stín textu a vrhat stín. Také je mezi nimi malý rozdíl v umístění stínu stín textu a vrhat stín. Přesto můžete preferovat různé stínové efekty podle vašich požadavků.

Podpora prohlížeče

The vrhat stín( ) Funkce je podporována ve všech moderních prohlížečích kromě starších prohlížečů, jako je Internet Explorer. Ačkoli to není něco, co by vážně omezovalo UX, můžete přidat dotaz na funkci pomocí a box-shadow ustoupit.

Experimentujte s různými stínovými efekty

Popularita box-shadow je zcela zřejmé z důvodu velkého množství případů použití. Nicméně, vrhat stín( ) funkce je velmi málo využívána. Doufáme, že budete experimentovat s různými efekty stínů a pokusíte se je implementovat vrhat stín ve vašich budoucích projektech.

Pseudotřídy přidávají zcela novou řadu funkcí do CSS a vašeho osobního repertoáru pro vývoj webu. Zjistěte o nich více, abyste se stali zdatnějšími a efektivnějšími webovými vývojáři.

Jak používat CSS box-shadow: 13 triků a příkladů

Nevýrazné krabice vypadají nudně. Ozdobte je pomocí CSS efektu box-shadow!

Přečtěte si další

O autorovi