Generátor CSS Box Shadow
Čo je CSS Box Shadow?
Vlastnosť CSS box-shadow pridáva efekty tieňa okolo rámčeka prvku. Tiene môžu byť posunuté, rozmazané, rozšírené, zafarbené a nastavené ako inset (vnútorný tieň). Viac tieňov oddelených čiarkami môže byť vrstvených pre bohaté efekty. Tento generátor vám umožňuje vizuálne vytvárať zložité viacvrstvové tiene a kopírovať hotový CSS do schránky.
Ako používať Generátor Box Shadow
-
Upravte posuvníky pre Offset X/Y, Blur a Spread na umiestnenie a tvarovanie tieňa.
-
Kliknite na farebný vzor na výber farby tieňa a použite posuvník Opacity pre priehľadnosť.
-
Prepnite 'Inset' na vytvorenie vnútorného žiary alebo efektu stlačenia.
-
Kliknite na '+ Pridať vrstvu' na vrstvenie viacerých tieňov na seba.
-
Skopírujte vygenerovaný CSS a vložte ho do svojho štýlového listu.
Často kladené otázky
Aký je rozdiel medzi box-shadow a drop-shadow filtrom? box-shadow pridáva tiene okolo obdĺžnikového okraja prvku a podporuje vložené tiene. CSS filter: drop-shadow() sa vzťahuje na vizuálny tvar prvku (vrátane priehľadnosti), čo mu umožňuje sledovať neobdĺžnikové obrysy ako PNG s priehľadným pozadím.
Ako vytvoriť efekt zdvihnutia karty Material Design? Vrstvujte dva box shadows: mäkký ambientný tieň (veľké rozmazanie, nízka nepriehľadnosť, mierne rozpätie) a kľúčový tieň (menšie rozmazanie, vyššia nepriehľadnosť, smerový posun). Napríklad: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
Vplýva box-shadow na rozloženie stránky? Nie. box-shadow neovplyvňuje veľkosť ani pozíciu prvku v toku dokumentu. Na rozdiel od outline nezaberá miesto v rozložení a nebude tlačiť ostatné prvky naokolo.
Môžem animovať box-shadow? Áno. box-shadow je animovateľný prostredníctvom CSS prechodov a animácií. Na výkon preferujte prechod box-shadow iba keď je to potrebné — prehliadače nemôžu GPU-zrýchliť zmeny box-shadow tak efektívne ako transform alebo opacity.
Keywords: generátor CSS box shadow, box-shadow CSS, CSS nástroj tieňov, CSS drop shadow, vnútorný tieň, viacvrstvový tieň, CSS shadow online