Visuelle Effekte

Tiefe und Textur

• Mehrere Schattenebenen für realistische weiche Tiefeneffekte.
• Verwenden Sie filter: drop-shadow() anstelle von box-shadow für nicht rechteckige Formen oder transparente PNGs.
• mix-blend-mode und background-blend-mode für Beleuchtungs-Overlays verwenden (Umfang mit isolation: isolate einschränken)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Farbverläufe und color-mix()

Verwenden Sie in oklch oder in oklab, um den Interpolationsfarbraum für Farbverläufe oder color-mix() explizit anzugeben.

• in oklch erhält die Chroma besser, kann aber leichter den Farbraum des Geräts verlassen, insbesondere bei größeren Farbunterschieden.
• in oklab bleibt leichter im Farbraum (vorausgesetzt, die Endpunkte liegen im Farbraum), kann aber in der Mitte verwaschene, entsättigte Farben erzeugen, insbesondere bei der Interpolation zwischen entgegengesetzten Farbtönen.
• Verwenden Sie in srgb NICHT, es sei denn, Sie haben einen bestimmten Grund dafür (z.B. wenn Sie eine Farbauswahl erstellen, die in sRGB interpoliert werden muss).

Fallback

Einige Browser, die vor 2024 veröffentlicht wurden, unterstützen den Interpolationsraum für Farbverläufe nicht. Wenn Sie diese Browser unterstützen möchten, verwenden Sie das Token nur, wenn es sicher ist. Definieren Sie dazu eine Variable:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

Dann so verwenden:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• Wichtig: Wenn Sie diese Technik verwenden, achten Sie darauf, dass immer eine nicht leere Präambel für den Farbverlauf vorhanden ist. Andernfalls tritt in älteren Browsern ein Syntaxfehler auf.
• Für color-mix() ist dies NICHT erforderlich. Wenn ein Browser color-mix() unterstützt, unterstützt er auch das Argument in <color-space>.

Muster

Viele Muster können über CSS-Verläufe und harte Stopps erstellt werden. Diese können flexibler und leistungsfähiger als SVGs oder externe Bilder sein, da sie Zugriff auf CSS-Variablen und -Längen aus dem umgebenden Kontext haben können. Sie müssen die Position nicht zweimal angeben – verwenden Sie einfach 0 oder 0%. Die Gradientenkorrektur passt sie dann automatisch an.

Beispiele finden Sie unten.

Vertikale Streifen mit einer Breite von jeweils 1em:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

Diagonale Streifen mit einer Breite von jeweils 1em:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

Schachbrettmuster mit 1em Quadraten:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

Polka-Dot-Muster mit Punkten mit einem Radius von .5em und einem Abstand von 2em (horizontal/vertikal – für den diagonalen Abstand mit sqrt(2) multiplizieren):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

Einfaches Kreisdiagramm:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

Wichtig: Wenn Sie Farbverläufe zum Rendern von Diagrammen verwenden, müssen Sie einen Text-Fallback für Screenreader bereitstellen. OBLIGATORISCH: Sie MÜSSEN eine semantische Datentabelle als barrierefreie Alternative bereitstellen, wie in den Richtlinien für barrierefreien Code unter den Richtlinien für Alternativtext und Medien beschrieben.