Farbmischung in reinem CSS

Rot + Blau = Lila ... richtig?

Gibt es eine Möglichkeit, das in CSS auszudrücken? Nun, nicht einfach. Es gibt einen Entwurf für eine color-mix Funktion und ein gewisses Interesse von Chrome, aber es scheint nicht unmittelbar bevorzustehen. Es wäre schön, native CSS-Farbmischung zu haben, da dies den Designern mehr Flexibilität bei der Arbeit mit Farben geben würde. Ein Beispiel ist die Erstellung von getönten Varianten einer einzigen Basisfarbe zur Bildung einer Designpalette.

Aber das hier ist CSS-Tricks, also machen wir ein paar CSS-Tricks.

Wir haben eine calc() Funktion in CSS zum Manipulieren von Zahlen. Aber wir haben nur sehr wenige Möglichkeiten, direkt mit Farben zu arbeiten, auch wenn einige Farbformate (z. B. hsl() und rgb()) auf numerischen Werten basieren.

Farben mit Animation mischen

Wir können in CSS von einer Farbe zu einer anderen überblenden. Das funktioniert

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

Und hier ist das mit Animationen

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


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

Das ist eine Keyframe-Animation, die unendlich läuft, bei der man die Farbe zwischen Rot und Blau wandern sehen kann. Öffnen Sie die Konsole und klicken Sie auf die Seite – Sie können sehen, dass selbst JavaScript Ihnen die aktuelle Farbe zu jedem exakten Zeitpunkt der Animation mitteilen kann.

Was passiert, wenn wir die Animation irgendwo in der Mitte *pausieren*? Farbmischung funktioniert! Hier ist eine pausierte Animation, die sich 0,5s von ihrer 1s Dauer befindet, also genau auf halbem Weg.

Das haben wir erreicht, indem wir eine animation-delay von -0,5s gesetzt haben. Und welche Farbe ist halbwegs zwischen Rot und Blau? Lila. Wir können diese animation-delay anpassen, um den Prozentsatz von zwei Farben anzugeben.

Das funktioniert für Chromium-basierte Browser und Firefox. In Safari müssen Sie den `animation-name` ändern, um den Browser zu zwingen, den Animationsfortschritt neu zu berechnen.

Dieser Trick kann auch verwendet werden, um einer Farbe einen Alpha-Kanal hinzuzufügen, was typischerweise für das Theming nützlich ist.

Die gemischte Farbe in eine CSS-Benutzerdefinierte Eigenschaft erhalten

Das ist bisher ein cooler Trick, aber es ist nicht sehr praktisch, eine Animation auf jedes Element anzuwenden, auf das Sie eine gemischte Farbe anwenden möchten, und dann alle Eigenschaften, die Sie ändern möchten, innerhalb der @keyframes festlegen zu müssen.

Wir können das ein kleines bisschen verbessern, wenn wir ein paar weitere CSS-Features hinzufügen.

1. Verwenden Sie eine @property typisierte CSS-Benutzerdefinierte Eigenschaft, damit sie als richtige Farbe erstellt werden kann und somit als Farbe animiert werden kann.
2. Verwenden Sie eine Sass @function, um Keyframes einfach an einem bestimmten Punkt aufzurufen.

Jetzt müssen wir immer noch die Animation aufrufen, aber das Ergebnis ist, dass eine Benutzerdefinierte Eigenschaft geändert wird, die wir für jede andere Eigenschaft verwenden können.