Rund um CSS

CSS/Eigenschaften/Anzeige/filter

Browsersupport

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+ (-webkit-)	7+ (-webkit-)	35+	18+ (-webkit-)	nope	4.4+ (-webkit-)	6+ (-webkit-)

Weichzeichner

Der blur()-Filter wendet einen Gaußschen Weichzeichner auf die Grafik (oder den Text) an.
Der Filter erfordert eine Längenangabe des Radius, erlaubt aber keine Prozentwerte.

filter: blur([ <length> ])
.blur {
  -webkit-filter: blur(2px);  
  /* Webkit browsers */
  filter: blur(2px);  
}

Helligkeit

Der brightness ()-Filter ändert die Helligkeit der Grafik.
Der Filter erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 0 ergibt schwarz, 1 ist die normale Helligkeit, 2 doppelt so hell.

filter: brightness([ <zahl> | <prozent> ])
.dunkler {
  filter: brightness(.5);  
}
.heller {
  filter: brightness(1.5);  
}
.nochHeller {
  filter: brightness(2.5);  
}

Graustufen

Der grayscale()-Filter wandelt das Bild in Graustufen um.

Der Filter erfordert eine Angabe eines Prozentwerts von 0-100% oder einer positiven Zahl von 0-1; ein Wert von 0 lässt das Bild unverändert, 1 ergibt grau, die Werte dazwischen reduzieren die Farbwerte entsprechend.

filter: grayscale([ <zahl> | <prozent> ])
.graubeispiel {
  filter: grayscale(0.75);
}

Sättigung

Der saturate()-Filter regelt die Farbsättigung eines Bildes.

Der Filter erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 1 lässt das Bild im Normalzustand; höhere Werte erhöhen die Sättigung.

filter: brightness([ <zahl> ])
.satt {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}

Weitere Filter sind filter: sepia(0-1 || prozent);,
filter: opacity(0-1 || prozent); bekannt aus Slideshows,
filter: invert(0-1 || prozent);,
filter: hue-rotate(90deg); Gradzahl um den Farbkreis.

Aber es gibt noch mehr und wer sucht, der findet. So viele Möglichkeiten zu finden, war garnicht meine Absicht. Da kam wohl der Spieltrieb durch!

Da der IE hier nicht mitspielt und auch nicht mehr weiterentwickelt wird, wird jeder vor dem Problem stehen: „Erwarte ich nun, dass Windowsbenutzer auf V 10 updaten, um mit Micrsoft Edge die Filter erleben zu können? Seit IE 10 werden garkeine Filter mehr unterstützt! Da braucht man auch nicht mehr die Windows-Grafikbibliothek DirectX bemühen. Da empfielt sich der Rat: „Wechsele den Browser“! Aber wie vermittelt man sowas?
Bei aller Freundschaft: Die lassen sich nicht mehr eindeutig oder garnicht identifizieren. Mit JavaScript:
Aja, aha!
Und was sagt PHP:
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
Ermittelt: Na, wer bist Du denn? Kannst Du schon Deinen Namen? Nöö?, dann ist das hier auch nichts für Dich!

Ein Browsertest einfach nur kopiert von: „ http://php.net/manual/de/function.get-browser.php“ .
Dein Browser: Unbekannt AppleWebKit auf Unbekannt