So verwenden Sie CSS-Filter und Mischmodi zum Erstellen visueller Effekte

Mit den CSS-Filter- und Mischmodi können Sie ganz einfach visuelle Effekte auf Ihre Webseite anwenden. Filter sind eine Reihe vordefinierter CSS-Funktionen, mit denen die Darstellung von Bildern oder anderen HTML-Elementen angepasst wird. Während Mischmodi bestimmen, wie ein Element mit seinem Hintergrund oder benachbarten Elementen verschmelzen soll.

Verwenden von CSS-Filtern

Sie wenden CSS-Filter mit an Filter -Eigenschaft und eine Eigenschaft, die den angewendeten Effekttyp angibt. Jede Filtereigenschaft ist eine CSS-Funktion funktioniert ähnlich wie eine CSS-Variable Funktion. Es akzeptiert einen Parameter, um anzugeben, wie stark sich der Filter auf das gestaltete Element auswirken soll.

Es stehen 10 CSS-Filterfunktionen zum Gestalten Ihres HTML-Elements zur Verfügung:

• verwischen()
• Helligkeit()
• Kontrast()
• Schlagschatten()
• Graustufen()
• hue-rotate()
• umkehren()
• Opazität()
• sättigen()
• Sepia()

Sie können diese Filter einzeln oder in Kombination verwenden, um einzigartige Stile zu erstellen und das Erscheinungsbild Ihrer HTML-Elemente zu verbessern.

Einige dieser Filter funktionieren bei richtiger Anwendung viel besser mit anderen.

Hier finden Sie Beispiele für die Kombination von CSS-Filtern, um unterschiedliche visuelle Effekte auf einem Bildelement zu erzielen.

1. Graustufen und Sepia

Der Graustufen() Der Filter entfernt alle Farbinformationen aus einem Bild oder Textelement. Der Filter nimmt einen Wert zwischen 0 und 1 an, wobei 0 die Originalfarbe und 1 den vollständigen Graustufeneffekt bedeutet.

Der Sepia() Der Filter wendet einen Sepia-Effekt auf ein Bild oder Textelement an. Der Filter nimmt ebenfalls einen Wert zwischen 0 und 1 an.

Zum Beispiel:

Bild {
Filter: Graustufen(14%) Sepia(30%);
}

Kombinieren Graustufen() bei 14 % und Sepia() Bei 30 % kann Ihrem Bild ein Vintage- oder Retro-Effekt verliehen werden.

2. Invertieren und sättigen

Der sättigen() Der Filter erhöht oder verringert die Sättigung eines Bild- oder Textelements. Der Filter nimmt einen Wert zwischen 0 und unendlich an, wobei 1 die Originalfarbe ist und höhere Werte die Sättigung erhöhen.

Der umkehren() Der Filter invertiert die Farben eines Bildes oder Textelements, indem er den Farbton jeder vorhandenen Farbe im Farbkreis um 180 Grad dreht. Das bedeutet, dass der Filter die Helligkeit und Sättigung des Elements ändert und gleichzeitig den Farbton beibehält.

Zum Beispiel:

Bild {
Filter: umkehren(30%) sättigen(75%);
}

Dieser Code invertiert die Farben des Bildes und erhöht die Sättigung um 75 %.

3. Farbton-Rotation und Kontrast

Der hue-rotate() Der Filter dreht die Farbtöne eines Bild- oder Textelements, was bedeutet, dass er die Gesamtfarbe des Elements ändert und gleichzeitig die Helligkeits- und Sättigungsniveaus beibehält. Der Grad der Drehung kann in Grad angegeben werden, wobei 0 die ursprüngliche Farbe und 360 eine vollständige Drehung zurück zur ursprünglichen Farbe darstellt.

Kombinieren der hue-rotate() Und Kontrast() Filter können Ihren Bildern einen lebendigen und farbenfrohen Effekt verleihen.

Zum Beispiel:

Bild {
Filter: Farbton-drehen(10Grad) Kontrast(150%);
}

„Hue-rotate“ kann einen Wert von annehmen Grad, grad, rad, oder drehen. Der obige Code dreht den Farbton des Bildes um 10 Grad und erhöht den Kontrast.

4. Helligkeit und Unschärfe

Die Helligkeits- und Unschärfefilter sind weitgehend selbsterklärend. Mit dem ersten wird die Helligkeit Ihres Bildes angepasst, mit dem zweiten wird der Grad der angewendeten Unschärfe gesteuert.

Kombinieren der Helligkeit() Und verwischen() Filter können Ihren Bildern einen verträumten und sanften Effekt verleihen.

Zum Beispiel:

Bild {
Filter: Helligkeit(0.8) verwischen(5px);
}

Der obige Code verringert die Helligkeit um 0.8 (80%) und gilt a 5px Unschärfeeffekt auf das Bild.

5. Schlagschatten und Deckkraft

Ein Schlagschatteneffekt ist ein visueller Effekt, bei dem ein Element einen Schatten auf die Oberfläche dahinter zu werfen scheint, wodurch die Illusion von Tiefe und Dimensionalität entsteht. Schlagschatten werden oft auf Text oder Bilder angewendet, um eine Trennung zwischen dem Element und dem Hintergrund zu erzeugen.

Unterdessen steuert der Opazitätsfilter die Transparenz eines Elements.

Kombinieren der Schlagschatten() Und Opazität() Filter können einen subtilen Effekt auf Ihre Textelemente erzeugen.

Zum Beispiel:

.Texteffekt {
verwandeln: übersetzen(-50%, -50%);
Farbe: Schwarz;
Schlagschatten: 10px 9px 9pxBeige;
Opazität: 70%;
}

In diesem Beispiel ist der Schlagschatten 10 Pixel rechts und 9 Pixel unten positioniert, mit einem Unschärferadius von 9 Pixeln. Die Schattenfarbe wird als Beige angegeben. Außerdem ist eine Deckkraft von 70 % vorgegeben.

Verwenden von CSS-Mischmodi

CSS-Mischmodi steuern, wie der Inhalt eines Elements mit dem Hintergrund oder anderen Elementen verschmilzt, und ermöglichen so kreative Kompositionseffekte.

Zu den beliebtesten Anwendungsfällen für CSS-Mischmodi gehören:

• Farbverläufe erstellen: Mischmodi können zum Erstellen verwendet werden mehrere CSS-Hintergrundverläufe Dieser Übergang zwischen den Farben bietet Ihnen eine einfache und effiziente Möglichkeit, Ihren Designs Tiefe und Dimension zu verleihen.
• Textur hinzufügen: Sie können Mischmodi auch verwenden, um Hintergründen, Bildern und anderen Elementen auf einer Seite Textur hinzuzufügen. Dies kann eine großartige Möglichkeit sein, einen einzigartigen Look zu schaffen und ansonsten schlichten Elementen visuelles Interesse zu verleihen.
• Farben anpassen: Mit Mischmodi können Sie die Farben von Elementen auf einer Seite anpassen, einschließlich Hintergrundfarben anpassen. Dadurch können Sie ganz einfach Effekte wie Farbüberlagerungen oder getönte Bilder erstellen.

Die beiden häufigsten Mischmodi sind Hintergrund-Mischmodus Und Mix-Misch-Modus. Beide Eigenschaften haben die gleichen 15 Werte: Normal, Multiplizieren, Bildschirm, Überlagerung, Abdunkeln, Aufhellen, Farbabweichung, Sättigung, Farbverbrennung, Leuchtkraft, Differenz, hartes Licht, weiches Licht, Ausschluss und Farbton.

Du solltest benutzen Hintergrund-Mischmodus wenn Sie über mehrere Hintergrundlayouts verfügen, z. B. Hintergrundbilder auf einem Element, und diese alle ineinander übergehen sollen.

Sie können auch die verwenden Mix-Misch-Modus um den Inhalt eines bestimmten Elements mit dem Inhalt seines direkten übergeordneten Elements zu vermischen. Der Mix-Misch-Modus wird normalerweise zum Mischen von Vordergrundinhalten wie Text, Formen oder Bildern verwendet.

Hier ist ein Beispiel für die Verwendung Mix-Misch-Modus um Text und Bild zu verschmelzen.

HTML:

<divKlasse="Container">
<Bild
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="Hintergrundbild"
 />
<divKlasse="Inhalt">
<h1>Willkommenh1>
<P>Hallo Benutzer!P>
div>
div>

CSS:

.Container {
Position: absolut;
Breite: 100%;
Höhe: 100%;
}
.Hintergrundbild {
Breite: 100%;
Höhe: 100%;
Objektgerecht: Abdeckung;
}
.Inhalt {
Position: absolut;
Spitze: 50%;
links: 50%;
verwandeln: übersetzen(-50%, -50%);
Textausrichtung: Center;
Mix-Misch-Modus: Unterschied;
}
h1 {
Schriftgröße: 60px;
Farbe: Weiss;
}
P {
Schriftgröße: 40px;
Farbe: Weiss;
}

Der Unterschied Der Mischmodus berechnet den absoluten Unterschied zwischen den Farbwerten des Textes und dem darunter liegenden dunklen Bild.

In diesem Szenario würde die Textfarbe mit dem dunklen Hintergrund interagieren, was zu einem hohen Kontrasteffekt führen würde.

Kombinieren von Filtern und Mischmodi

Sie können Filter und Mischmodi kombinieren, um noch optisch interessantere Effekte zu erzielen. Durch die gemeinsame Verwendung beider Eigenschaften können Sie einzigartige und kreative Ergebnisse erzielen, die mit anderen CSS-Eigenschaften nur schwer zu reproduzieren sind.

Hier ist ein Beispiel, das den Filter- und Mischmodus kombiniert, um einen komplexeren Effekt zu erzielen:

.mein-element {
Filter: Helligkeit(150%) Farbton-drehen(180Grad) Schlagschatten(0px 0px 10pxrgba(0, 0, 0, 0.5));
Mix-Misch-Modus: Bildschirm;
}

Dieser Code kombiniert die Filter; Helligkeit, Farbton-drehen, Schlagschatten, und ein Mix-Misch-Modus von Wert Bildschirm zum Bild. Es erhöht die Helligkeit um 150 %, während hue-drehen kehrt die Farben des Bildes um 180 Grad um.

Dann wird auch ein Schlagschatten angewendet. Schließlich die Bildschirm Der Wert für den Mischmodus kombiniert die Farben des Bildes mit dem darunter liegenden Hintergrund. Dies führt zu einem Effekt, bei dem hellere Farben intensiviert und dunklere Farben mit dem gemischt werden Hintergrund.

Beherrschen von Filtern und Mischmodi

Sie haben die verschiedenen Arten von CSS-Filtern kennengelernt und erfahren, wie Sie diese auf Ihre HTML-Elemente anwenden können. Durch den Einsatz verschiedener Filterfunktionen wie Unschärfe, Kontrast und Farbton-Rotation können Sie das Erscheinungsbild Ihrer Bilder verändern. Sie haben auch Beispiele für Mischmodi in Aktion gesehen und erfahren, wie diese zum Erstellen einzigartiger Designs verwendet werden können.

Wenn Sie mehr mit diesen Techniken experimentieren, können Sie Ihren Designs ein zusätzliches Maß an visuellem Interesse verleihen.