Effects
Visuele effecten zoals shadows, border radius en transities voor depth en interactie.
Shadows
Box shadows voor visuele hiërarchie en elevatie effecten.
--shadow-sm Subtiele elevatie
0 1px 2px 0 rgba(42, 45, 49, 0.05)--shadow-md Cards, dropdowns
0 2px 8px 0 rgba(42, 45, 49, 0.06)--shadow-lg Modals, popovers
0 4px 16px 0 rgba(42, 45, 49, 0.08)--shadow-xl Floating elements
0 8px 24px 0 rgba(42, 45, 49, 0.12)Border Radius
Consistente afrondingen voor een samenhangende look.
--radius-none 0 Geen afronding
--radius-sm 4px Tags, badges
--radius-md 6px Inputs, kleine knoppen
--radius-lg 8px Cards, containers
--radius-xl 12px Grote cards, modals
--radius-2xl 16px Hero secties
--radius-full 9999px Pills, avatars
Border Width
Lijndikte voor borders en dividers.
--border-width-none 0 --border-width-thin 1px --border-width-medium 2px --border-width-thick 4px Transitions
Timing functies voor vloeiende state changes.
--transition-fast 150ms ease Hover states
--transition-normal 200ms ease Standaard interacties
--transition-slow 300ms ease Complexe animaties
Effects in actie
Zo werken shadows, radius en transities samen in een component.
Default State
shadow-sm, radius-lg
Hover State
shadow-lg, radius-lg, transform
Elevated
shadow-xl, radius-xl
Best Practices
Subtiele shadows
Gebruik shadows spaarzaam. Subtiele elevatie (shadow-sm, shadow-md) is vaak voldoende. Reserveer grotere shadows voor belangrijke elementen.
Consistente radius
Gebruik dezelfde border-radius binnen een component groep. Meng niet verschillende radii in aangrenzende elementen.
Snelle transities
Houd transities kort (150-200ms) voor interactie feedback. Langzamere animaties voelen traag aan voor de gebruiker.