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.
Jak používat Generátor CSS Box Shadow
Navrhněte stíny CSS box-shadow vizuálně, aniž byste hádali hodnoty. Generátor běží lokálně ve vašem prohlížeči a nic z toho, co zadáte, se neodesílá.
- Nastavte H-Offset a V-Offset a posuňte stín do stran či nahoru a dolů.
- Zvětšete Blur pro měkčí okraje a pomocí Spread stín zvětšete či zmenšete.
- Zvolte Color a upravte jeho Opacity pro jemnější, přirozenější vzhled.
- Zaškrtněte Inset, aby se stín kreslil uvnitř prvku a ne kolem něj.
- Hotové pravidlo box-shadow zkopírujte z náhledu do své šablony stylů.
Malé rozostření s mírně kladným V-Offset vytvoří těsně pod prvkem nenápadný, realistický kontaktní stín.
Související nástroje
- Generátor Border Radius CSS Vizuální generátor border-radius CSS. Upravte každý roh nezávisle s živým náhledem a okamžitě zkopírujte CSS kód.
- Generátor CSS gradientů Vytvářejte úžasné CSS gradienty vizuálně. Generujte lineární, radiální a kuželové gradienty s více barevnými zastávkami, úhly a pozicemi. Okamžitě zkopírujte produkčně připravený CSS kód.
- Generátor CSS Grid Bezplatný vizuální generátor CSS Grid s živým náhledem. Interaktivně navrhujte responzivní mřížková rozvržení a exportujte produkční CSS kód.
- Generátor CSS Flexbox Vizuální generátor CSS Flexbox s živým náhledem. Upravte flex vlastnosti a získejte připravený CSS kód.
- Generátor border-radius Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor easing CSS Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
- Generátor text-shadow CSS Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.