zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Blur/Glass-Effekt mit CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2014, 15:50
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.06.2017, 22:37
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.06.2017, 10:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
GrIst aber aktuell noch nicht in den Releases der Browser verfügbar.
Doch, in aktuellen Releases ist das sehr wohl verfügbar, mit der Ausnahme von Edge, welcher Probleme mit der url-Funktion hat.
https://css-tricks.com/almanac/properties/f/filter/
Can I use... Support tables for HTML5, CSS3, etc
Mit Zitat antworten
  #4 (permalink)  
Alt 12.06.2017, 15:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 12.06.2017, 15:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wieder was gelernt, da war mir der Unterschied nicht so bewusst. Danke sehr.
So wie es ausschaut dauert es noch, bis diese backdrop-filter kommen.
Mit Zitat antworten
  #6 (permalink)  
Alt 14.06.2017, 15:47
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Cool

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.
Mit Zitat antworten
Antwort

Stichwörter
blur, element, filter, glass, hintergrund

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:13 Uhr.