|
|||
Blur/Glass-Effekt mit CSS
Hallo,
ich experimentiere gerade, ob es inzwischen möglich ist, einen Glass-Effekt in CSS zu realisieren, bzw. Filter auf den durchscheinenden Hintergrund eines Elementes anzuwenden. Bislang geht dies anscheinend nur mit der background: -moz-element() Eigenschaft. Ich habe hier ein Testfile, das weitere Möglichkeiten erschließen soll, aber bislang werden die (Versuch 2 & 4) von keinem Browser unterstützt: mitjastachowiak.de/projects/jslib/test/glass.html Hat jemand noch andere Ideen, die eventuell funktionieren könnten? Das Problem ist anscheinend, dass die Filter auf den Element-Layer angewendet werden, bevor dieser gerendert wird. Die seit FF 32 eingeführte mix-blend-mode wird anscheinend während des Renderns aktiv - in dieser Stufe müsste sinnvoller Weise auch der Glass-Effekt berechnet werden, also als Anwendung eines Filters auf den bisher gerenderten Teil der Seite, aber die Kombination von mix-blend-mode und filter geht (noch) nicht. |
Sponsored Links |
|
|||
Bald verfügbar
Grade wird über den backdrop-filter eine einfache Möglichkeit zum Background-Blurring geschaffen. Ist aber aktuell noch nicht in den Releases der Browser verfügbar.
Alternativ habe ich eine eigentlich einfache Möglichkeit gefunden, um den Hintergrund hinter rechteckigen Objekten zu verwischen, siehe Beispiel 6: https://mitjastachowiak.de/components/test/glass.html |
Sponsored Links |
|
|||
Zitat:
https://css-tricks.com/almanac/properties/f/filter/ Can I use... Support tables for HTML5, CSS3, etc |
|
|||
Die Filter an sich schon, die habe ich ja in meinem Beispiel, aber die backdrop-Eigenschaft noch nicht. Wie gesagt ist es je nach Struktur der Elemente sehr umständlich, diese Eigenschaft mit aktuell verfügbaren Mitteln nachzubilden. Aber ich bin drann
|
|
|||
Ok, so sieht das ganze dann in Aktion aus: https://mitjastachowiak.de/?jsw&$Sta...ml,params=win7
Bis der backdrop-filter kommt, habe ich das mit dem feMerge + viel Javascript gemacht. Das heißt, es gibt noch Darstellungsfehler an den runden Ecken der Fenster und das Blurring von halbtransparenten Objekten ist nicht so klar, weil das ungeblurrte Bild durchscheint. Dadurch wird zusätzlich die Transparenz stark reduziert. |
Stichwörter |
blur, element, filter, glass, hintergrund |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Verschachteln und Erweitern von CSS? | DerJo | CSS | 4 | 25.01.2010 19:07 |
IE 6 erkennt seine CSS Datei nicht | Perelina | (X)HTML | 4 | 07.08.2009 19:56 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
CSS - Mouseover - Effekt mit Grafiken erzielen | fuhrheiner | CSS | 13 | 11.10.2005 19:44 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |