Inset CSS Box Shadow — pripravený kód
Vizuálne vytvorte kód box-shadow CSS: posuvníky pre posun, rozmazanie, roztiahnutie, farbu s nepriehľadnosťou, režim vkladania a až štyri vrstvy so živým náhľadom.
Výsledok
Táto stránka otvorí generátor tieňov rámčeka s už začiarknutým začiarkavacím políčkom vloženia, takže tieň sa nakreslí vo vnútri prvku namiesto za ním. Na karte ukážky sa naraz zobrazuje vpadnutý efekt a každý posúvač neustále aktualizuje čiaru CSS.
Vložené tiene sú spôsob, akým CSS falšuje hĺbku smerujúcu dovnútra: stavy stlačeného tlačidla, vyhľadávacie polia a vstupné jamky, žľaby ukazovateľov priebehu a gravírované panely sa na ne spoliehajú. Pretože tieň obklopuje vnútorný okraj, rozmazanie a roztiahnutie sa správajú trochu inak ako v bežnom vrhanom tieni – posuvníky tu umožňujú okamžite pocítiť tento rozdiel.
Keď je zapadnutý vzhľad správny, skopírujte čiaru tieňa do šablóny so štýlmi. Môžete tiež skombinovať vloženú vrstvu s bežnými vonkajšími vrstvami – pridajte druhú vrstvu a zrušte začiarknutie políčka vložiť na nej, aby sa obe zlúčili do jednej deklarácie.