Blog

May 11, 2023

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

Die CSS-Filter- und Mischmodi sind leistungsstarke Werkzeuge zum einfachen Anwenden von atemberaubenden Bildern

Die CSS-Filter- und Mischmodi sind leistungsstarke Tools, mit denen Sie ganz einfach atemberaubende visuelle Effekte auf Ihre Webseite anwenden können, ohne dass komplexer Code erforderlich ist.

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.

Sie wenden CSS-Filter mit anFilter -Eigenschaft und eine Eigenschaft, die den angewendeten Effekttyp angibt. Jede Filtereigenschaft ist eine CSS-Funktion, die ähnlich wie eine CSS-Variablenfunktion funktioniert. 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:

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.

DerGraustufen() 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.

DerSepia() 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:

KombinierenGraustufen()bei 14 % undSepia()Bei 30 % kann Ihrem Bild ein Vintage- oder Retro-Effekt verliehen werden.

Dersä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.

Derumkehren() 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:

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

Derhue-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 derhue-rotate()UndKontrast()Filter können Ihren Bildern einen lebendigen und farbenfrohen Effekt verleihen.

Zum Beispiel:

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

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 derHelligkeit()Undverwischen()Filter können Ihren Bildern einen verträumten und sanften Effekt verleihen.

Zum Beispiel:

Der obige Code verringert die Helligkeit um0,8 (80 %)und gilt a5pxUnschärfeeffekt auf das Bild.

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 derSchlagschatten()UndOpazität()Filter können einen subtilen Effekt auf Ihre Textelemente erzeugen.

Zum Beispiel:

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.

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:

Die beiden häufigsten Mischmodi sindHintergrund-MischmodusUndMix-Misch-Modus . Beide Eigenschaften haben dieselben 15 Werte: Normal, Multiplizieren, Bildschirm, Überlagerung, Abdunkeln, Aufhellen, Farbabweichung, Sättigung, Farbverbrennung, Leuchtkraft, Differenz, hartes Licht, weiches Licht, Ausschluss und Farbton.

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

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

Hier ist ein Beispiel für die VerwendungMix-Misch-Modusum Text und Bild zu verschmelzen.

HTML:

CSS:

DerUnterschiedDer 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.

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:

Dieser Code kombiniert die Filter;Helligkeit,Farbton-drehen,Schlagschatten, und einMix-Misch-Modusvon WertBildschirm zum Bild. Es erhöht die Helligkeit um 150 %, während hue-drehenkehrt die Farben des Bildes um 180 Grad um.

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

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.

Noble Okafor ist ein erfahrener Softwareentwickler mit über dreijähriger Erfahrung im Programmierbereich. Seine Leidenschaft gilt der Entwicklung optimierter JavaScript-, nativer und plattformübergreifender Mobil- und Web-Softwarelösungen. Er ist bestrebt, sein Wissen und seine Lektionen durch seine Fachartikel zu dokumentieren und verfügt über mehr als ein Jahr Erfahrung im Schreiben. Der Hauptschwerpunkt und das Ziel dieser Artikel besteht darin, die Komplexität rund um Software-Engineering-Themen zu vereinfachen.