back to top

Bild-Effekte mit CSS Funktion filter

20170425 33a0850 nr 001

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

Oben sehen Sie das Originalfoto.

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

img {
   filter: brightness(80%);
}
20170425 33a0850 nr 001
Die Helligkeit des Bildes wird um 20% gesenkt (100% keine Änderung).

Dieser Code macht aus einem Farbbild ein Graustufenbild:

img {
   filter: grayscale(100%);
}
20170425 33a0850 nr 001
Das Foto in schwarz-weiß.

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

img {
   filter: blur(3px);
}
20170425 33a0850 nr 001
Ein unscharfes Foto eignet sich gut als Texthintergrund.

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);
}
20170425 33a0850 nr 001

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%)

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.