CSS Filter-Effekte

css-filter-effekte

Mit Hilfe von CSS-Filter-Effekten können die Elemente einer Website gestalterisch manipuliert werden. Ihr könnt z. B. Bilder in ihrer Farbe verändern, Schatten hinzufügen, die Deckkraft reduzieren oder Bilder und Texte weichzeichnen. In Kombination mit CSS Blend Modes stehen uns somit Photoshop-ähnliche Techniken im Browser zur Verfügung. Da CSS Filter mittlerweile in allen modernen Browser (außer dem IE) zur Verfügung stehen, möchte ich in diesem Beitrag die Funktionsweise kurz zusammenfassen.

Seminar: Responsive Web Design für Konzeptioner, Projektleiter und Designer

In diesem Seminar lernen Sie alle Aspekte von Responsive Design kennen, ohne dabei tiefer als notwendig in die technischen Details einzusteigen.

Berlin, 29. + 30. September 2016
Berlin, 22. + 23. November 2016

Funktionsweise von CSS-Filtern

CSS Filter lassen sich sowohl auf Grafiken im HTML-Markup (<img>) als auch auf CSS-Hintergründe (background-image:url(…);) Texte, CSS-Elemente, SVG-Grafiken und Videos (<video>) anwenden. Es stehen nachfolgende Filter zur Verfügung.

Live-Beispiele aller Filter anzeigen

blur(Radius) – Weichzeichner

Mit dem blur()-Filter kann ein Gaußscher Weichzeichner angewendet werden. Je höher der Radius, desto stärker wird das Bild weichgezeichnet.

CSS-Filter blur()
CSS-Filter blur()
.blur {
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

brightness(Wert) – Helligkeit

Mit dem brightness()-Filter kann ein Bild in der Helligkeit verändert werden. Ein Wert von 1 entspricht dem Standard. Werte unter 1 (z. B. 0.5) dunkeln das Bild ab, Werte über 1 (z. B. 1.5) hellen das Bild auf.

Der CSS-Filter brightness()
Der CSS-Filter brightness()
.brightness {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}

contrast(Wert) – Kontrast

Mit dem contrast()-Filter wird der Kontrast eines Bildes verändert. Ein Wert unter 1 reduziert den Kontrast, ein Wert über 1 erhöht ihn.

Der CSS-Filter contrast()
Der CSS-Filter contrast()
.contrast {
    -webkit-filter: contrast(2);
    filter: contrast(2);
}

drop-shadow(X, Y, Weichzeichnung, Farbe) – Schlagschatten

Mit dem drop-shadow()-Filter kann einem Bild ein Schlagschatten hinzugefügt werden. Der Filter funktioniert ähnlich wie die box-shadow-Eigenschaft und führt folglich auch zu einem vergleichbaren visuellen Ergebnis. Allerdings erkennt der Filter Transparenzen in PNGs, so dass nur opake Bildbereiche einen Schatten werfen.

Der CSS-Filter drop-shadow()
Der CSS-Filter drop-shadow()
.drop-shadow {
    -webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
    filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
}

grayscale(wert) – Graustufe

Mit dem grayscale()-Filter kann ein Bild in Graustufen dargestellt werden. Ein Wert von 1 entspricht 100%.

Der CSS-Filter grayscale()
Der CSS-Filter grayscale()
.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

hue-rotate(winkel) – Winkel im Farbkreis

Mit dem hue-rotate()-Filter kann der Farbwinkel des Bildes gedreht werden. Ein Wert von 0° lässt das Bild unverändert, der maximale Winkel beträgt 360°.

Der CSS-Filter hue-rotate()
Der CSS-Filter hue-rotate()
.hue-rotate {
    -webkit-filter: hue-rotate(45deg);
    filter: hue-rotate(45deg);
}

invert(wert) – Invertieren

Mit dem invert()-Filter können die Farben des Bildes umgekehrt werden. Ein Wert von 1 kehrt die Farben vollständig um.

Der CSS-Filter invert()
Der CSS-Filter invert()
.invert {
    -webkit-filter: invert(1);
    filter: invert(1);
}

opacity(wert) – Deckkraft/Opazität

Mit dem opacity()-Filter kann ein Bild transparent dargestellt werden. Ein Wert von 1 lässt das Bild verschwinden. Der Filter funktioniert exakt wie die opacity-Eigenschaft von CSS.

Der CSS-Filter opacity()
Der CSS-Filter opacity()
.opacity {
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}

saturate(wert) – Sättigung

Mit dem saturate()-Filter kann die Sättigung eines Bildes erhöht oder verringert werden. Werte über 1 erhöhen die Sättigung, Werte zwischen 1 und 0 verringern sie.

Der CSS-Filter saturate()
Der CSS-Filter saturate()
.saturate {
    -webkit-filter: saturate(2);
    filter: saturate(2);
}

sepia(wert) – Sepiafarben

Der Filter sepia() färbt das Bild in Sepiafarben um. Ein Wert von 1 entspricht einer Sepia-Färbung von 100%.

Der CSS-Filter sepia()
Der CSS-Filter sepia()
.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

Kombinierte Filter

CSS-Filter können auch kombiniert werden. Die einzelnen Filter werden dabei ohne Komma direkt nacheinander notiert. Mit Filterkombinationen sind beispielsweise Einfärbungen des Bildes, dezente Korrekturen oder Instagram-ähnliche Effekte möglich.

Kombinierte CSS-Filter sepia() und hue-rotate()
Kombinierte CSS-Filter sepia() und hue-rotate()
.sepia-hue-rotate {
    -webkit-filter: sepia(1) hue-rotate(120deg);
    filter: sepia(1) hue-rotate(120deg);
}
Kombinierte CSS-Filter sepia(), hue-rotate() und blur()
Kombinierte CSS-Filter sepia(), hue-rotate() und blur()
.sepia-hue-rotate-blur {
    -webkit-filter: sepia(.9) hue-rotate(280deg) blur(2px);
    filter: sepia(.9) hue-rotate(280deg) blur(2px);
}
Kombinierte CSS-Filter brightness() und contrast()
Kombinierte CSS-Filter brightness() und contrast()
.brightness-contrast {
	-webkit-filter: brightness(1.1) contrast(1.3);
	filter: brightness(1.1) contrast(1.3);
}

Browser-Support

Wie eingangs bereits erwähnt, sieht der Browser-Support zum Zeitpunkt der Veröffentlichung dieses Artikels bereits sehr gut aus. Lediglich die Internet Explorer-Reihe unterstützt die CSS Filter noch nicht. Eine detaillierte Liste entnehmt ihr bitte der Website Can I Use. Ein Polyfill findet ihr hier.

Links / Quellen