Slagschaduwen
Voeg diepte toe met shadow-sm tot en met shadow-2xl, gebruik shadow-inner voor inset-effecten en verwijder schaduwen met shadow-none.
Slagschaduwen is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Schaduwen en visuele diepte
Vlakschaduwen geven platte interfaces een gevoel van diepte en verhoging. Ze laten elementen boven de pagina lijken te zweven, trekken de aandacht van de gebruiker en geven de hiërarchie aan. De shadow-*-hulpprogramma's van Tailwind bieden een zorgvuldig ontworpen schaal van vlakschaduwen die goed op elkaar zijn afgestemd. De waarden lopen van de nauwelijks waarneembare shadow-sm tot de opvallende shadow-2xl, zodat je volledige controle hebt over de verhoging.
<!-- Shadow elevation scale -->
<div class="grid grid-cols-2 gap-6 p-8 bg-gray-50">
<div class="bg-white p-4 rounded-lg shadow-sm">shadow-sm</div>
<div class="bg-white p-4 rounded-lg shadow">shadow</div>
<div class="bg-white p-4 rounded-lg shadow-md">shadow-md</div>
<div class="bg-white p-4 rounded-lg shadow-lg">shadow-lg</div>
<div class="bg-white p-4 rounded-lg shadow-xl">shadow-xl</div>
<div class="bg-white p-4 rounded-lg shadow-2xl">shadow-2xl</div>
</div>Naslaginformatie voor schaduw-hulpprogramma's
Elke schaduw in de schaal van Tailwind is ontworpen voor een specifiek verhogingsniveau. shadow-sm (zeer subtiel, 1px vervaging) is geschikt voor invoervelden en kleine UI-elementen. shadow en shadow-md passen bij kaarten en vervolgkeuzemenu's. shadow-lg is ideaal voor pop-overs en modale vensters. shadow-xl en shadow-2xl zijn bedoeld voor grote modale vensters, schermvullende overlays en opvallende hero-elementen die duidelijk verhoogd moeten lijken.
<!-- Semantic shadow usage by component type -->
<div class="space-y-4 max-w-sm">
<input class="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm" placeholder="Input with shadow-sm" />
<div class="bg-white border rounded-xl p-4 shadow-md">Card with shadow-md</div>
<div class="bg-white rounded-2xl p-6 shadow-xl">Modal panel with shadow-xl</div>
</div>shadow-inner voor inspringende schaduwen
shadow-inner past een naar binnen gerichte schaduw toe, waardoor een element verzonken of in het oppervlak gedrukt lijkt. Dit is het visuele tegenovergestelde van de standaardverhogingsschaduwen. Veelvoorkomende toepassingen zijn ingedrukte knopstatussen, zoekvelden om aan te geven dat ze actief zijn, holle containers en de banen van schakelknoppen die verzonken moeten lijken als contrast met het verhoogde knopgedeelte.
<!-- Inset shadow for recessed / pressed effects -->
<div class="flex gap-4">
<!-- Search input looking recessed -->
<div class="flex-1 bg-gray-100 rounded-lg px-4 py-3 shadow-inner flex items-center gap-2">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
</svg>
<span class="text-gray-400 text-sm">Search...</span>
</div>
<!-- Pressed button state -->
<button class="bg-gray-200 shadow-inner px-4 py-2 rounded-lg font-medium text-gray-700">
Pressed
</button>
</div>shadow-none om schaduwen te verwijderen
shadow-none verwijdert alle vlakschaduwen van een element. Dit is handig wanneer je een overgenomen schaduw moet overschrijven, bijvoorbeeld wanneer je op mobiel de schaduw van een kaart verwijdert omdat de kaart de volledige breedte gebruikt en de schaduw er aan de randen van het scherm vreemd uitziet. Het patroon shadow-md md:shadow-lg gebruikt op mobiel een kleinere schaduw en op desktop een grotere, omdat zwevende kaarten daar beter tot hun recht komen.
<!-- Remove shadow on mobile, restore on tablet+ -->
<div class="bg-white p-4 rounded-none sm:rounded-xl shadow-none sm:shadow-lg">
<h3 class="font-bold">Responsive Card Shadow</h3>
<p class="text-gray-600 mt-1">No shadow on mobile, shadow on larger screens.</p>
</div>Gekleurde vlakschaduwen
Tailwind v3 introduceerde gekleurde schaduwen: shadow-blue-500 laat de schaduw blauw lijken. Dit creëert levendige, gloeiende effecten die populair zijn in donkere thema's en landingspagina's. De schaduwkleur wordt toegepast met de CSS-variabele --tw-shadow-color, dus je hebt naast de kleurklasse nog steeds een groottehulpprogramma van shadow-* nodig — bijvoorbeeld shadow-lg shadow-blue-500/50.
<!-- Colorful glow effects with colored shadows -->
<div class="flex gap-6 p-8 bg-gray-900 justify-center">
<button class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-blue-500/50">
Blue Glow
</button>
<button class="bg-purple-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-purple-500/50">
Purple Glow
</button>
<button class="bg-pink-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-pink-500/50">
Pink Glow
</button>
</div>Patroon voor kaarten die bij aanwijzen omhoogkomen
Een van de meest voorkomende interactieve patronen is het omhoogkomende effect bij aanwijzen: een kaart begint met een subtiele schaduw en krijgt bij aanwijzen een diepere schaduw, waardoor de illusie ontstaat dat de kaart omhoogkomt. Combineer shadow-md hover:shadow-xl met transition-shadow duration-300 voor een vloeiende animatie. Dit laat gebruikers zien dat de kaart interactief is en zorgt ervoor dat dashboards en productoverzichten verzorgd aanvoelen.
<!-- Interactive card with hover-lift effect -->
<div class="grid grid-cols-3 gap-6 p-6">
<div class="bg-white rounded-xl p-5 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
<span class="text-blue-600">📊</span>
</div>
<h3 class="font-bold">Analytics</h3>
<p class="text-sm text-gray-500 mt-1">View your stats</p>
</div>
</div>Slagschaduw versus vlakschaduw
Tailwind biedt zowel vlakschaduwen (shadow-*) als slagschaduwen (drop-shadow-*). Het belangrijkste verschil is dat shadow-* wordt toegepast op het begrenzingsvak van het element (een rechthoek), terwijl drop-shadow-* een CSS-filter is dat de werkelijke zichtbare vorm van het element volgt, inclusief transparante gebieden. drop-shadow-* is ideaal voor onregelmatig gevormde elementen, zoals PNG-pictogrammen met transparante achtergronden.
<!-- Box shadow (rectangular) vs drop shadow (shape-aware) -->
<div class="flex gap-8 p-6 items-center">
<!-- Box shadow on transparent PNG -->
<div>
<p class="text-sm mb-2">shadow-lg (rectangular)</p>
<svg class="w-16 h-16 text-blue-500 shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
<!-- Drop shadow follows shape -->
<div>
<p class="text-sm mb-2">drop-shadow-lg (shape-aware)</p>
<svg class="w-16 h-16 text-blue-500 drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
</div>Meerdere schaduwen stapelen
CSS ondersteunt meerdere schaduwen op één element, maar de ingebouwde hulpprogramma's van Tailwind bieden slechts één schaduw per klasse. Voor meerdere lagen breid je het thema van Tailwind in tailwind.config.js uit met een aangepaste schaduw die een door komma's gescheiden lijst met schaduwdefinities bevat. Zo kun je geavanceerde lagen maken, zoals een verhogingseffect in de stijl van Material Design of een subtiele gloed aan de buitenkant gecombineerd met een bepalende schaduw aan de binnenkant.
/* In tailwind.config.js */
module.exports = {
theme: {
extend: {
boxShadow: {
/* Layered: outer glow + standard shadow */
'glow-blue': '0 0 20px rgba(59,130,246,0.5), 0 4px 6px rgba(0,0,0,0.1)',
/* Material elevation --*/
'material': '0 2px 1px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1), 0 16px 24px rgba(0,0,0,0.06)',
}
}
}
}Schaduwen in de donkere modus
Schaduwen worden minder zichtbaar op donkere achtergronden omdat ze meestal doorschijnend zwart gebruiken. In de donkere modus blijven gekleurde schaduwen van Tailwind — of lichtere schaduwtinten — zichtbaar. Een veelgebruikt patroon is shadow-gray-700/50 in de donkere modus om een zichtbare schaduw tegen een donker oppervlak te creëren. Je kunt op donkere achtergronden ook randen gebruiken in plaats van schaduwen, omdat randen zichtbaar blijven ongeacht de helderheid van de achtergrond.
<!-- Shadow strategies for dark mode -->
<div class="bg-gray-900 p-8 rounded-xl space-y-4">
<!-- Standard shadow (invisible on dark bg) -->
<div class="bg-gray-800 p-4 rounded-lg shadow-xl">
Shadow barely visible
</div>
<!-- Colored shadow for dark mode -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg shadow-gray-700/70">
Shadow visible with colored tint
</div>
<!-- Border instead of shadow on dark bg -->
<div class="bg-gray-800 border border-gray-700 p-4 rounded-lg">
Border as separator on dark backgrounds
</div>
</div>Focus-schaduw voor toegankelijkheid
Zichtbare focusindicatoren zijn vereist volgens de toegankelijkheidsnormen van WCAG 2.1 AA. Hoewel de ring-*-hulpprogramma's van Tailwind de moderne voorkeursmethode zijn, kunnen vlakschaduwen ook als focusindicator dienen. Het patroon focus:shadow-[0_0_0_3px_rgba(59,130,246,0.5)] maakt een blauwe halo — in wezen hetzelfde als ring-2 ring-blue-500, maar met de eigenschap shadow voor compatibiliteit met oudere browsers.
<!-- Accessible focus indicators using shadow and ring -->
<div class="flex gap-4 flex-wrap">
<!-- Using ring (preferred modern approach) -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Ring Focus
</button>
<!-- Using shadow for legacy support -->
<button class="bg-purple-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:shadow-[0_0_0_3px_rgba(168,85,247,0.5)]">
Shadow Focus
</button>
</div>Volledige schaduwhiërarchie
In een echte UI zorgt een consistente toewijzing van schaduwen voor een duidelijke visuele hiërarchie. Gebruik een systematische aanpak: shadow-sm voor subtiele randen bij invoervelden, shadow-md voor inhoudskaarten, shadow-lg voor vervolgkeuzemenu's, shadow-xl voor zijpanelen en shadow-2xl voor modale dialoogvensters. Deze hiërarchie helpt gebruikers ruimtelijke relaties te begrijpen en te zien welke elementen contextueel zijn en welke primair.
<!-- Dashboard showing shadow hierarchy -->
<div class="bg-gray-100 p-6 space-y-4">
<!-- Page-level card: shadow-md -->
<div class="bg-white rounded-xl shadow-md p-5">
<h2 class="font-bold text-lg">Analytics Overview</h2>
<!-- Inline component: shadow-sm -->
<div class="mt-4 grid grid-cols-3 gap-3">
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">142</div>
<div class="text-xs text-gray-500">Users</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">94%</div>
<div class="text-xs text-gray-500">Uptime</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">38</div>
<div class="text-xs text-gray-500">Issues</div>
</div>
</div>
</div>
</div>Korte controle
Test je begrip van de concepten uit deze les over Tailwind CSS Mastery.
Samenvatting van de les
In deze les heb je geleerd dat shadow-sm tot en met shadow-2xl een verhogingsschaal voor diepte bieden, dat shadow-inner een verzonken uiterlijk creëert voor ingedrukte statussen en zoekvelden, en dat gekleurde schaduwen zoals shadow-lg shadow-blue-500/50 gloeiende effecten creëren voor donkere thema's. Hierna bekijken we outline- en ring-hulpprogramma's voor toegankelijke focusindicatoren.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Slagschaduwen” gratis?
Ja — de volledige tekst van “Slagschaduwen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Slagschaduwen”?
Voeg diepte toe met shadow-sm tot en met shadow-2xl, gebruik shadow-inner voor inset-effecten en verwijder schaduwen met shadow-none. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Slagschaduwen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.