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

Oben sehen Sie das Originalfoto.

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

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

Dieser Code macht aus einem Farbbild ein Graustufenbild:

img {
   filter: grayscale(100%);
}
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);
}
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);
}

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.