Inset CSS Box Shadow - kant-en-klare code
Creëer visueel CSS-vakschaduwcode: schuifregelaars voor offset, vervaging, spreiding, kleur met dekking, inzetmodus en maximaal vier lagen met een live voorbeeld.
Resultaat
Op deze pagina wordt de box-shadow generator geopend, waarbij het inzetvakje al is aangevinkt, zodat de schaduw binnen het element wordt getekend in plaats van erachter. De voorbeeldkaart toont het verzonken effect in één keer en elke schuifregelaar blijft de CSS-regel live bijwerken.
Ingevoegde schaduwen zijn de manier waarop CSS de diepte nabootst die naar binnen gaat: ingedrukte knopstatussen, zoekvelden en invoervakken, voortgangsbalkdalen en gegraveerde panelen vertrouwen er allemaal op. Omdat de schaduw de binnenrand omhult, gedragen vervaging en spreiding zich iets anders dan bij een normale slagschaduw; de schuifregelaars hier laten je dat verschil onmiddellijk voelen.
Wanneer de verzonken look goed is, kopieert u de doosschaduwlijn naar uw stylesheet. Je kunt ook een inzetlaag combineren met gewone buitenlagen. Voeg een tweede laag toe en schakel de inzetlaag uit om beide in één declaratie te combineren.