Die Macht der rgba()-Farbfunktion in CSS

Eines der Dinge, die mich an CSS wirklich interessieren, ist die neue color-mod Funktion. Sie wird uns die Möglichkeit geben, Farbmanipulationen direkt im Browser durchzuführen. Wenn Sie beispielsweise mit der Maus über einen Button fahren, können Sie die Farbe mit etwas wie color: color(black darkness(50%)); ändern, ohne einen CSS-Präprozessor wie Sass verwenden zu müssen.

Aber da die Unterstützung für diese CSS-Farbfunktionen heutzutage null ist, können wir vorübergehend PostCSS verwenden und sie als normale Farben kompilieren. Oder wir können experimentieren und die Macht der CSS rgba() Farbfunktionen entdecken, um Farben im laufenden Betrieb zu ändern! Sehen wir uns an, wie wir sie verwenden können.

Wie es funktioniert

Wenn wir in einer Designanwendung schwarze und weiße Kästen über einem größeren Kasten mit einer blauen Hintergrundfarbe (wie im Beispiel) platzieren, erhalten wir als Ergebnis ein helleres bzw. dunkleres Blau.

Das liegt daran, dass sich die Farben beim Verringern der Deckkraft vermischen, je nachdem, ob es sich um Weiß oder Schwarz handelt. Können Sie erraten, was passiert, wenn wir den blauen Hintergrund in Grün ändern? Sie haben es erraten!

Wie Sie sehen, sehen die kleinen Kästchen jetzt anders aus, nachdem wir die Hintergrundfarbe in Grün geändert haben! Wir haben helles und dunkles Grün. Wir können auch den Deckkraftwert ändern, um eine dunklere oder hellere Farbe auszuwählen. Lassen Sie uns auf dieser grundlegenden Prämisse aufbauen, um einige reale Beispiele zu untersuchen.

Das Konzept anwenden

Um das obige Beispiel kurz zu halten, haben wir mit der Deckkraft gespielt. In unserem eigentlichen Design müssen wir den rgba() Alpha-Wert verwenden.

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

Wir verwenden hier den Hintergrund anstelle der Deckkraft, denn wenn wir den Deckkraftwert verwenden würden, wären alle Kindelemente betroffen, was nicht das ist, was wir erreichen wollen. Wenn wir den Alpha-Kanal der Hintergrundeigenschaft verwenden, stellen wir sicher, dass wir nur das Element aktualisieren, das wir ändern möchten.

Hinweis: In den Demos verwenden wir die Sass rgba() Funktion, um Dinge zu beschleunigen. Zum Beispiel

.elem {
  background: rgba(white, 0.5);
}

wird übersetzt in

.elem {
  background: rgba(255, 255, 255, 0.5);
}

Ein Webseiten-Header thematisieren

Der erste Anwendungsfall für rgba() ist die Thematisierung eines Web-App-Headers. Bei Trello verwenden sie eine Hintergrundfarbe mit rgba() für die Kindelemente des Headers (Logo, Suchfeld, Schaltflächen)

.search {
  background: rgba(255, 255, 255, 0.5); /* White with 50% alpha */
}

Damit erhalten wir die Möglichkeit, den Header zu thematisieren, indem wir nur seinen Hintergrund ändern, und dann ändern sich auch die Kindelemente.

In unserem Beispiel werden wir etwas Ähnliches wie der Trello-Header machen und mit dem Hintergrund aus den Entwicklertools spielen.

Beachten Sie, wie sich die Hintergrundfarbe der Kindelemente in den beiden Headern unterscheidet. Wenn wir das Element inspizieren und den Hintergrund des Elternteils ändern möchten, können wir unseren Header sehr einfach thematisieren.

Siehe den Pen Header von Ahmad Shadeed (@shadeed) auf CodePen.

Artikel-Header

In diesem Beispiel ist die Verwendung von rgba() für

• Ränder an der oberen und unteren Kante.
• Hintergrundfarbe für den zentrierten Wrapper.
• Hintergrundfarbe für den Kategorie-Link.

.parent {
  background: #5aaf4c; /* parent background */
  box-shadow: 
    inset 0 8px 0 0 rgba(255, 255, 255, 0.5), 
    inset 0 -8px 0 0 rgba(255, 255, 255, 0.5); /* top and bottom borders */
}

.contain {
  background: rgba(0, 0, 0, 0.1);
}

.category {
  background: rgba(255, 255, 255, 0.5);
}

Siehe den Pen Artikel-Header von Ahmad Shadeed (@shadeed) auf CodePen.

Schaltflächen (Buttons)

Beim Thematisieren von Schaltflächen können wir rgba() verwenden, um die Hover- und Fokus-Effekte für Dinge wie Ränder und Schatten zu erzielen.

.button {
  background: #026aa7;
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
}

.button:hover {
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.6), 0 0 8px 0 rgba(0, 0, 0, 0.5);
}

.button:focus {
  box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}

Siehe den Pen Buttons von Ahmad Shadeed (@shadeed) auf CodePen.

Verläufe

Ein weiterer nützlicher Anwendungsfall ist, den Hintergrund als Volltonfarbe zu setzen und dann ein Pseudoelement mit rgba() Farben für die Farbverläufe zu verwenden.

.elem {
  background: green;
}

.elem:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7));
}

Dadurch erhalten wir auch die Möglichkeit, die Farbverläufe zu animieren, indem wir nur die Hintergrundfarbe ändern.

.elem {
  /* other styles */
  animation: bg 2s ease-out alternate infinite;
}

@keyframes bg 
  to {
    background: green;
  }
}

Siehe den Pen Gradients von Ahmad Shadeed (@shadeed) auf CodePen.

Unterelement

Wenn wir eine Navigationsliste in einem Header-Element haben, können wir dem Navigationsbereich eine Hintergrundfarbe mit rgba() hinzufügen. Dies macht den Hintergrund leicht transparent, sodass er sich mit dem Hintergrund des Elternelements vermischt.

Siehe den Pen Sub Element von Ahmad Shadeed (@shadeed) auf CodePen.

Und dasselbe könnte verwendet werden, um dynamische Hover-Effekte zu erzeugen

Siehe den Pen Hover Effect von Ahmad Shadeed (@shadeed) auf CodePen.

Dunkle/helle Variationen einer Farbpalette

Wir können dieses Konzept verwenden, um verschiedene Schattierungen einer bestimmten Farbpalette zu erzeugen, indem wir ein Pseudoelement mit einem bestimmten rgba() Wert auf jeder Farbbox positionieren.

Siehe den Pen Color Palette von Ahmad Shadeed (@shadeed) auf CodePen.

Bildeffekte

Wenn wir ein Bild dunkler oder heller machen möchten, können wir ein Pseudoelement mit rgba() Hintergrund verwenden.

Durch die Verwendung eines farbigen Hintergrunds können wir einen Farbtönungseffekt erzeugen. Außerdem können wir die Eigenschaft mix-blend-mode verwenden, um den Hintergrund mit dem Bild zu mischen, sodass wir unterschiedliche Ergebnisse erzielen.

Es ist wichtig, die Unterstützungstabellen zu prüfen, bevor Sie mix-blend-mode verwenden.

.elem:before {
  background: rgba(0, 0, 0, 1);
  mix-blend-mode: color;
}

Wenn mix-blend-mode nicht unterstützt wird, ist das Bild schwarz und der Benutzer versteht es nicht. Es ist besser, an solchen Effekten als Verbesserung zu arbeiten, aber sich nicht darauf zu verlassen. Dazu können Sie @support oder Modernizr verwenden.

@supports (mix-blend-mode: color) {
  /* your enhanced styles go there */
}

Siehe den Pen Images von Ahmad Shadeed (@shadeed) auf CodePen.

Thematisierung mit CSS-Variablen

Durch die Verwendung von CSS-Variablen (custom properties) für die übergeordneten Elemente werden, wenn die Variable geändert wird, alle untergeordneten Elemente beeinflusst. Zum Beispiel

:root {
  --brand-color: #026aa7;
}

/* Checking for the support of CSS Variables */
@supports (--color: red) {
  .elem {
    background: var(--brand-color);
  }
}

var colors = ["#026aa7", "#5aaf4c", "#00bcd4", "#af4c4c"];
var colorOptions = document.querySelectorAll(".option");
var colorLabels = document.querySelectorAll(".option + label");

for (var i = 0; i < colorOptions.length; i++) {

  /* Add an event listener to each radio button */
  colorOptions[i].addEventListener('click', changeColor);

  /* Add a value to each radio button based on colors[] array */
  colorOptions[i].value = colors[i];

  colorLabels[i].style.background = colors[i];
}

function changeColor(e) {
  /* calling the root element and set the value of a specific property. In our case: --brand-color */
  document.documentElement.style.setProperty('--brand-color', e.target.value);
}

Durch die Kombination von CSS-Variablen und rgba() können wir unsere Layouts und Farben dynamischer gestalten, ohne für jedes Element eine neue Farbe neu definieren zu müssen.

Siehe den Pen Header – CSS Variables von Ahmad Shadeed (@shadeed) auf CodePen.

Dinge, die zu beachten sind

Fallback-Farbe

Obwohl die globale Unterstützung für CSS-Farben bei 97,39% liegt, ist es wichtig, ein Fallback für nicht unterstützende Browser bereitzustellen.

.elem {
  background: #fff; 
  background: rgba(255, 255, 255, 0.5); /* non supporting browsers will ignore this declaration */
}

Farbkontrastprüfung

Wir sollten sicherstellen, dass der Kontrast zwischen den Elementen den Richtlinien zur Barrierefreiheit entspricht. Manchmal kann die Verwendung von rgba() zu einer schlechten Farbe führen, die schwer zu lesen ist. Sie können Werkzeuge wie Lea Verous Contrast Check verwenden, um festzustellen, ob Farben den Zugänglichkeitsstandards entsprechen.