CSS - Mix Blend Mode: Die Macht der Farbvermischung entfesseln

Hallo, ambitionierte Webdesigner und CSS-Enthusiasten! Heute tauchen wir ein in die faszinierende Welt der CSS mix-blend-mode. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, Sie auf dieser bunten Reise zu führen. Also, holt Euch Eure virtuellen Pinsel und lasst uns mischen!

Was ist mix-blend-mode?

Bevor wir uns in die technischen Details stürzen, lassen Sie uns verstehen, was mix-blend-mode eigentlich ist. Stellen Sie sich vor, Sie sind ein digitaler Künstler mit einem magischen Pinsel, der Farben auf eine Weise mischen kann, die Sie noch nie gesehen haben. Das ist im Wesentlichen, was mix-blend-mode für uns in CSS macht!

mix-blend-mode ist eine CSS-Eigenschaft, die festlegt, wie der Inhalt eines Elements mit dem Inhalt seines übergeordneten Elements und dem Hintergrund des Elements gemischt werden soll. Es ist, als hätte man eine spezielle Brille, die es einem ermöglicht, die Welt in einem helt neuen Licht – oder in diesem Fall, in helt neuen Farbkombinationen – zu sehen!

Mögliche Werte

Nun schauen wir uns die verschiedenen Blend-Modi an, die uns zur Verfügung stehen. Denken Sie daran als verschiedene Pinsel in Ihrem digitalen Kunstwerkzeugkasten:

Blend-Modus	Beschreibung
normal	Der Standardmodus. Keine Mischung wird angewendet.
multiply	Multipliziert die Farben, was zu einem dunkleren Bild führt.
screen	Multipliziert die Inverse der Farben, was zu einem helleren Bild führt.
overlay	Kombiniert die Modi multiply und screen.
darken	Wählt die dunklere der Misch- und Basisfarben aus.
lighten	Wählt die hellere der Misch- und Basisfarben aus.
color-dodge	Erhellt die Basisfarbe, um die Mischfarbe zu reflektieren.
color-burn	Verdunkelt die Basisfarbe, um die Mischfarbe zu reflektieren.
hard-light	Multipliziert oder blendet die Farben abhängig von der Mischfarbe.
soft-light	Verdunkelt oder erhellt die Farben abhängig von der Mischfarbe.
difference	Subtrahiert die dunklere der beiden Farben von der helleren Farbe.
exclusion	Ähnlich wie difference, aber mit geringerem Kontrast.
hue	Verwendet die Farbton der Mischfarbe mit der Sättigung und Helligkeit der Basisfarbe.
saturation	Verwendet die Sättigung der Mischfarbe mit dem Farbton und der Helligkeit der Basisfarbe.
color	Verwendet den Farbton und die Sättigung der Mischfarbe mit der Helligkeit der Basisfarbe.
luminosity	Verwendet die Helligkeit der Mischfarbe mit dem Farbton und der Sättigung der Basisfarbe.

Anwendungsbereich

Die Eigenschaft mix-blend-mode kann auf jedes Element angewendet werden. Sie wird jedoch am häufigsten mit Bildern, Text und SVG-Elementen verwendet. Es ist wie ein Schweizer Taschenmesser des Designs – vielseitig und bereit für jede kreative Herausforderung!

Syntax

Die Syntax für mix-blend-mode ist erfrischend einfach:

element {
mix-blend-mode: <blend-mode>;
}

Wo <blend-mode> einer der Werte aus unserer Tabelle oben ist. Einfach peasy, Zitronensaft pressen!

CSS mix-blend-mode - Verschiedene mix-blend-mode Werte

Lassen Sie uns mit einigen Codebeispielen die Hände schmutzig machen. Wir beginnen mit einem einfachen Szenario: das Mischen von zwei überlappenden div-Elementen.

<div class="container">
<div class="box red"></div>
<div class="box blue"></div>
</div>

.container {
position: relative;
width: 200px;
height: 200px;
}

.box {
position: absolute;
width: 100px;
height: 100px;
}

.red {
background-color: red;
top: 0;
left: 0;
}

.blue {
background-color: blue;
top: 50px;
left: 50px;
mix-blend-mode: screen;
}

In diesem Beispiel haben wir zwei Kästchen: eines rot und eines blau. Das blaue Kästchen befindet sich über dem roten Kästchen und hat eine mix-blend-mode von 'screen'. Dies erzeugt eine hellere Farbe, wo die Kästchen überlappen.

Versuchen Sie, die mix-blend-mode in verschiedene Werte aus unserer Tabelle zu ändern und beobachten Sie, wie sich das Ergebnis ändert. Es ist wie ein buntes Wissenschaftsexperiment!

CSS mix-blend-mode - Mit HTML

Nun sehen wir, wie mix-blend-mode mit HTML-Elementen funktioniert. Wir erstellen ein einfaches Beispiel mit Text über einem Bild.

<div class="image-container">
<img src="landscape.jpg" alt="Schöne Landschaft">
<h1>Hallo, Welt!</h1>
</div>

.image-container {
position: relative;
}

.image-container img {
width: 100%;
height: auto;
}

.image-container h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
mix-blend-mode: difference;
}

In diesem Beispiel haben wir weißen Text über einem Bild. Durch das Setzen der mix-blend-mode auf 'difference' wird die Textfarbe basierend auf den darunter liegenden Bildfarben geändert, was einen auffälligen Effekt erzeugt.

CSS mix-blend-mode - Mit SVG

SVG-Elemente können ebenfalls von mix-blend-mode profitieren. Lassen Sie uns ein einfaches Beispiel mit überlappenden SVG-Kreisen erstellen.

<svg width="200" height="200">
<circle cx="70" cy="70" r="60" fill="red" />
<circle cx="130" cy="130" r="60" fill="blue" mix-blend-mode="multiply" />
</svg>

In diesem SVG haben wir zwei Kreise: einen rot und einen blau. Der blaue Kreis hat eine mix-blend-mode von 'multiply', was die überlappende Fläche dunkler macht.

CSS mix-blend-mode - Mit Text

Finally, let's have some fun with text! We'll create a colorful text effect using mix-blend-mode.

<div class="text-container">
<h1>CSS is Awesome!</h1>
</div>

.text-container {
background: linear-gradient(to right, red, blue);
padding: 20px;
}

.text-container h1 {
font-size: 48px;
color: white;
mix-blend-mode: difference;
}

Dies erzeugt einen lebhaften Texteffekt, bei dem die Textfarbe basierend auf dem Hintergrundverlauf ändert.

Und das war's, Leute! Wir haben die magische Welt der CSS mix-blend-mode erkundet. Denken Sie daran, der Schlüssel zum Beherrschen dieser Eigenschaft ist das Experimentieren. Haben Sie keine Angst, verschiedene Blend-Modi auszuprobieren und zu sehen, welche erstaunlichen Effekte Sie erstellen können.

Als wir diese farbenfrohe Reise beenden, erinnere ich mich an ein Zitat des berühmten Malers Bob Ross: "Es gibt keine Fehler, nur glückliche Unfälle." Also, wagen Sie sich vor, mischen Sie mutig und erstellen Sie Ihre eigenen glücklichen Unfälle mit CSS mix-blend-mode!

Credits: Image by storyset