CSS-doosschaduwgenerator

De CSS Box Shadow Generator is een visuele editor voor de eigenschap CSS Box-Shadow. Je past de offset, vervaagde straal, spreidstraal, kleur en dekking aan met schuifregelaars en ziet het resultaat live op een voorbeeldelement weergeven, en kopieer vervolgens de exacte CSS. In plaats van pixelwaarden te raden en de pagina opnieuw te laden, vorm je de schaduw direct en lees je de code die het produceert.

De eigenschap Box-Shadow is bedrieglijk diep. Een enkele declaratie kan verschillende schaduwen stapelen, elk met zijn eigen offsets, onscherpte, verspreiding, kleur en een optioneel inzetsleutelwoord dat de schaduw in het element schildert in plaats van buiten. Echte interfaceschaduwen gebruiken bijna altijd twee of meer lagen om er natuurlijk uit te zien, wat vervelend is om met de hand te schrijven. Deze tool beheert de lagen voor u en voert een spec-valid declaratie uit in de juiste door komma's gescheiden volgorde.

Alles gebeurt in uw browser. Kies een voorinstelling, stem de lagen af, wissel de preview tussen lichte en donkere achtergronden en kopieer de standaardeigenschap of een blok dat ook het -webkit-voorvoegsel bevat. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.

Schaduwen worden buiten de doos geschilderd en nemen geen ruimte in beslag, dus ze duwen buren nooit rond en worden door elke voorouder geknipt met verborgen overloop. Verspreiding is de minst begrepen waarde: het groeit of krimpt de schaduwvorm voordat het vervaagt, dus een positieve spreiding zonder vervaging geeft een solide offset-omtrek, en zo worden grenseffecten vervalst zonder de lay-out te beïnvloeden. Inzet verplaatst de schaduw binnen het element, handig voor geperste toestanden en innerlijke gloed. Het leggen van verschillende schaduwen met toenemende offset en vervaging is hoe overtuigende diepte wordt opgebouwd, aangezien een enkele grote vervaging leest als mist in plaats van als een schaduw. Elke laag kost rendertijd, en schaduwen die opnieuw schijnen tijdens scrollen of animaties zijn een veel voorkomende bron van ruches op apparaten met een lager vermogen.