Vis2 (und 1) CSS Backdrop Filter unknown property?

[900icarD]

Hallo Zusammen,

ich habe zu diesem Thema noch keinen Beitrag gefunden.

Ich würde gern in der VIS manche Elemente mit der CSS Eigenschaft backdrop-filter verschönern, welcher sozusagen einen Milchglas bzw. frosted glass effect erzeugt.
Z.B. so hier https://css-tricks.com/backdrop-filter-effect-with-css/

Im CSS Reiter der Vis kann ich das Element auch eingeben und es wird auch in der Liste der Elemente angezeigt.
Sobald ich die Zeile aber fertig geschrieben habe, also backdrop-filter: blur(10px); erscheint ein gelbes Ausrufezeichen mit der Info "unknown property backdrop-filter"

Jemand eine Idee woran das liegen kann bzw. ob ich was falsch mache?

.container {
    backdrop-filter: blur(10px);
}

Viele Grüße und einen schönen Sonntag

[OliverIO]

@900icard

Wahrscheinlich kennt die Syntaxprüfung des Editors diese Regeln nicht.
wenn es funktioniert, einfach ignorieren

[900icarD]

@oliverio
Leider funktioniert es eben auch nicht.

[OliverIO]

@900icard

hier mal widgets zum importieren

Spoiler

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<h1>test</h1>","class":"backdrop"},"style":{"left":"187px","top":"179px","z-index":"1"},"widgetSet":"basic"},{"tpl":"tplImage","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"/vis/img/eg_trans.png"},"style":{"left":"235px","top":"54px","width":"505px","height":"413px"},"widgetSet":"basic"}]

und das im css reiter hinzufügen

.backdrop {
    backdrop-filter: blur(10px);
  }

ich habe die css klasse mal backdrop genannt. das sollte dann auch im widget bei general/css class eingetragen sein.

ausserdem sollte man darauf achten, das das widget mit dem backdrop VOR dem widget ist, auf das der effekt angewendet werden soll. falls es das nicht ist, muss man bei z-index die zahl nach und nach erhöhen.
in vis-edit muss man das widget deselektieren, das das css angewendet wird. es hat da so ein paar besonderheiten.

dein fehler war wahrscheinlich, das du die css regel einfach nur kopiert hast. sie hies container. du musst sie ja auch noch irgendwo zuweisen, sonst weiß der browser ja nicht welches element du den meinst.

[900icarD]

@oliverio sagte in Vis2 (und 1) CSS Backdrop Filter unknown property?:

.backdrop { backdrop-filter: blur(10px); }

Hallo Oliver,
perfekt jetzt funktionierts!
Ich habs zwar noch nicht ganz gecheckt was ich falsch gemacht habe, aber das muss ich mir morgen oder die Tage mal genauer ansehen.

Nochmals vielen Dank für Deine Hilfe.

[OliverIO]

@900icard

du hast die css anweisung einem klassennahmen container zugeordnet

dieser klassenname muss aber auch zu einem element gehören