Filtereffekte 1.2.0

Sechs neue Utility-Familien, die Filters erweitern — Sättigung, Hue-Rotate, Kontrast, Invert, Sepia und Drop-Shadow — plus erweiterte Backdrop-Helfer und zwei Glass-Composites. English: Filter effects

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Studio und die vollständige Utility Engine bleiben geplant — ausgelieferte Utilities sind unter @layer utilities von Hand geschrieben, kein vollständiger Variantengenerator.

Wann verwenden

Kombiniere Filtereffekt-Utilities für Hero-/Media-Behandlungen, die auf dieser Seite dokumentiert sind.

Wann nicht

Respektiere prefers-reduced-motion, wenn Effekte animieren.

Sättigung

Passe die Farbsättigung an. Nützlich für Hover-Zustände auf Foto-Cards.

`.velin-saturate-0`	filter: saturate(0)
`.velin-saturate-50`	filter: saturate(0.5)
`.velin-saturate-100`	filter: saturate(1)
`.velin-saturate-150`	filter: saturate(1.5)
`.velin-saturate-200`	filter: saturate(2)

Hue-Rotation

.velin-hue-rotate-15 .velin-hue-rotate-30 .velin-hue-rotate-60 .velin-hue-rotate-90 .velin-hue-rotate-180

Kontrast

.velin-contrast-50 .velin-contrast-75 .velin-contrast-100 .velin-contrast-125 .velin-contrast-150

Invertieren & Sepia

`.velin-invert`	filter: invert(1)
`.velin-invert-0`	filter: invert(0)
`.velin-sepia`	filter: sepia(1)
`.velin-sepia-50`	filter: sepia(0.5)
`.velin-sepia-0`	filter: sepia(0)

Drop-Shadow

Zeichne Schatten unter transparenten SVG-/PNG-Inhalten. Anders als box-shadow folgt drop-shadow der Alpha-Maske des Elements.

`.velin-drop-shadow-sm`	Enger Schatten, 1px Offset
`.velin-drop-shadow-md`	Mittlere Card-Erhebung
`.velin-drop-shadow-lg`	Große Hero-Erhebung
`.velin-drop-shadow-glow`	Nutzt `--velin-color-primary` für Accent-Glow

Erweiterter Backdrop

`.velin-backdrop-saturate`	backdrop-filter: saturate(180%)
`.velin-backdrop-brightness-90`	backdrop-filter: brightness(0.9)
`.velin-backdrop-brightness-110`	backdrop-filter: brightness(1.1)
`.velin-backdrop-grayscale`	backdrop-filter: grayscale(1)

Glass-Composites

Zwei opinionated Klassen für frosted Oberflächen wie Sticky Bars, Tooltips und schwebende Cards.

<header class="velin-glass">…</header>
<aside class="velin-glass-strong">…</aside>

Reduzierte Bewegung

Die Klassen .velin-saturate-* und .velin-hue-rotate-* werden unter prefers-reduced-motion: reduce neutralisiert, weil verschobene Farbtöne Nutzer irritieren können, die reduzierte visuelle Reize anfordern.