Farbe Alpha Überall

In meinem Artikel „Verschiedene Grade der Nutzung von benutzerdefinierten Eigenschaften“ habe ich eine Situation mit Farben und CSS-benutzerdefinierten Eigenschaften angesprochen, in der ich mit dem Aufbrechen von HSL-Farbwerten „zu weit gegangen“ bin. Jeden einzelnen Farbwert in seine H-, S- und L-Teile aufzubrechen, ist vielleicht ein Schritt zu weit.

Aber wahrscheinlich möchten Sie es so aufteilen

html {
  --color-1-hsl: 200deg 15% 73%;
  --color-1: hsl(var(--color-1-hsl));
}

Also, zwei benutzerdefinierte Eigenschaften pro Farbe in Ihrem Farbsystem. Warum? Weil Sie jetzt eine wirklich einfache Möglichkeit haben, es zu verwenden, *und* Sie haben eine Möglichkeit, Alpha auf die Farbe anzuwenden, wenn Sie möchten.

.card {
  background: var(--color-1);
}
.card-with-alpha {
  background: hsl(var(--color-1-hsl) / 0.5);
}

Es gibt eigentlich keinen anderen Weg, eine vorhandene Farbe in CSS zu nehmen und Transparenz mit Alpha darauf anzuwenden. Nun, das sage ich, aber tatsächlich…

/* Future CSS! (works in Safari TP right now) */
.card-with-alpha {
  background: hsl(from var(--color-1) h s l / 0.5);
}

Das ist nett, aber ich bin mir nicht ganz sicher, wann wir uns darauf im produktiven Einsatz verlassen können.

Wissen Sie, was wir auch nicht für etwas super Wichtiges im produktiven Einsatz verwenden können? Houdini Paint Worklets. Noch keine Firefox- oder Safari-Unterstützung dafür.

Eine Enttäuschung, denn Dave hatte dieses Ding fast geknackt! Die Erkenntnis hier ist, dass Houdini Paint Worklets im Grunde ein Bild zurückgeben, das Sie mit <canvas>-APIs malen. Sie können ein Rechteck in Canvas mit jedem Farbformat malen, dann die globalAlpha setzen, das als Bild zurückgeben und das schaltet im Grunde Alpha für jedes Farbformat frei! Es funktioniert (in Chrome)

Dave hat den Code auf GitHub hochgeladen und darüber gebloggt. Natürlich gab es auch ein gutes Video dazu

Liken und abonnieren.

Aber wenn Sie ein System wie dieses im produktiven Einsatz benötigen, machen Sie einfach die benutzerdefinierte Eigenschaftstechnik, die ich zuerst erwähnt habe.

Eine frühere Version dieses Posts wurde per Tweet-Bombing überflutet, aber ich blogge ihn hier, weil echte Blogger bloggen.

Kommentare

diondiondion

# 15. November 2021

Ich war überrascht, keine Erwähnung der Funktion color-mod() zu sehen, die in CSS kommen sollte.

Also habe ich nachgeschaut und erfahren, dass sie aus der CSS Color Level 4 Spezifikation entfernt wurde. :-(

Das hätte es viel einfacher gemacht, Transparenz oder andere Anpassungen an jeder vorhandenen Farbe anzuwenden.

Es ist eines meiner am meisten erwarteten CSS-Features, ich hoffe, es findet bald wieder seinen Weg zurück in die Spezifikationen.

Aber bis dahin wird der Workaround hsl(from ...) auch funktionieren, schätze ich.

Antworten

Chris Coyier

Permalink zum Kommentar# 16. November 2021

Das hätte es viel einfacher gemacht, Transparenz oder andere Anpassungen an jeder vorhandenen Farbe anzuwenden.

Ich denke, die Stimmung ist, dass die from ... Syntax das tun kann, was color-mod() konnte, aber flexibler ist? Bin mir nicht sicher.

Kaspars Z

# 16. November 2021

Sie können auch rgba verwenden, um Alpha anzuwenden, und es funktioniert in allen modernen Browsern.

:root {
    --color-rgb: 255 122 24;
}

.element {
    background: rgba(var(--color-rgb), 0.25);
}

Natürlich ist es nicht bequem, Farben auf diese Weise in CSS zu schreiben, aber wenn Sie SASS verwenden, können Sie die Farbe mit folgenden Mitteln in ihre Komponenten aufteilen:

$color: #ff7a18;

:root {
    --color-rgb: #{ red($color) } #{ green($color) } #{ blue($color) };
}

.element {
    background: rgba(var(--color-rgb), 0.25);
}

Antworten

Glenn

Permalink zum Kommentar# 16. November 2021
Ich bin hierher gekommen, um das zu erwähnen. Wenn wir den SASS-Weg gehen, kann das oben zu folgendem vereinfacht werden:
```
$color: $ff7a18;
.element {
  background: rgba($color, 0.25);
}
```
Wir verwenden dieses Muster auf vielen Websites. Es wäre ein wenig seltsam für mich, Variablen so zu mischen, aber ich schätze, wenn Sie den Wert von --color-rgb im laufenden Betrieb ändern wollten, könnte das ein nützlicher Anwendungsfall sein.

Joy

# 17. November 2021

Wenn Sie es nur für Hintergründe verwenden, können Sie einen Farbverlauf mit Transparenz erstellen, um Transparenz auf eine Farbe anzuwenden. Der Trick ist, die Farbverlaufslinie sehr weit zu verlängern.

Angenommen, Sie möchten 0,25 Alpha oben und 0,35 unten. Das ist eine Änderung von 0,1 im sichtbaren Bereich des Farbverlaufs, der syntaktisch durch 100% bezeichnet wird. Die gesamte Farbverlaufslinie wäre
100/x = 0,1 also x=1000
Das gibt Ihnen
background: linear-gradient(to bottom, transparent -250%, var(--color-rgb) 650%);
die gesamte Farbverlaufslinie ist also 1000, aber Sie sehen nur von 0 bis 100. Es ist, als ob Sie die Box "0 bis 100" in den richtigen Teil des Ganzen verschieben, um das gewünschte Alpha zu erhalten.

Antworten

Kommentare

Antwort hinterlassen Antwort abbrechen