Klíčové poznatky
- 01Každý parametr box-shadow má svůj vlastní jezdec plus numerický vstup pro přesnost v pixelech.
- 02Přepínač vnitřek se přepíná mezi drop shadow a vnitřním stínem pro stisknuté nebo neumorfické efekty.
- 03Barva a krytí jsou řízeny samostatně, výstup rgba() pro čitelný CSS.
- 04Náhled používá skutečnou CSS vlastnost na skutečném prvku — to, co vidíte, je přesně to, co váš stylopis vykresle.
Proč použít vizuální generátor Box-Shadow
CSS box-shadow má až šest hodnot — vodorovný posun, vertikální posun, poloměr rozmazání, poloměr rozšíření, barva a volitelné klíčové slovo vnitřek. Zapsání z paměti funguje pro jednoduché stíny, ale pro cokoli jemnějšího — těsný záblesk, hluboký drop shadow, měkká vrstva zvýšení — hádáte a opakujete, dokud se něco nejeví správně.
Vizuální generátor sbalí tuto iterační smyčku. Přesuňte jezdec, podívejte se na změnu okamžitě a zkopírujte pouze když jste spokojeni. Generátor box-shadow aplikace Handytool běží zcela v prohlížeči, takže náhled je skutečná CSS vlastnost aplikovaná na skutečný prvek — bez rozdílů vykreslování mezi nástrojem a vaší skutečnou stránkou.
Jak navrhovat Box Shadow
- 01
Nastavte vodorovné a vertikální posuny
Kladné hodnoty pohybují stín doprava a dolů. Záporné hodnoty jej pohybují doleva a nahoru. Centrovaný stín (0, 0) vytváří efekt záblesku.
- 02
Nastavte poloměr rozmazání
Vyšší hodnoty rozmazání vytváří měkčí, více rozptýlené stíny. Nulové rozmazání vytváří tvrdý, pevný obrys stínu.
- 03
Nastavte poloměr rozšíření
Kladné rozšíření zvětšuje stín před rozmazáním. Záporné rozšíření jej zmenší, což je užitečné pro těsné stíny pod prvkem.
- 04
Vyberte barvu a krytí
Použijte výběr barev k výběru odstínu stínu, poté snižte krytí na jemnost. Výstup používá rgba() k udržení hodnot čitelnými.
- 05
Přepínajte vnitřek, pokud je to potřeba
Vnitřek se přepíná z drop shadow na vnitřní stín — užitečné pro stisknutá tlačítka, potopené vstupy a neumorfické povrchy.
- 06
Zkopírujte deklaraci CSS
Klikněte na Kopírovat a vezměte si úplnou hodnotu box-shadow a vložte ji do svého stylopisu.
Žádné nahrání, žádný účet
Generátor je zcela na straně klienta. Vaše volby barev, číselné hodnoty a stavy náhledu zůstávají v prohlížeči — nic se neposílá na server. Neexistuje účet k vytvoření a žádný limit použití.
Protože prvek náhledu používá skutečnou CSS vlastnost box-shadow, výstup je přesný podle definice — není zapojeno žádné vykreslování plátna nebo aproximace snímku. Pixelové hodnoty, které zkopírujete, jsou pixelové hodnoty, které prohlížeč aplikuje.
Časté otázky generátoru Box-Shadow
Co dělá hodnota rozšíření?
Kladné rozšíření zvětšuje stín ve všech směrech před aplikací rozmazání; záporné rozšíření jej zmenší. Užitečné pro těsné, definované blisky v kombinaci s nízkou neostrostí.
Mohu přidat více box stínů?
Tento generátor vydává jeden stín najednou. Jejich vrstvení, zkopírujte hodnotu a oddělte více stínů čárkami v CSS — box-shadow přijímá čárkou oddělený seznam.
Proč je můj vnitřní stín neviditelný?
Vnitřní stíny kreslí uvnitř prvku, takže potřebují viditelnou barvu pozadí nebo výplň. Nebudou se jevit na průhledných nebo nulových prvcích.
Je náhled přesný na pixel?
Ano — náhled používá skutečnou CSS vlastnost box-shadow na skutečném prvku DOM, takže to, co vidíte, je přesně to, co váš stylopis vytvoří.
Co je neumorfický stín?
Neumorfismus používá dva stíny — jeden světlý a jeden tmavý — posunuto v opačných směrech k prvku zdánlivě zvýšenému nebo stlačenému z plochého povrchu. Oba stíny jsou typicky vnitřek pro variantu stisknuté.