Endlich: der CSS backdrop-filter

Publiziert am 20. Februar 2020 von html5-admin

Der Backdrop-Filter bringt endlich wieder frischen Schwungs ins Webdesign. Das aktuelle Flat-Design lässt wenig Platz für Schnörkel und Schatten, doch dank des backdrop-filters können wir nun wieder etwas kreativer werden. Mit den aktuellen Browsergenerationen wird dieses tolle Feature nun sowohl von Chrome, Safari, als auch Edge unterstützt und kann damit endlich unbesorgt eingesetzt werden (siehe canIuse: backdrop-filter).

Schauen wir uns an, welche Möglichkeiten der backdrop-filter bietet:

backdrop-filter: blur()

Der nützlichste Filter ist meines Erachtens nach das „Blur“, also den hinter dem Element liegenden Content verschwommen darzustellen.

Das ist genau das, worauf wir für Header und Floating Boxes gewartet haben: eine ästhetische Methode, den Hintergrund zwar anzuzeigen, aber so „entschärfen“, dass es die Lesbarkeit des eigentlichen Textes nicht beeinträchtigt. Der blur-Filter eignet sich dazu noch besser, als Transparenzen alleine mittels halbtransparenter Hintergründe, weil der verschwommene Hintergrund einen besseren Kontrast bildet.

Dieses Textfeld hat z.B. die Stypes: 


backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);

backdrop-filter: sepia()

Der sepia-Filter erzeugt einen schönen warmen Farbton unter dem so formatierten Element und erinnert damit an alte Fotographien (backdrop-filter: sepia(.8)):

Weitere backdrop-filter

  • brightness()
  • contrast()
  • drop-shadow()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – (für SVG Filter)
Dieser Beitrag wurde unter CSS3 abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

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