CSS-schaduwgenerator met kaartvoorbeelden | We.Inc
Bouw gelaagde CSS box shadows en bekijk ze op echte service- en priceringskaarten, op lichte en donkere achtergronden, met een zichtbare focusstatus. Kopieer de CSS en een kant-en-klare kaartcomponent.
Schaduwen zijn lastig te beoordelen op een grijs vierkant. Hier stelt u een gelaagde box-shadow in en bekijkt u deze op een servicekaart en een priceringskaart, op een lichte of donkere pagina, met een toetsenbord-focusring die u kunt testen met Tab. Kopieer de CSS of de hele kaartcomponent zodra het er goed uitziet. Alles draait in uw browser. Niets wat u typt wordt naar We.Inc of iemand anders gestuurd, en het is weg zodra u het tabblad sluit.
Begin met een preset of pas de eerste laag aan: horizontale en verticale verschuiving, vervaging, spreiding, kleur, dekking en inset.
Voeg tot vijf lagen toe. Gelaagde schaduwen (een strakke plus een brede zachte) zien er natuurlijker uit dan één grote schaduw.
Wissel het voorbeeld tussen een lichte en een donkere pagina. Druk op Tab om de focus naar de kaartknoppen te verplaatsen en controleer of de focusring zichtbaar blijft.
De controles waarschuwen wanneer de schaduw te vaag is om te zien op de gekozen achtergrond en wanneer de kaarttekst onder WCAG AA-contrast valt.
Kopieer de box-shadow-declaratie, of de volledige kaartcomponent met HTML en CSS.
Op donkere achtergronden verdwijnen schaduwen bijna. Gebruik een iets lichtere kaartkleur of een dunne rand om de kaart in plaats daarvan te scheiden.
Houd de schaduwkleur getint richting uw achtergrond in plaats van puur zwart voor een zachtere look.
Vertrouw nooit alleen op een schaduw om focus te tonen. Gebruik ook een duidelijke outline.
Grote vervagingswaarden zijn duurder om te tekenen. Vermijd ze te animeren op lange lijsten.
Gebruik één of twee schaduwniveaus op de hele site, zodat diepte iets betekent.
Veelgestelde vragen
Hoe werkt de CSS box-shadow-eigenschap?
box-shadow neemt een horizontale verschuiving, een verticale verschuiving, een optionele vervagingsradius, een optionele spreiding en een kleur, plus het inset-sleutelwoord voor binnenschaduwen. Meerdere schaduwen kunnen worden opgesomd, gescheiden door komma's; de eerste wordt bovenop getekend.
Waarom zien gelaagde schaduwen er beter uit?
Echte objecten werpen een scherpe schaduw dichtbij en een zachte, brede verder weg. Twee of drie lagen met toenemende vervaging en afnemende dekking bootsen dat na.
Waarom is mijn schaduw onzichtbaar op een donkere achtergrond?
Een donkere schaduw op een donkere pagina heeft bijna geen contrast. De tool waarschuwt u hiervoor. Til de kaart op met een lichtere oppervlaktekleur of een subtiele rand in plaats daarvan.
Heeft box-shadow invloed op toegankelijkheid?
Schaduwen zijn decoratie, dus ze hoeven zelf niet aan contrastregels te voldoen. Belangrijk is dat tekst op de kaart leesbaar blijft en dat focus wordt getoond met een zichtbare outline, niet alleen een schaduwverandering.
Is de CSS shadow generator gratis?
Ja, zonder aanmelding. Kopieer de code naar elk project.
Test schaduwen op de componenten die u gaat gebruiken
Een schaduw die er goed uitziet op een los vierkant kan zwaar ogen op een rij priceringskaarten of verdwijnen onder een foto. Door hem te bekijken op de kaarten die een kleinbedrijfssite daadwerkelijk gebruikt, een servicekaart met een icoon en een uitgelicht prijsplan, ziet u het resultaat dat u krijgt.
De componentcode bevat een focus-visible outline, zodat de kaart bruikbaar blijft met een toetsenbord, welke schaduw u ook kiest.