CSS: backdrop-filter

Die experimentelle Funktion backdrop-filter hat viel Potenzial. Ich stelle diese kurz vor, um euch einen Einblick zu ermöglichen.

Diese CSS-Eigenschaft ermöglicht es, den Bereich hinter einem Element zu manipulieren. Dazu muss das Element durchsichtig sein (oder zumindest teilweise). Die Effekte reichen von „blur“ bis hin zu „grayscale“ oder „sepia“.

Aktuell unterstützen nur wenige Browser (Edge und Safari) die Technologie1. Dennoch demonstriere ich euch unten, was die Funktonalität bietet. So viel sei gesagt: Ich freue mich auf diese Funktion, denn sie wird das Gestalten von Webseiten bereichern.

Anmerkung: Vor Kurzem wurde mit „backdrop-filter“ ein iPad sowie ein iPhone zum Absturz gebracht. Daher sollte diese experimentelle Technologie (noch) nicht in Produktion eingesetzt werden.

Ich habe einige Effekte der neuen Funktionalität ausprobiert (unten). Wer interessiert ist, dem empfehle ich diesen Eintrag in den MDN web docs.

<html>
<head>
	<style>
		body {
			background-image: url("Z:/Bilder/Texel 2018/20180904_172703.jpg");
			background-repeat: no-repeat;
			background-size: 100% auto;
		}
		
		div {
			display: inline-block;
			width: 120px;
			height: 100%;
			margin-right: 10px;
		}
		
		.brightness {
			backdrop-filter: brightness(1.4);
			-webkit-backdrop-filter: brightness(1.4);
		}
		
		.blur {
			backdrop-filter: blur(5px);  
			-webkit-backdrop-filter: blur(5px);
			border-radius: 20px;
		}
		
		.grayscale {
			backdrop-filter: grayscale(0.8);  
			-webkit-backdrop-filter: grayscale(0.8);
		}
		
		.contrast {
			backdrop-filter: contrast(1.6);  
			-webkit-backdrop-filter: contrast(1.6);
		}

		.sepia {
			backdrop-filter: sepia(1.0);  
			-webkit-backdrop-filter: sepia(1.0);
		}		
		
		.invert {
			backdrop-filter: invert(0.7);
			-webkit-backdrop-filter: invert(0.7);
		}
		
	</style>
</head>
<body>

<div class="brightness">brightness(1.4)</div>
<div class="blur">blur(5px)</div>
<div class="grayscale">grayscale(0.8)</div>
<div class="contrast">contrast(1.6)</div>
<div class="sepia">sepia(1.0)</div>
<div class="invert">invert(0.7)</div>

</body>
</html>

Resultat (Screenshot):

Übersicht: einige Effekte der backdrop-filter Funktion


1: In Opera und Chrome muss das Feature explizit aktiviert werden.

Was denkst du über diesen Post?
  • Gut (2)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)

von | Kategorie: Programmierung
Schlagwörter: // // //

Schreibe einen Kommentar

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

+ 10 = 14