Innsatt CSS Box Shadow — Ferdiglaget kode
Bygg CSS-boksskyggekode visuelt: glidebrytere for forskyvning, uskarphet, spredning, farger med opasitet, innfelt modus og opptil fire lag med en direkte forhåndsvisning.
Resultat
Denne siden åpner boksskyggegeneratoren med den innfelte avmerkingsboksen allerede merket, slik at skyggen tegnes inne i elementet i stedet for bak det. Forhåndsvisningskortet viser den senkede effekten på en gang, og hver glidebryter fortsetter å oppdatere CSS-linjen live.
Innfelte skygger er hvordan CSS forfalsker dybde som går innover: tilstander som trykkes på knapper, søkefelt og inndatabrønner, fremdriftslinjebunner og graverte paneler er alle avhengige av dem. Fordi skyggen omslutter den indre kanten, oppfører uskarphet og spredning seg litt annerledes enn i en vanlig fallskygge - glidebryterne her lar deg føle forskjellen umiddelbart.
Når det sunkne utseendet er riktig, kopierer du boks-skyggelinjen inn i stilarket ditt. Du kan også kombinere et innfelt lag med vanlige ytre lag - legg til et andre lag og fjern merket for innfelt på det for å blande begge i én erklæring.