Die Kulisse-filter CSS Eigenschaft

0
11

Ich hatte nie gehört, dass die hintergrund-Eigenschaft filter bis gestern, aber nach ein paar Stunden Herumspielen mit es ich bin positiv, dass es nichts anderes als Magie. Dies ist, weil es fügt Filter (wie das ändern der Farbe, Kontrast oder Unschärfe) der hintergrund eines Elements ohne Veränderung der text-oder andere Elemente im inneren.

Nehmen Sie dieses Beispiel, wo habe ich repliziert die iOS-Benachrichtigungs-Stil: sehen Sie, wie der hintergrund eines jeden dieser Felder sind verschwommen, aber der text nicht?

Das ist nur eine einzige Zeile CSS zu erstellen, verblasst hintergrund-Effekt, wie dieser:

.Benachrichtigung {
hintergrund-filter: Weichzeichner(3px);
}

Jetzt ist es erwähnenswert, dass die browser-Unterstützung für diese CSS-Eigenschaft ist nicht besonders gut unterstützt, nur noch (siehe unten). Aber wir haben versucht, das zu tun diese Art der Filterung Zeug für eine wirklich lange Zeit und so ist es schön zu sehen, dass die Fortschritte, die hier gemacht wurden. Chris schrieb über die “frosted glass” – Technik in 2014 und den Weg zurück dann mussten Sie auf ein paar seltsame hacks und zusätzliche Bilder zu replizieren, die Wirkung. Jetzt können wir schreiben viel weniger code, um den gleichen Effekt!

Wir bekommen auch von der Abholung eine Menge mehr Filter, als nur das Milchglas Stil. Die folgende demo zeigt alle von der Kulisse-filter-Werte und wie Sie den hintergrund ändern:

Jede dieser Boxen sind nur einzelne divs, wo habe ich ein anderes hintergrund-filter für jeden Bedarf. Und das ist es! Ich habe irgendwie nicht glauben können, wie einfach das ist, eigentlich.

Natürlich können Sie die Kette Sie zusammen, wie so:

.element {
hintergrund-filter: blur(5px) Kontrast(.8);
}

Und dies könnte machen alle Arten von kunstvollen und komplexen Konstruktionen, vor allem, wenn Sie beginnen, kombinieren Sie zusammen mit Animationen.

Aber warten Sie, warum brauchen wir überhaupt diese Eigenschaft? Nun, nach der Lektüre ein wenig, es scheint, dass die go-to-Standard-Beispiel ist ein modales von einigen Beschreibung. Das ist es, was Guillermo Esteves war das Experimentieren mit back in 2015:

Finden Sie den Stift PwRPZa von Guillermo Esteves (@gesteves) auf CodePen.

Ich denke, wir können etwas tun, viel seltsamer und schöner, wenn wir unseren Geist zu ihm.

Ein Hinweis zur browser-Unterstützung

Die hintergrund-Eigenschaft filter wird nicht gut gestützt, die zum Zeitpunkt des Schreibens dieses Artikels. Und auch in Safari, wo es unterstützt wird, werden Sie noch brauchen, um das Präfix es. Es gibt keine Unterstützung für Firefox überhaupt. Aber, wirklich, tun Sie websites müssen genau gleich Aussehen in jedem browser?

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Keine Keine Keine Keine 17 9*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.0-9.2* Keine Keine Keine Keine Keine

Weiter Lesen

  • hintergrund-filter auf MDN
  • Gebäude iOS-wie Transparenz-Effekte in CSS mit hintergrund-filter