Effets visuels

Profondeur et texture

• Superposez plusieurs ombres pour obtenir des effets de profondeur réalistes et doux.
• Utilisez filter: drop-shadow() au lieu de box-shadow pour les formes non rectangulaires ou les PNG transparents.
• Utilisez mix-blend-mode et background-blend-mode pour les superpositions d'éclairage (limitez le champ d'application avec isolation: isolate).

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

Gradients et color-mix()

Utilisez in oklch ou in oklab pour spécifier explicitement l'espace colorimétrique d'interpolation pour les dégradés ou color-mix().

• in oklch préserve mieux la chrominance, mais peut plus facilement sortir de la gamme de l'appareil, en particulier pour les différences de couleur plus importantes.
• in oklab reste plus facilement dans la gamme (en supposant des points de terminaison dans la gamme), mais peut créer des couleurs désaturées et délavées au milieu, en particulier lors de l'interpolation entre des teintes opposées.
• N'UTILISEZ PAS in srgb, sauf si vous avez une raison spécifique de le faire (par exemple, si vous créez un sélecteur de couleur qui doit interpoler en sRGB).

Action de remplacement

Certains navigateurs antérieurs à 2024 ne sont pas compatibles avec l'espace d'interpolation des couleurs de dégradé. Pour prendre en charge ces navigateurs, n'utilisez le jeton que lorsque son utilisation est sécurisée en définissant une variable :

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

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

Ensuite, utilisez-le comme suit :

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

• Important : Si vous utilisez cette technique, assurez-vous qu'il existe toujours un préambule de dégradé non vide sans elle, sinon une erreur de syntaxe se produira dans les anciens navigateurs.
• Vous n'en avez PAS besoin pour color-mix(). Si un navigateur est compatible avec color-mix(), il est également compatible avec son argument in <color-space>.

Motifs

De nombreux motifs peuvent être créés à l'aide de dégradés CSS et de points d'arrêt fixes. Ils peuvent être plus flexibles et plus performants que les SVG ou les images externes, car ils peuvent accéder aux variables et aux longueurs CSS du contexte environnant. Vous n'avez pas besoin de répéter la position deux fois. Il vous suffit d'utiliser 0 ou 0%, et la correction du dégradé l'ajustera automatiquement.

Voici quelques exemples.

Bandes verticales de 1em de largeur chacune :

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

Bandes en diagonale de 1em de largeur chacune :

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

Motif en damier avec 1em carrés :

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

Motif à pois avec des points de rayon .5em espacés de 2em (horizontalement/verticalement ; multiplier par sqrt(2) pour la distance diagonale) :

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

Graphique à secteurs simple :

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

Important : Lorsque vous utilisez des dégradés pour afficher des graphiques, assurez-vous qu'il existe une solution de remplacement textuelle pour les lecteurs d'écran. OBLIGATOIRE : Vous DEVEZ fournir un tableau de données sémantiques comme alternative accessible, comme indiqué dans les Consignes de codage pour l'accessibilité, sous les consignes concernant le texte alternatif et les contenus multimédias.