CSS-Filter

filtertypen

An verschiedenen Stellen stößt CSS in Bereiche vor, die vorher Bildbearbeitungsprogrammen vorbehaltet waren. Man kann Bilder beschneiden mit clip-path, Bilder und andere Elemente über die Blendmodi mischen und es gibt die Filter, um Effekte wie Farbverschiebungen oder Unschärfe auf Bilder und andere Elemente anzuwenden. Um diese Filter geht es hier.

Vorweg: filter !=filter

Die hier beschriebenen Filter sind nicht zu verwechseln mit den proprietären Microsoft-Filtern. Die proprietären Microsoft-Filter hat man beispielsweise verwendet, um bestimmte CSS3-Effekte in älteren IEs nachzubilden.  Die mangelnde Unterstützung im IE < 9 für die Eigenschaft opacity hat man etwa folgendermaßen nachgebessert:

filter: alpha(opacity=50); /* proprietäre IE-Filter */

Im Gegensatz dazu geht es bei den hier behandelten Filtern um eine CSS3-Eigenschaft, die in einem Working Draft des W3C beschrieben ist.

Filter anwenden

Die Anwendung von Filtern ist relativ gradlienig:  Man schreibt die Eigenschaft filter und dahinter einen von mehreren Werten. Wenn man folgende Angaben auf ein farbiges Bild anwendet, wird es in Grautönen dargestellt:

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

Die Eigenschaft filter ohne Präfix versteht der Firefox ab Version 35, der am 13. Januar 2015 erschienen ist; für Chrome, Safari benötigt man die Schreibweise mit dem -webkit-Präfix.

Alle möglichen Filter demonstriert das folgende Beispiel.

filtertypen

Und hier ist das Beispiel für die Filtertypen.

box-shadow und blur-Filter

Einen Schatten um Elemente kann man mit box-shadow erzeugen. Wofür gibt es denn dann noch den blur-Filter? Wenn man beide auf ein normales Bild anwendet, so kann man denselben Effekt erzielen.

.dropshadowfilter {
-webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 8px 8px);
filter: drop-shadow(rgba(0,0,0,0.5) 0 8px 8px);
}
.boxshadow {
box-shadow: rgba(0,0,0,0.8) 0 8px 8px;
}

Der Unterschied zwischen beiden wird deutlich, wenn man filter bzw. box-shadow auf andere Inhalte anwendet – etwa auf eine Box mit einem gepunkteten Rahmen und Text. Dann sieht man deutlich: Der filter erzeugt auch einen Schatten bei der Schrift und um jeden Rahmenpunkt; box-shadow hingegen zeichnet den Schatten nur drumherum.

box-shadow vs blur-filter

Browserunterstützung

Filter mit dem Präfix -webkit- werden von Chrome, Safari ab 7 und Android-Browsern ab Android 4.4 unterstützt. Im Firefox sind die Filter (ohne Präfix) ab Version 35 implementiert (die am 13. Januar 2015 erschienen ist). Der neue Browser Microsoft Edge interpretiert ebenfalls die CSS3-Filter, allerdings erst nach Aktivierung der Unterstützung über about:flags.

Filter für Firefox < 35

Auch ältere Firefox-Browser verstehen Filter, allerdings nur SVG-Filter, die separat definiert und über url() gewiesen werden. Will man die älteren Firefoxe mit ins Boot holen, muss man also zwei Schritte tun.

Zuerst definiert man den Filter per SVG – im Beispiel steht diese Angabe in einer externen SVG-Datei mit Namen meinefilter.svg:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="grayscale">
<feColorMatrix type="saturate" values="0" />
</filter>
</defs>
</svg>

Dann kann man den Filter zuweisen:

filter: url(meinefilter.svg#grayscale); /* Firefox < 35 */

Filter für den Internet Explorer

Was aber ist mit dem Internet Explorer? Microsoft Edge unterstützt sie, aber nicht Internet Explorer 9-11.

Für ältere Internet Explorer (vor Version 10) konnte man einen Teil der Filter-Effekte über die proprietären Microsoft-Filter nachbessern. Das Folgende funktioniert in Firefox, Chrome, Safari und Internet Explorer 9 und wandelt ein farbiges Bild in Grautöne um:

webkit-filter: grayscale(1); /* Webkit  */
filter: url(meinefilter.svg#grayscale); /* Firefox < 35 */
filter: grayscale(1); /* Firefox >= 35 */
filter: gray; /* IE5+ - IE9 */

Das Problem an dieser Lösung ist allerdings, dass sie nicht im IE10 und IE11 funktioniert. (Diese Lösung könnte man komfortabel per Filter-Polyfill anwenden, aber leider bleibt der IE10/IE11 außen vor.)

Was aber funktioniert, ist, die Filter direkt per SVG auf ein SVG-Element anzuwenden  – durch folgende Angaben wird das Bild in allen aktuellen Browsern (inklusive IE10 und IE11) verschwommen dargestellt:

<svg>
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<image xlink:href="postkasten.jpg" width="300" height="224" filter="url(#blur)" />
</svg>

Beispiel mit SVG-Filtern testen
Aber leider kann man das nur auf SVG-Komponenten anwenden und nicht auf HTML-Schnipsel.

4 Kommentare zu “CSS-Filter”

  1. René Philipp

    Hallo, Florence,

    ich habe gerade Graustufen mit einem Hintergrundbild kombiniert, wie auf der verlinkten Seite rechts beim Hovern zu sehen ist. Es funktioniert im Chromium 51, Vivaldi 1.2 und Edge 13, aber leider nicht im Firefox 47. Dort verschwindet das Bild sogar beim Hovern. Leider habe ich keine Ahnung, warum. Oder habe ich vielleicht einen Bug entdeckt?

    Gruß

    René

    Antworten
  2. René Philipp

    Hallo, Florence,

    der Link ist ja aus meinem Kommentar vom Juli verschwunden. Es ging um die Seite http://esperanto-nb.de/autoro.htm. Allerdings habe ich die Graustufen dort inzwischen etwas anders eingebunden, so daß beim Hovern das rechte Bild von farbig in Graustufen wechselt, also nicht mehr seine Form ändert.

    Der Wechsel von rund auf sechseckig hatte nämlich irgendwie im Firefox nicht funktioniert. Außerdem sprang das Ganze immer nach unten. Die sechseckige Variante ist jetzt auf der Seite http://esperanto-nb.de/autoro.htm zu finden.

    Gruß

    René

    Antworten
  3. René Philipp

    Hallo, Florence,

    Ich hatte mich beim zweiten Link vertippt. Er lautet: http://esperanto-nb.de/autoro2.htm. Oder kann man seinen Kommentar irgendwie nachträglich korrigierten?

    Gruß

    René

    Antworten
    • Florence

      Hallo René,
      sorry, deine Kommentare kamen gerade an, als ich in den Urlaub aufbrach 🙂
      Aber jetzt bin ich wieder am Schreibtisch. Die sechseckige Variante funktioniert aber jetzt in Chrome und FF gleich? Das heißt, es wird grau? Sollte noch mehr passieren?

      LG

      Florence

      Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>