Visuele effecten

Diepte en textuur

• Laag meerdere schaduwen voor realistische, zachte diepte-effecten.
• Gebruik filter: drop-shadow() in plaats van box-shadow voor niet-rechthoekige vormen of transparante png's.
• Gebruik mix-blend-mode en background-blend-mode voor belichtingsoverlays (beperk het bereik met isolation: isolate)

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

Kleurovergangen en color-mix()

Gebruik in oklch of in oklab om de interpolatiekleurruimte voor verlopen of color-mix() expliciet op te geven.

• in oklch behoudt chroma beter, maar kan makkelijker buiten het apparaatbereik vallen, vooral bij grotere verschillen tussen kleuren
• in oklab blijft makkelijker binnen het kleurengamma (uitgaande van eindpunten binnen het kleurengamma), maar kan in het midden fletse, onverzadigde kleuren opleveren, vooral bij interpolatie tussen tegenovergestelde tinten.
• Gebruik GEEN in srgb, tenzij je daar een specifieke reden voor hebt (bijvoorbeeld als je een kleurkiezer maakt die moet interpoleren in srgb).

Reserve

Sommige browsers van vóór 2024 ondersteunen geen interpolatieruimte voor kleurverloop. Als je deze browsers wilt ondersteunen, gebruik je de token alleen als het gebruik ervan veilig is door een variabele te definiëren:

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

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

Gebruik dan:

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

• Belangrijk: Als je deze techniek gebruikt, zorg je dat er altijd een niet-lege inleidende instructies voor het kleurverloop is zonder deze techniek, anders is er een syntaxisfout in oudere browsers.
• Je hebt dit NIET nodig voor color-mix(). Als een browser color-mix() ondersteunt, ondersteunt deze ook het argument in <color-space>.

Patronen

Veel patronen kunnen worden gemaakt via CSS-kleurverlopen en harde stops. Deze kunnen flexibeler en beter presteren dan SVG's of externe afbeeldingen, omdat ze toegang hebben tot CSS-variabelen en -lengtes uit de omringende context. Je hoeft de positie niet 2 keer te herhalen. Gebruik gewoon 0 of 0% en de hersteloptie voor kleurverloop past de positie automatisch aan.

Hieronder staan enkele voorbeelden.

Verticale strepen van elk 1em breed:

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

Diagonale strepen van elk 1em breed:

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

Schaakbordpatroon met 1em vakken:

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

Stippen met een straal van .5em en een tussenruimte van 2em (horizontaal/verticaal, vermenigvuldig met sqrt(2) voor de diagonale afstand):

--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);

Eenvoudig cirkeldiagram:

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

Belangrijk: Als je kleurovergangen gebruikt om diagrammen weer te geven, zorg je dat er een tekstuele fallback is voor schermlezers. VERPLICHT: Je MOET een semantische gegevenstabel aanleveren als toegankelijk alternatief, zoals beschreven in de Richtlijnen voor toegankelijkheidscodering onder de richtlijnen voor alternatieve tekst en media.