Generátor CSS Box Shadow
Bezplatný online generátor CSS box-shadow. Vizuálně vytvářejte krásné stíny s nastavitelným posunem, rozostřením, šířením, barvou a inset. Živý náhled a okamžité kopírování kódu.
Co je CSS box-shadow?
CSS box-shadow je vlastnost CSS, která přidává efekty stínů kolem rámu prvku. Umožňuje vytvářet vržené stíny, vnitřní stíny a více vrstev stínů zadáním posunu, poloměru rozostření, poloměru šíření a hodnot barev.
Jaké jsou parametry box-shadow?
Vlastnost box-shadow přijímá několik hodnot: vodorovný posun (X), svislý posun (Y), poloměr rozostření, poloměr šíření, barvu a volitelné klíčové slovo inset. Můžete také zadat více stínů oddělených čárkami.
Co je klíčové slovo inset?
Klíčové slovo inset mění stín z vnějšího stínu (vržený stín) na vnitřní stín. Když je zadáno inset, stín je vykreslen uvnitř ohraničení prvku místo vně, což vytváří efekt vložení.
Co je poloměr rozostření?
Poloměr rozostření určuje, jak moc je okraj stínu rozmazaný. Hodnota 0 vytváří ostrý, pevný okraj. Větší hodnoty vytvářejí rozptýlenější, měkčí stín, který se rozprostírá dále od prvku.
Co je poloměr šíření?
Poloměr šíření zvětšuje nebo zmenšuje velikost stínu. Kladné hodnoty činí stín větším než prvek, zatímco záporné hodnoty jej činí menším. To ovlivňuje stín před použitím rozostření.
Jak vytvořím více stínů?
Více stínů můžete vytvořit oddělením každé definice stínu čárkou. Každý stín může mít různé hodnoty posunu, rozostření, šíření a barvy. Stíny jsou aplikovány v pořadí, v jakém jsou deklarovány, přičemž první stín je nahoře.
Mohu pro stíny používat barvy RGBA?
Ano, můžete použít jakýkoli formát barev CSS, včetně RGBA, HSLA, HEX nebo pojmenovaných barev. RGBA a HSLA jsou zvláště užitečné pro vytváření poloprůhledných stínů, které se přirozeně prolínají s pozadím.
Jak zkopíruji vygenerovaný CSS kód?
Stačí kliknout na tlačítko "Kopírovat kód" v rozhraní generátoru. CSS kód bude zkopírován do schránky a lze jej přímo vložit do vaší šablony stylů nebo HTML souboru.
Je box-shadow podporován ve všech prohlížečích?
Ano, box-shadow je podporován ve všech moderních prohlížečích, včetně Chrome, Firefox, Safari, Edge a Opera. Je součástí CSS3 od roku 2011 a má vynikající kompatibilitu s prohlížeči.
Ovlivňuje box-shadow výkon?
box-shadow má minimální vliv na výkon moderních prohlížečů. Použití více složitých stínů s velkým poloměrem rozostření na mnoha prvcích však může ovlivnit výkon vykreslování, zejména na mobilních zařízeních.
Jaké jsou běžné případy použití box-shadow?
Běžná použití zahrnují vytváření efektů zvednutí karet, přidávání hloubky tlačítkům, vytváření vložených polí formuláře, implementaci stínů material design a přidávání vizuálního oddělení mezi překrývajícími se prvky.
Mohu animovat box-shadow?
Ano, box-shadow lze animovat pomocí CSS přechodů nebo animací. Animace box-shadow však může být náročná na výkon. Pro lepší výkon zvažte použití pseudo-prvků s přechody průhlednosti.