Bild-Effekte mit CSS Funktion filter

Die CSS Funtion filter ist eine tolle Möglichkeit, Bild-Effekte mit CSS (Cascading Style Sheets) zu realisieren. Man kann Kontrast, Helligkeit, Sättigung u.v.m. im CSS festlegen, ähnlich wie mit einem Bildbearbeitungsprogramm. Dabei wird das Bild in keiner Weise bearbeitet, alle Veränderung passiert im CSS.

1) CSS ist die Formatierung für HTML

Damit lassen sich hübsche Effekte erzielen. Ich verwende diese Eigenschaft auf dieser Webseite für die Beitragsbilder. Wenn mit der Maus über das Bild gefahren wird (hover), dunkelt das Bild um 20% ab..

Ein paar Beispiele

Mit der nachfolgenden CSS Anweisung wird das Bild um 20% abgedunkelt:

img {
   filter: brightness(80%);
}

Dieser Code macht aus einem Farbbild ein Graustufenbild:

img {
   filter: grayscale(100%);
}

Man kann das Bild auch unscharf machen, das ist perfekt um es als Hintergrund für Text zu verwenden.

img {
   filter: blur(3px);
}

Mehrere Filter können auch miteinander kombiniert werden. Z.B. um eine Nachtaufnahme zu simulieren

img {
   filter: contrast(150%) brightness(50%) sepia(100%) hue-rotate(170deg);
}

Erklärung: Den Kontrast (contrast) habe ich erhöht, damit das monochrome, abgedunkelte (brightness) Bild nicht flau wirkt. Da bei einem Schwarzweiß-Bild keine Farbinformation (und damit Sättigung = 0) vorhanden ist, verwende ich den Filter sepia statt grayscale. Mit hue-rotation wird der Farbwert nach Blau verschoben.

Alle Filter:

filter: brightness(100%)

filter: saturation(100%)

filter: contrast(0%)

filter: hue-rotate(0deg)

filter: opacitiy(100%)

filter: blur(0px)

filter: grayscale(0%)

filter: drop-shadow(h-shadow v-shadow blur spread color)
   h-shadow: Schatten horizontal (px)
   v-shadow: Schatten vertikal (px)
   blur: Weichzeichnen (px)
   spread: Ausbreiten (px)
   color: Farbe (hex, hsv(a), rgb(a))

filter: invert(0%)

filter: sepia(0%)