box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;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.
Kies een voorinstelling zoals kaart, verhoogd of neuporfisch om een realistisch startpunt te krijgen, of begin met een enkele standaard schaduwlaag en bouw vanaf daar op.
Sleep de horizontale en verticale offset, vervaag de straal en spreid de schuifregelaars voor de spreiding, stel de schaduwkleur en dekking in en schakel de inzet in om de schaduw in het vak te verplaatsen.
Voeg extra schaduwlagen toe voor diepte - een zachte brede schaduw onder een strakkere donkerdere leest als natuurlijke elevatie. Plaats de lagen opnieuw of verwijder ze terwijl u de look verfijnt.
Kopieer de box-shadow-declaratie of het vooraf geblokkeerde blok voor oudere browsers en plak deze rechtstreeks in uw stylesheet of componentstijlen.
Stapel een willekeurig aantal schaduwlagen in één declaratie, in de juiste lakvolgorde van boven naar beneden, zo is de echte kaart en de modale hoogte van de electronica
Schuifregelaars voor horizontale en verticale offset, straalvervaging en spreidstraal, plus een kleurenkiezer, een dekkingscontrole en een inzetschakelaar omslag voor elk deel van de grammatica
Een voorbeeldelement wordt onmiddellijk bijgewerkt terwijl u bewerkt, en u kunt de achtergrond tussen licht en donker wisselen om te controleren hoe de schaduw in beide thema's leest
Samengestelde recepten voor subtiele, kaart-, verhoogde, zwevende, innerlijke, gloed-, neomorfe en scherpe schaduwen geven je een bewezen startpunt in plaats van een leeg canvas
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
0 comments
No comments yet. Be the first to share your thoughts!