Inset CSS Box Shadow — připravený kód
Vizuálně vytvořte kód CSS box-shadow: posuvníky pro posun, rozostření, roztažení, barvu s neprůhledností, režim vložení a až čtyři vrstvy s živým náhledem.
Výsledek
Tato stránka otevře generátor stínů rámečků s již zaškrtnutým zaškrtávacím políčkem vložení, takže stín je vykreslen uvnitř prvku místo za ním. Karta náhledu zobrazuje potopený efekt najednou a každý posuvník neustále aktualizuje řádek CSS.
Vložené stíny jsou tím, jak CSS předstírá hloubku jdoucí dovnitř: spoléhají na ně stavy stisknutých tlačítek, vyhledávací pole a vstupní jamky, prohlubně ukazatelů průběhu a ryté panely. Vzhledem k tomu, že stín obepíná vnitřní okraj, rozmazání a roztažení se chovají trochu jinak než v normálním vrženém stínu – posuvníky zde dají tento rozdíl okamžitě pocítit.
Když je propadlý vzhled správný, zkopírujte čáru stínu rámečku do šablony stylů. Můžete také zkombinovat vloženou vrstvu s běžnými vnějšími vrstvami – přidejte druhou vrstvu a zrušte zaškrtnutí vložení na ní, aby se obě spojily v jedné deklaraci.