Beispiele für CSS3-Blendmodi: Muster mit Farbverläufen und Blendmodi

Muster

Es gibt verschiedene schöne Einsatzbeispiele für die Blendmodi. Faszinierend ist die Möglichkeit für Muster, die sich aus der Kombination von Farbverläufen mit Blendmodi ergibt.

Aber von Anfang an: Mit Farbverläufen kann man Muster erzeugen. Die Effekte, die sich damit erzielen lassen, sind unglaublich – Lea Verou hat besonders gelungene gesammelt. Durch die Kombination mit Blendmodi ergeben sich eine Fülle an neuen Möglichkeiten.

Das Grundprinzip ist folgendermaßen: Zuerst erzeugt man ein Muster über Farbverläufe. Ein ganz einfaches kann so aussehen, dass man zwei Kreise zeichnet (auf die Dopplung mit -webkit- verzichte ich der Kürze halber):

background-image: background-image:
radial-gradient(blue 60%,transparent 60%),
radial-gradient(red 60%,transparent 60%)
;

Da die Farbe blue genauso wie die Farbe transparent bei 60% beginnt, haben wir beim ersten Hintergrundbild keinen Farbverlauf, sondern einen harten Übergang; genauso beim zweiten Hintergrund mit red und transparent (mehr zu harten Übergängen bei Farbverlaufen auch hier). Dann wird noch die Größe des Hintersgrundbilds und die Position festgelegt:

background-size: 4em 4em;
background-position: 0 0, 2em 1em;

Das Ergebnis sieht dann folgendermaßen aus:

Muster aus roten und blauen Kreisen

Jetzt kann man zusätzlich noch einen Blendmodus für den Hintergrund bestimmen (mehr zur Eigenschaft background-blend-mode sowie zur Browserunterstützung in meiner kleinen Einführung):

background-blend-mode: multiply;

Sich überblendende rote und blaue Kreise

Natürlich lassen sich auch Transparenzen auch mit rgba() erzeugen – aber dann ist die Farbe an sich natürlich leicht durchsichtig. Das Beispiel ohne background-blend-mode, aber mit halbtransparente rgba()-Werten anstelle von blue und red sieht folgendermaßen aus:

Rote und blaue halbtransparente Kreise

die Listings zu den Mustern mit und ohne background-blend-mode zum Online-Ausprobieren

Sehr schöne Beispiele für Muster durch Farbverläufe und Blendmodi hat http://bennettfeely.com/gradients/ gesammelt. Er führt bei einzelnen Beispielen auch den Performance-Gewinn auf, indem er die Größe des ansonsten benötigten Hintergrundbilds mit der Dateigröße des CSS-Codes vergleicht.

Die eine Sache ist die Dateigröße, die andere Sache, die man aber wahrscheinlich ebenfalls in Betracht ziehen muss, ist der Aufwand beim Rendering. Für einen Browser ist es sicherlich aufwändiger, einen Hintergrund mit Farbverläufen und Blendmodi darzustellen, als einfach ein Hintergrundbild zu zeigen. Wie sich das auswirkt, wäre gerade interessant bei Browsern auf mobilen Geräten.

Hierzu ein kleines Zitat von trac.webkit.org, das sich allerdings nur auf Farbverläufe bezieht:

Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) – otherwise, static images are always faster. https://trac.webkit.org/

Auf Blendmodi übertragen würde das heißen, dass man diese wie andere Effekte immer dann einsetzen sollte, wenn das Ganze sich dynamisch mischen soll mit unterschiedlichen Ergebnissen je nach Situation (wie Größe des Viewports etc.), ansonsten sind statische Bilder besser. Allerdings haben Farbverläufe und Blendmodi und Co. gegenüber statischen Bildern einen weiteren Vorteil: Sie skalieren besser, d.h. müssen nicht eigens für hochauflösende Screens optimiert werden.

 

Kommentare sind geschlossen.