Einleitung
Filter sind ein leistungsstarkes Tool, mit dem Webautoren interessante visuelle Effekte erzielen können. In diesem Artikel erfahren Sie mehr über den Verlauf von Filtereffekten, ihre Funktion und ihre Verwendung. Im Folgenden finden Sie Beispiele für alle vordefinierten Filter, die für CSS definiert wurden. Außerdem wird die Leistung von Filtern auf Desktop-Computern und Mobilgeräten erläutert, da die Auswirkungen von Filtern auf die Geschwindigkeit für eine gute Nutzererfahrung wichtig sind. Abschließend werfen wir einen Blick auf den aktuellen Stand der Implementierung in modernen Browsern.
Filtereffekte in der Vergangenheit, Gegenwart und Zukunft
Filtereffekte stammen aus der SVG-Spezifikation (Skalierbare Vektorgrafik). Sie wurden entwickelt, um verschiedene pixelbasierte Bildeffekte auf eine Vektorzeichnung anzuwenden. Mit der Zeit, als die Browseranbieter ihren Browsern SVG-Funktionen hinzufügten, wurde die Nützlichkeit von Filtern deutlich. Robert O’Callahan von Mozilla kam auf die geniale Idee, SVG-Filter über CSS für „normale“ HTML-Inhalte einzusetzen. Robert erstellte einen Prototyp für eine frühe Version, die zeigte, wie leistungsstark die Kombination aus Filtern und CSS-Stilen sein kann. Die CSS- und SVG-Arbeitsgruppen im W3C haben beschlossen, die Verwendung von Filtern für HTML und SVG über CSS-Stile zu vereinheitlichen. Damit wurde die Filtereigenschaft für CSS entwickelt. Derzeit arbeitet eine gemeinsame Taskforce aus CSS und SVG viel daran, Filter allgemein nutzbar zu machen. Die aktuellen Spezifikationen dafür findest du hier.
Neues Leben für die CSS-Property „Filter“
Deja Vu stößt manchmal auf einen Webentwickler, wenn er „Filter“ in CSS-Stilen sieht. Dies liegt daran, dass in alten Versionen von Internet Explorer über CSS eine Filtereigenschaft zur Ausführung einiger plattformspezifischer Funktionen verfügbar war. Diese wurde eingestellt. Stattdessen wird die Standardeigenschaft „filter“ verwendet, die jetzt Teil von CSS3 ist. Wenn Sie also auf einigen alten Webseiten "Filtern" in freier Wildbahn entdecken, besteht kein Grund zur Verwechslung. Die neue Eigenschaft 'filter' ist der Ort, an dem alles möglich ist, und neue Versionen von Internet Explorer implementieren sie genauso wie alle modernen Browser.
Funktionsweise von Filtern
Wozu dient also ein Filter? Sie können sich einen Filter einfach als Nachbearbeitungsschritt vorstellen, bei dem etwas Magisches entsteht, nachdem alle Seiteninhalte angelegt und gezeichnet wurden.
Wenn ein Browser eine Webseite lädt, muss er Stile anwenden, das Layout durchführen und dann die Seite rendern, sodass darin etwas zu sehen ist. Die Filter werden nach all diesen Schritten und kurz vor dem Kopieren der Seite auf den Bildschirm aktiviert. Sie machen einen Snapshot der gerenderten Seite als Bitmapbild, führen dann einige magische Grafiken auf den Pixeln im Snapshot aus und ziehen das Ergebnis dann über das Bild der ursprünglichen Seite. Sie können sie sich wie einen Filter auf der Vorderseite eines Kameraobjektivs vorstellen. Durch die Linse sehen Sie die Außenwelt, die durch den Effekt des Filters verändert wird.
Das Zeichnen einer Seite mit Filtern bedeutet natürlich viel Zeit. Die korrekte Verwendung der Filter wirkt sich jedoch kaum auf die Geschwindigkeit Ihrer Website aus.
Außerdem können Sie auf dem Kameraobjektiv mehrere Filter nebeneinander aufstellen und beliebig viele Filter nacheinander anwenden, um alle möglichen Effekte zu erzielen.
Mit SVG und CSS definierte Filter
Da Filter ursprünglich aus SVG stammen, gibt es verschiedene Möglichkeiten, sie zu definieren und zu verwenden. SVG selbst hat ein <filter>-Element, das Definitionen verschiedener Filtereffekte mithilfe der XML-Syntax zusammenfasst. Die von CSS definierten Filter nutzen das gleiche Grafikmodell. Es handelt sich jedoch um viel einfachere Definitionen, die einfach in einem Style Sheet verwendet werden können.
Die meisten CSS-Filter können in Form von SVG-Filtern ausgedrückt werden. Mit CSS können Sie bei Bedarf auch auf einen in SVG angegebenen Filter verweisen. Die CSS-Filterdesigner haben große Anstrengungen unternommen, um die Anwendung eines Filters für Webautoren zu vereinfachen. In diesem Artikel werden daher nur die Filter behandelt, die direkt in CSS verfügbar sind, und die SVG-Definitionen werden vorerst ignoriert.
CSS-Filter anwenden
Die Verwendung von CSS-Filtern erfolgt über die Eigenschaft "filter", die auf ein sichtbares Element auf Ihrer Webseite angewendet wird. Für ein sehr einfaches Beispiel könnten Sie etwa
div { { % mixin filter: grayscale(100%); % } }
Dadurch wird der Inhalt aller <div>-Elemente auf der Seite grau. Gut, wenn Sie Ihre Seite wie ein Fernsehbild aus den 1940er-Jahren gestalten möchten.
Die meisten Filter verwenden eine Art von Parametern, um zu steuern, wie stark gefiltert wird. Wenn Sie also Ihren Content so gestalten möchten, dass er zwischen der Originalfarbe und einer Graustufenversion liegt, gehen Sie so vor:
div { { % mixin filter: grayscale(50%); % } }
Wenn Sie mehrere Filter nacheinander anwenden möchten, ist das ganz einfach. Platzieren Sie sie einfach wie folgt in Ihrem CSS-Code:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
In diesem Beispiel werden zuerst alle ursprünglichen Farben in Graustufen und dann ein Sepia-Effekt angewendet, was am Ende so aussieht:
Dank der Flexibilität, Filter nacheinander anzuwenden, können alle möglichen Effekte erzielt werden. Experimentiere ruhig ein wenig mit erstaunlichen Ergebnissen.
Welche Filtereffekte mit CSS verfügbar sind
Der ursprüngliche SVG-Filtermechanismus ist also sowohl leistungsstark, kann aber gleichzeitig auch etwas entmutigend sein. Aus diesem Grund bietet CSS eine Reihe von Standardfiltereffekten an, die die Verwendung dieser Effekte sehr einfach machen.
Sehen wir uns die einzelnen Tools einmal genauer an.
- Grayscale(amount)
- Dadurch wird die Farbe in unserem Eingabebild in einen Grauton umgewandelt. Der angewendete Betrag bestimmt, wie viel Grau umgerechnet wird. Bei 100% erscheint alles grau, bei 0% bleiben die Farben unverändert. Sie können hier eine Gleitkommazahl anstelle von Prozentsätzen verwenden, d. h., 0 entspricht 0 %, 1,0 entspricht also 100%.
- sepia(Betrag)
- So erhalten die Farben wie in alten Fotos einen Sepiaton. Der angewendete „Betrag“ funktioniert auf die gleiche Weise wie der „Graustufen“-Filter: Bei 100% werden alle Farben vollständig in Sepia gefärbt, während bei kleineren Werten der Effekt in kleineren Anteilen angewendet werden kann.
- saturate(amount)
- So wird eine Farbsättigung auf die Farben angewendet, wodurch sie lebendiger aussehen. Das ist ein cooler Effekt, mit dem Fotos wie Poster oder Cartoons aussehen können.Mit diesem Effekt können Sie auch einen Wert über 100% verwenden, um die Sättigung hervorzuheben. Definitiv ein Effekt, der die Dinge ziemlich flippig aussehen lässt.
- hue-rotate(angle)
- Das ist ein Farb-Geek-Effekt, der für interessante Ergebnisse verwendet werden kann. Dabei werden die Farben verschoben, sodass ein Eingabebild ganz anders aussieht. Wenn Sie sich ein Farbspektrum von Rot zu Violett um ein Farbrad herum vorstellen können, nimmt dieser Effekt die ursprüngliche Farbe im Rad als Eingabe und rotiert sie anhand des Parameters "angle", um die Farbe auf dem Rad zu erzeugen, in die es als Ausgabefarbwert gedreht wurde. So werden alle Farben im Bild um denselben "Winkel" auf dem Rad verschoben. Dies ist natürlich eine Vereinfachung des Vorgangs, aber hoffentlich nah genug, dass es Sinn ergibt.
- invert(Betrag)
- Dieser Effekt dreht die Farben. Wenn der „Betrag“ also 100% beträgt, sieht das Ergebnis wie ein negatives Foto aus der Zeit der Kameras aus. Wie zuvor wird bei Verwendung von Werten unter 100% der Umkehreffekt nach und nach angewendet.
- Deckkraft(Betrag)
- Wenn Sie möchten, dass die gefilterten Inhalte halbtransparent angezeigt werden, ist dies die richtige Option für Sie. Der Wert "amount" legt fest, wie opak die Ausgabe sein soll. Der Wert 100% ist also vollständig deckend, sodass die Ausgabe genau der gleichen wie die Eingabe ist. Wenn der Wert unter 100% fällt, wird das Ausgabebild weniger deckend (transparenter) und Sie sehen immer weniger davon. Wenn sich also etwas anderes auf der Seite überschneidet, wird auch das darunterliegende sichtbar. Ein „Betrag“ von 0% bedeutet, dass er vollständig verschwindet. Beachten Sie jedoch, dass Ereignisse wie Mausklicks usw. für vollständig transparente Objekte ausgeführt werden können. Dies ist daher praktisch, wenn Sie klickbare Bereiche erstellen möchten, ohne etwas anzuzeigen.
Das funktioniert genauso wie bei der bereits bekannten Eigenschaft „Deckkraft“. Im Allgemeinen ist die CSS-Eigenschaft „Deckkraft“ nicht hardwarebeschleunigt, aber einige Browser, die Filter mit Hardwarebeschleunigung implementieren, beschleunigen die Filterversion der Deckkraft und erzielen so eine deutlich bessere Leistung.
- Helligkeit(Betrag)
- Das entspricht dem Helligkeitsregler Ihres Fernsehers. Dabei werden die Farben zwischen vollständig schwarz und der Originalfarbe proportional zum Parameter „amount“ angepasst. Wenn Sie diesen Wert auf 0% setzen, sehen Sie nur Schwarz. Steigt der Wert jedoch in Richtung 100 %, wird das Originalbild immer heller, bis Sie 100% erreichen, wo es mit dem Eingabebild übereinstimmt. Natürlich könnt ihr einfach weitermachen. Mit einer Einstellung von 200% wird das Bild also doppelt so hell wie das Originalbild. Gut geeignet, um auch bei schlechten Lichtverhältnissen eine gute Leistung zu erzielen.
- Kontrast(Betrag)
- Mehr Steuerungsmöglichkeiten über den Fernseher Damit wird der Unterschied zwischen den dunkelsten und hellsten Bereichen des Eingabebilds angepasst. Bei 0% erhalten Sie am Ende Schwarz genau wie bei „Helligkeit“, also nicht zu interessant. Wenn Sie den Wert jedoch in Richtung 100% erhöhen, ändert sich der Unterschied in der Dunkelheit, bis Sie 100% erreichen und wieder das Originalbild erhalten. Sie können auch für diesen Effekt über 100% hinaus gehen, wodurch der Unterschied zwischen hellen und dunklen Farben noch weiter vergrößert wird.
- Weichzeichner(radius)
- Wenn Sie Ihren Inhalten einen weichen Rand hinzufügen möchten, können Sie einen Unschärfeeffekt hinzufügen. Sie sieht aus wie die klassische Vaseline auf einer Glasscheibe, die früher eine beliebte Technik zum Erstellen von Filmen war. Dabei werden alle Farben aufeinander abgestimmt und ihre Wirkung gestreut – ähnlich wie wenn Ihre Augen unscharf sind. Der Parameter „radius“ legt fest, wie viele Pixel auf dem Bildschirm ineinander übergehen. Ein größerer Wert führt also zu mehr Unschärfe. Bei Null bleibt das Bild natürlich unverändert.
- drop-shadow(shadow)
- Es ist schön, deine Inhalte so aussehen zu lassen, als wären sie im Freien mit einem Schatten auf dem Boden dahinter. Und genau das macht der Schlagschatten. Dabei wird eine Schnappschüsse des Bildes aufgenommen, eine einfarbige Farbe dargestellt, diese wird unkenntlich gemacht und das Ergebnis wird etwas verschoben, sodass es wie ein Schatten im Original wirkt. Der übergebene Parameter „shadow“ ist etwas komplizierter als nur ein einzelner Wert. Es handelt sich um eine Reihe von Werten, die durch ein Leerzeichen getrennt sind. Einige Werte sind optional. Über die Werte für "shadow" wird festgelegt, wo der Schatten platziert wird, wie viel Unschärfe angewendet wird, welche Farbe der Schatten hat usw. Detaillierte Informationen zur Funktionsweise der Werte für "shadow" finden Sie in der Spezifikation für CSS3 Backgrounds unter "box-shadow". Die folgenden Beispiele sollen Ihnen eine gute Vorstellung von den verschiedenen Möglichkeiten geben.
Dies ist ein weiterer Filtervorgang, der den vorhandenen CSS-Funktionen ähnelt, die über die Eigenschaft "box-shadow" verfügbar sind. Wenn Sie den Filteransatz verwenden, kann er bei einigen Browsern hardwarebeschleunigt werden, wie oben für die Deckkraft beschrieben.
- URL, die auf SVG-Filter verweist
- Da Filter Teil von SVG sind, ist es nur logisch, dass Sie Ihre Inhalte mit einem SVG-Filter gestalten können. Mit dem aktuellen Eigenschaftsvorschlag "Filter" ist dies ganz einfach. Alle Filter in SVG werden mit einem „id“-Attribut definiert, das als Bezug zum Filtereffekt verwendet werden kann. Um einen beliebigen SVG-Filter aus CSS zu verwenden, müssen Sie also lediglich mit der Syntax „url“ darauf verweisen.
Das SVG-Markup für einen Filter könnte beispielsweise so aussehen:
<filter id="foo">...</filter>
In CSS könnten Sie dann Folgendes tun:
div { { % mixin filter: url(#foo); % } }
und voilà! Alle <div>s in Ihrem Dokument werden mit den SVG-Filterdefinitionen versehen.
- Benutzerdefiniert (demnächst verfügbar)
- Bald sind benutzerdefinierte Filter verfügbar. Sie nutzen die Leistungsfähigkeit deiner Grafikkarte und nutzen eine spezielle Schattierung-Sprache, um erstaunliche Effekte zu erzielen, die deiner Fantasie freien Lauf lassen. Dieser Teil der „Filter“-Spezifikation ist derzeit noch in der Diskussion und im Umbruch, aber sobald dies in einem Browser in Ihrer Nähe zur Verfügung steht, werden wir mehr darüber schreiben, was möglich ist.
Hinweise zur Leistung
Eine Sache, die jedem Webentwickler wichtig ist, ist die Leistung ihrer Webseite oder Anwendung. CSS-Filter sind ein leistungsstarkes Tool für visuelle Effekte, können sich aber gleichzeitig auf die Leistung Ihrer Website auswirken.
Es ist wichtig zu wissen, was diese tun und wie sich das auf die Leistung auswirkt. Das gilt insbesondere dann, wenn Ihre Website auf Mobilgeräten gut funktionieren soll, wenn diese CSS-Filter unterstützen.
Erstens: Nicht alle Filter sind gleich! Tatsächlich lassen sich die meisten Filter auf jeder Plattform sehr schnell ausführen und haben nur sehr geringe Auswirkungen auf die Leistung. Filter, die irgendeine Art von Unkenntlichmachung anwenden, sind jedoch tendenziell langsamer als andere. Das heißt natürlich „Unkenntlich machen“ und „Schlagschatten“. Es bedeutet aber nicht, dass du sie nicht verwenden solltest. Es kann aber hilfreich sein, zu verstehen, wie sie funktionieren.
Bei einem blur werden die Farben der Pixel um das Ausgabepixel herum vermischt, um ein verschwommenes Ergebnis zu erzeugen. Wenn Ihr radius-Parameter also 2 ist, muss der Filter 2 Pixel in jeder Richtung um jedes Ausgabepixel herum untersuchen, um die gemischte Farbe zu generieren. Dies geschieht für jedes Ausgabepixel. Es sind also viele Berechnungen erforderlich, die durch Erhöhen von radius einfach größer werden. Da blur in alle Richtungen blickt, bedeutet eine Verdoppelung des „Radius“, dass Sie viermal so viele Pixel betrachten müssen, sodass die Anzeige bei jeder Verdoppelung von radius viermal langsamer ist. Der drop-shadow-Filter enthält einen blur als Teil seines Effekts, also verhält er sich genauso wie blur, wenn Sie die radius- und spread-Teile des shadow-Parameters ändern.
Bei blur geht nicht alles verloren, da auf einigen Plattformen die GPU zur Beschleunigung verwendet werden kann. Das ist aber nicht unbedingt in jedem Browser verfügbar. Im Zweifelsfall ist es am besten, mit dem „Radius“ zu experimentieren, mit dem Sie den gewünschten Effekt erzielen. Versuchen Sie dann, ihn so weit wie möglich zu reduzieren, während der visuelle Effekt akzeptabel bleibt. Mit dieser Einstellung sind die Nutzer zufrieden, vor allem, wenn sie Ihre Website über ein Mobiltelefon aufrufen.
Wenn du url-basierte Filter verwendest, die auf SVG-Filter verweisen, können sie beliebige beliebige Filtereffekte enthalten. Auch sie können langsam sein. Daher solltest du dir die Funktionsweise des Filtereffekts genauer ansehen und die Funktion auf einem Mobilgerät testen, um sicherzustellen, dass die Leistung in Ordnung ist.
Verfügbarkeit in modernen Browsern
Derzeit werden eine Reihe der CSS-filter-Effekte in WebKit-basierten Browsern und Mozilla zur Verfügung gestellt. Wir gehen davon aus, dass sie bald auch in Opera und IE10 verfügbar sein werden. Da sich die Spezifikation noch in der Entwicklung befindet, haben einige Browser-Anbieter diese Funktion mithilfe von Anbieterpräfixen implementiert. In WebKit müssen Sie also -webkit-filter und in Mozilla -moz-filter verwenden und nach anderen Browserimplementierungen Ausschau halten.
Nicht alle Browser unterstützen alle Filtereffekte sofort, sodass die Laufzeit variiert. Derzeit unterstützt der Mozilla-Browser nur die Funktion filter: url() – und nicht das Anbieterpräfix, da diese Implementierung vor den anderen Effektfunktionen liegt.
Im Folgenden finden Sie eine Zusammenfassung der CSS-Filtereffekte, die in den verschiedenen Browsern verfügbar sind, sowie einen groben Leistungsindikator dafür, wann sie in der Software implementiert sind. Beachten Sie, dass eine Reihe moderner Browser damit beginnt, diese in der (GPU-beschleunigten) Hardware zu implementieren. Wenn sie GPU-Unterstützung bieten, wird die Leistung durch die langsameren Effekte stark verbessert. Wie immer ist das Testen in verschiedenen Browsern die beste Möglichkeit, die Leistung zu bewerten.
| Filtereffekt | Unterstützte Browser | Leistung |
|---|---|---|
| Graustufen | Chrome | sehr schnell |
| Sepia | Chrome | sehr schnell |
| Sättigung | Chrome | sehr schnell |
| Farbton-Rotieren | Chrome | Schnell |
| invertieren | Chrome | sehr schnell |
| opacity | Chrome | kann langsam sein |
| Helligkeit | Chrome | Schnell |
| Kontrast | Chrome | Schnell |
| Unschärfe | Chrome | langsam, sofern nicht beschleunigt |
| drop-shadow | Chrome | kann langsam sein |
| url() | Chrome, Mozilla | Variiert, schnell bis langsam |
Weitere nützliche Ressourcen
Eine geniale Anwendung für interaktive abstrakte Malerei mit Filtern, mit der Sie experimentieren und Ihre Kunstwerke teilen können Sehen Sie sich unbedingt die ausgezeichnete interaktive Filterseite von Eric Bidelman an. Ein tolles Tutorial zu Filtern mit Beispielen Der offizielle W3C Filter Effects 1.0-Entwurf der Spezifikation http://dev.w3.org/fxtf/filters/ Beispiel-Benutzeroberfläche mit Filtern