Catégories
Astuces et Design

Mélanger les couleurs en CSS pur

Rouge + Bleu = Violet… non?

Existe-t-il un moyen d'exprimer cela en CSS? Eh bien, pas facilement. Il existe un projet de proposition pour un color-mix fonction et un certain degré d'intérêt de Chrome, mais cela ne semble pas juste au coin de la rue. Ce serait bien d'avoir un mélange de couleurs CSS natif, car cela donnerait aux concepteurs une plus grande flexibilité lorsqu'ils travaillent avec des couleurs. Un exemple consiste à créer des variantes teintées d'une seule couleur de base pour former une palette de conception.

Mais ce sont des astuces CSS, alors faisons quelques astuces CSS.

Nous avons un calc() fonction en CSS pour manipuler les nombres. Mais nous avons très peu de façons d'agir directement sur les couleurs, même si certains formats de couleur (par exemple hsl() et rgb()) sont basées sur des valeurs numériques.

Mélanger les couleurs avec l'animation

Nous pouvons passer d'une couleur à une autre en CSS. Cela marche:

div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  background: red; 
}

Et voici cela avec les animations:

div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  animation: change-color 0.2s forwards;
}


@keyframes change-color {
  to {
    background: red;
  }
}

Il s'agit d'une animation d'images clés qui s'exécute à l'infini, où vous pouvez voir la couleur se déplacer entre le rouge et le bleu. Ouvrez la console et cliquez sur la page – vous pouvez voir que même JavaScript peut vous indiquer la couleur actuelle à n'importe quel point exact de l'animation.

Et si nous pause l'animation quelque part au milieu? Le mélange de couleurs fonctionne! Voici une animation en pause qui est 0.5s à travers c'est 1s durée, donc exactement à mi-chemin:

Nous avons accompli cela en définissant un animation-delay de -0.5s. Et quelle couleur est à mi-chemin entre le rouge et le bleu? Violet. On peut ajuster ça animation-delay pour spécifier le pourcentage de deux couleurs.

Cela fonctionne pour les navigateurs principaux de Chromium et Firefox. Dans Safari, vous devez changer le nom de l'animation pour forcer le navigateur à recalculer la progression de l'animation.

Obtenir la couleur mélangée dans une propriété personnalisée CSS

Il s’agit d’une astuce intéressante pour le moment, mais il n’est pas très pratique d’appliquer une animation à un élément sur lequel vous devez utiliser une couleur mixte, puis de définir toutes les propriétés que vous souhaitez modifier dans le @keyframes.

Nous pouvons améliorer cela un peu si nous ajoutons quelques fonctionnalités CSS supplémentaires:

  1. Utiliser un @property propriété personnalisée CSS typée, de sorte qu'elle puisse être créée comme une couleur appropriée, et donc animée comme une couleur.
  2. Utilisez un Sass @function pour appeler facilement des images clés à un moment donné.

Maintenant, nous devons toujours appeler animation, mais le résultat est qu'une propriété personnalisée est modifiée que nous pouvons utiliser sur n'importe quelle autre propriété.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *