Bearbeiten von Bildern in CSS: Filter

() translation by (you can also view the original English article)

Betrachten Sie eine Situation, in der Sie kontrastreiche, verschwommene oder hellere Versionen bestimmter Bilder auf Ihrer Website haben müssen. Vor CSS-Filtern gab es nur Optionen, entweder verschiedene Versionen dieser Bilder hochzuladen oder die Bilder mit JavaScript zu bearbeiten.

Wenn Sie die Pixel im Originalbild nicht bearbeiten möchten, bieten CSS-Filter einen einfachen Ausweg. Beginnen wir dieses Tutorial mit einer kurzen Erläuterung aller verfügbaren Filter.

Unschärfefilter

Dieser Filter wendet eine Gaußsche Unschärfe auf Ihre Bilder an. Sie müssen einen Längenwert angeben, der bestimmt, wie viele Pixel ineinander übergehen müssen. Dies bedeutet, dass ein größerer Wert ein verschwommeneres Bild liefert. Beachten Sie, dass Sie den Unschärferadius nicht in Prozent bestimmen können. Wenn Sie keinen Parameter angeben, wird der Wert 0 verwendet. Die richtige Syntax für die Verwendung dieses Filters lautet:

1	filter: blur( <length> )

Der blur()-Filter akzeptiert keine negativen Werte.

Helligkeitsfilter

Dieser Filter wendet einen linearen Multiplikator auf Ihre Bilder an, wodurch sie im Vergleich zu den Originalbildern heller oder dunkler werden. Es akzeptiert eine Zahl sowie einen Prozentwert. Bei 0 % erhalten Sie ein komplett schwarzes Bild. Bei 100 % erhalten Sie das Originalbild ohne Änderungen. Höhere Werte führen zu helleren Bildern. Ein ausreichend hoher Wert macht das Bild überwiegend weiß. Die richtige Syntax zum Verwenden dieses Filters lautet:

1	filter : brightness( [ <number> \| <percentage> ] )

Dieser Filter akzeptiert ebenfalls keine negativen Werte.

Kontrastfilter

Dieser Filter ändert den Kontrast Ihrer Bilder. Genau wie der Helligkeitsfilter akzeptiert er eine Zahl sowie Prozentwerte. Ein Wert von 0 % führt zu einem vollständig grauen Bild. Das Festlegen des Werts auf 100 % hat keine Auswirkungen. Werte über 100 % erzeugen kontrastreiche Bilder. Sie dürfen keine negativen Werte mit dem contrast()-Filter verwenden. Die richtige Syntax zum Verwenden dieses Filters lautet:

1	filter : contrast( [ <number> \| <percentage> ] )

Schlagschattenfilter

Fast jeder von Ihnen hat möglicherweise mindestens einmal Box-Schatten verwendet. Das Problem mit Box-Schatten ist, dass sie boxy sind. Sie können sie nicht verwenden, um Schatten unregelmäßiger Formen zu erstellen. Andererseits erzeugt der drop-shadow-Filter Schatten um die Begrenzung eines Bildes. Es ist im Grunde eine verschwommene Version der Alphamaske des Eingabebildes. Die richtige Syntax zum Verwenden von drop-shadow lautet:

1	filter : drop-shadow( <length>{2,3} <color>? )

Die ersten beiden Längenwerte sind erforderlich, und sie legen den horizontalen und vertikalen Schattenversatz fest. Der dritte <blur-radius> Wert ist optional. Ein größerer Wert erzeugt einen helleren Schatten. Die Demo unten zeigt diesen Filter in Aktion. Wenn Sie die Maus über den Pinguin schweben lassen, ändert sich die Farbe des Schattens von orange zu rot.

Graustufenfilter

Dieser Filter macht Ihre Bilder graustufig. Ein Wert von 0 % lässt das Bild unverändert, während ein 100 %-Wert das Bild vollständig in Graustufen verwandelt. Jeder Wert zwischen diesen beiden Effekten ist ein linearer Multiplikator für diesen Effekt. Negative Werte können nicht mit dem grayscale() verwendet werden. Die richtige Syntax zum Verwenden dieses Filters lautet:

1	filter : grayscale( [ <number> \| <percentage> ] )

Farbrotationsfilter

Dieser Filter wendet eine Farbtonrotation auf Ihre Bilder an. Der Parameter (als Winkel übergeben) bestimmt die Anzahl der Grade um den Farbkreis, die die Bilder angepasst werden. Bei einem 0 deg-Wert bleibt das endgültige Bild unverändert. Wenn Sie einen Wert über 360 deg angeben, wird der Filter einfach umbrochen. Die richtige Syntax zum Verwenden dieses Filters lautet:

1	filter : hue-rotate( <angle> )

Invertierungsfilter

Dieser Filter invertiert Ihre Bilder. Die Höhe der Inversion hängt vom Wert des übergebenen Parameters ab. Eine Invertierung um 0 % hat keinen Einfluss auf das Bild. Auf der anderen Seite wird ein Wert von 100 % das Bild vollständig invertieren. Ein Wert von 50 % erzeugt ein vollständig graues Bild. Jeder Wert zwischen den Extremen ist ein linearer Multiplikator des Effekts. Dieser Filter akzeptiert keine negativen Werte. Die richtige Syntax zum Verwenden des invert()-Filters lautet:

1	filter : invert( [ <number> \| <percentage> ] )

Opazitätsfilter

Der Deckkraftfilter wendet Transparenz auf das Eingabebild an. Ein Wert von 0 % bedeutet, dass Sie 0 % Deckkraft wünschen, was zu vollständiger Transparenz führt. In ähnlicher Weise führt ein 100 %-Wert zu einem völlig undurchsichtigen Bild.

Der Filter ähnelt der Deckkrafteigenschaft in CSS. Der einzige Unterschied ist, dass in diesem Fall einige Browser Hardwarebeschleunigung für eine verbesserte Leistung bieten können. Die richtige Syntax zum Verwenden dieses Filters lautet:

1	filter: opacity( [ <number> \| <percentage> ] );

Sättigungsfilter

Dieser Filter bestimmt die Sättigung Ihrer Bilder. Die Sättigung selbst hängt vom Wert des Parameters ab. Sie können mit diesem Filter keine negativen Werte verwenden. Bei 0 %, dem minimal möglichen Wert, wird das Bild vollständig ungesättigt sein. Bei einem Sättigungswert von 100 % bleibt das Bild unverändert. Um übersättigte Bilder zu erhalten, müssen Sie Werte über 100 % verwenden. Die richtige Syntax zum Verwenden dieses Filters lautet:

1	filter : saturate( [ <number> \| <percentage> ] )

Sepia-Filter

Dieser Filter verwandelt Ihre Originalbilder in Sepia. Bei einem Wert von 100 % erhalten Sie eine vollständige Sepia, und ein 0 %-Wert hat keinen Einfluss auf das Bild. Alle anderen Werte, die dazwischen liegen, sind lineare Multiplikatoren dieses Filters. Sie dürfen mit diesem Filter keine negativen Werte verwenden. Die richtige Syntax zur Verwendung des sepia()-Filters lautet:

1	filter : sepia( [ <number> \| <percentage> ] )

URL-Filter

Es kann Situationen geben, in denen Sie eigene Filter für Bilder verwenden möchten. Der url-Filter nimmt den Speicherort einer XML-Datei an, die einen SVG-Filter angibt. Es akzeptiert auch einen Anker für ein bestimmtes Filterelement. Hier ist ein Beispiel, das zu einer Posterisierung unseres Bildes führt:

// The filter

<svg>
  <filter id="posterize">
    <feComponentTransfer>
      <feFuncR type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncG type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncB type="discrete" tableValues="0 0.33 0.66 0.99" />
    </feComponentTransfer>
  </filter>
</svg>

// Required CSS to apply this filter

filter: url(#posterize);

Das Endergebnis nach dem Anwenden des Filters würde dem folgenden Bild ähneln:

Verwenden mehrerer Filter

Wenn Sie mit der Ausgabe eines einzelnen Filters nicht zufrieden sind, können Sie eine Kombination dieser Filter auf ein einzelnes Bild anwenden. Die Reihenfolge, in der Sie die Filter anwenden, kann geringfügig unterschiedliche Ergebnisse liefern. Mehrere Filter können auf folgende Weise angewendet werden:

1	filter : sepia(0.8) contrast(2);
2	filter : saturate(0.5) hue-rotate(90deg) brightness(1.8);

Wenn Sie mehrere Filter zusammen verwenden, wird die erste Filterfunktion in der Liste auf das Originalbild angewendet. Nachfolgende Filter werden auf die Ausgabe der vorherigen Filter angewendet. Diese Demo zeigt zwei weitere Filterkombinationen in Aktion.

Unter besonderen Umständen kann die Reihenfolge der Filter zu völlig unterschiedlichen Ergebnissen führen. Beispielsweise erzeugt die Verwendung von sepia() nach grayscale() eine Sepia-Ausgabe, und die Verwendung von grayscale() nach sepia() führt zu einer Graustufenausgabe.

Animieren der Filter

Die Filtereigenschaft kann animiert werden. Mit der richtigen Kombination aus Bild und Filtern können Sie diese Funktion nutzen, um einige atemberaubende Effekte zu erzielen. Betrachten Sie den Codeausschnitt unten:

@keyframes day-night {
  0% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  10% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  20% {
    filter: hue-rotate(0deg) brightness(150%);
  }
  90% {
    filter: hue-rotate(180deg) brightness(10%);
  }
  100% {
    filter: hue-rotate(180deg) brightness(5%);
  }
}

Ich verwende den hue-rotate() und brightness() Filter zusammen, um die Illusion von Tag und Nacht zu erzeugen. Das Originalbild selbst hat einen orangefarbenen Farbton. Für bis zu 20% der Animation erhöhe ich die Helligkeit schrittweise und halte die Farbtonrotation bei Null. Dies erzeugt die Wirkung eines sonnigen Tages. Wenn die Animation endet, drehe ich den Farbton um 180 Grad. Dies führt zu einem blauen Farbton. Die Kombination mit sehr geringer Helligkeit erzeugt den Effekt der Nacht.

Letzte Gedanken

Neben den 11 Filtern, die wir oben besprochen haben, gibt es auch einen custom()-Filter. Es ermöglicht Ihnen, völlig verschiedene Arten von Effekten mit Shadern zu erstellen. Es gibt ein paar Probleme mit custom()-Filtern, die ihre Entwicklung gestoppt haben. Adobe arbeitet aktiv daran, Lösungen für Probleme zu finden, die bei der Verwendung von custom()-Filtern auftreten. Hoffentlich werden sie bald für Entwickler zur Verfügung stehen, um sie in ihren Projekten zu verwenden.

Jetzt kommen wir wieder auf Kurs. Filter werden auf alle Teile des Zielelements angewendet, einschließlich Text, Hintergrund und Rahmen. Hier ist eine grundlegende Demo für Sie, um eine Kombination von Filtern auf verschiedenen Bildern auszuprobieren.

Wie Sie in den letzten beiden Abschnitten gesehen haben, können CSS-Filter die Bilder, auf die sie angewendet werden, vollständig ändern. Manchmal ist das jedoch nicht genug. Im nächsten Teil dieser Serie werde ich besprechen, wie man Mischmodi zum Bearbeiten von Bildern verwendet.