Box-shadow-generator voor gestapelde CSS-schaduwen
Vlakke kaarten hebben meestal twee schaduwen nodig, niet één: een strakke donkere voor de contactrand en een brede lichte voor de hoogte. Deze box-shadow-generator houdt tot zes lagen in een lijst bij, tekent elke wijziging op een voorbeeldvak en schrijft de klare box-shadow-declaratie. De pagina opent met de voorinstelling "Gelaagd" toegepast, dus er staat al een resultaat op het scherm voordat je iets aanraakt.
Een laag heeft een x- en y-verschuiving, vervaging, uitbreiding, een kleur, een dekking en een inset-schakelaar. Je kunt een laag verbergen zonder hem te verwijderen.
Van voorinstelling tot geplakte CSS
- Klik op een voorinstelling zoals "Zacht", "Gloed" of "Neumorfisme". Die vult de laaglijst, de vakkleur, de paginakleur en de hoekradius.
- Wijzig een waarde met de schuifregelaar of typ er een getal naast. Een kleur accepteert de kiezer of een hexcode met 3 of 6 cijfers.
- Druk op "Laag toevoegen" voor een nieuwe schaduw. De pijlknoppen wijzigen de volgorde, de kopieerknop dupliceert een laag en de prullenbakknop verwijdert hem.
- Stel "Kleur van het vak", "Paginakleur" en "Hoekradius" in op je ontwerp, zodat het voorbeeld de schaduw toont op de achtergrond die je echt gebruikt.
- Druk op "CSS kopiëren" voor de hele declaratie, of op "Alleen waarde kopiëren" voor het deel na de dubbele punt.
Wat er in de uitvoerregel terechtkomt
De eerste laag in de lijst wordt bovenop geschilderd. CSS leest een met komma's gescheiden lijst in die volgorde, en de tool sorteert niets. Een nul verliest zijn eenheid: een verschuiving van 0 wordt geschreven als 0, niet als 0px.
Een laag met 100 % dekking krijgt een hexkleur in kleine letters, zoals #111827. Onder 100 % wordt hij geschreven als rgb(0 0 0 / 15%), met de dekking als percentage. Verborgen lagen blijven weg. Als elke laag verborgen is, is de uitvoer box-shadow: none;. Lagen staan op aparte regels en er wordt geen -webkit--prefix toegevoegd.
Bereiken die de regelaars niet overschrijden
Verschuivingen en uitbreiding lopen van -100 tot 100 px, vervaging van 0 tot 200 px, dekking van 0 tot 100 % en de hoekradius van 0 tot 100 px. Alle waarden zijn hele getallen. Typ 500 in een vervagingsveld en het springt naar 200 zodra je het veld verlaat. Zes lagen is het maximum en de laatste resterende laag kan niet worden verwijderd.
Kleuren moeten hex zijn. Namen zoals red en waarden zoals hsl() worden met een melding geweigerd, en het veld keert terug naar de laatste geldige kleur. Het voorbeeldvak is een vast vierkant van 150 px en het vlak knipt grote schaduwen af aan de rand.
Niets verlaat dit tabblad
De waarden worden door JavaScript op de pagina omgezet in CSS. Een knop indrukken verstuurt geen verzoek, en het netwerkpaneel van je browser laat dat zien. De kopieerknoppen schrijven naar het klembord. De tool slaat niets op, dus herladen brengt de voorinstelling "Gelaagd" terug.
Veelgestelde vragen (FAQ)
box-shadow-declaratie, gescheiden door komma's. De generator doet dit voor je als je op "Laag toevoegen" drukt, tot 6 lagen, en de eerste wordt bovenop geschilderd.