✔ Blur mit HTML & CSS

[baeri]

das ist sehr nett

hier nochmal zur Verdeutlichung wie ich mir das im Endresultat vorstelle...

Hier evtl. nochmal ein schöner "versuchsaufbau"
https://jsfiddle.net/baer777/18qc4kyq/2/

Komplette Seite lässt sich nach rechts und links Scrollen...
=> als Overlay gibt es rechts einen Bereich welcher Fixiert ist gerade ist dieser bereich halbtransparent... künftig soll dies "gaussian blur" (verschwommen sein). Ich bin offen für Javascript, CSS, HTML, PHP...

Vielen vielen Dank für jeden Tipp

 

[Jan-Frederik Stieler]

Hi,
hab Dir hier mal ein jsBin erstellt: https://output.jsbin.com/dujoneg
Ich denke das ist es was Du möchtest.

EDIT: https://jsfiddle.net/r1h1kayc/1/

Grüße

 

[baeri]

Hi,

leider genau der "gegenteilige" Effekt... nicht das Fenster selbst sondern das was darunter liegt!!!

 

[baeri]

das hier, kommt schon eher an das was ich will:

https://jsfiddle.net/baer777/r1h1kayc/3/

=> allerdings ist der bereich wo das "blur" ist, zu groß <- da nur unterhalb des halbtransparenten DIVs gewollt!

 

[baeri]

meine einzige Idee welche ich habe, wäre "mehrere" Elemente nebeneinander zu platzieren (mehrere deshalb, weil ich das nicht nur rechts haben möchte)...

und dann via Javascript das Scrollevent aufnehmen... und in allen elementen "wiedergeben" ... aber ist das einmal unsyncron schaut es kacke aus, und irgendwie fühlt es sich auch "gepfuscht" an...

Daher liegt meine Hoffnung immer noch in einer CSS3 Lösung...

 

[Jan-Frederik Stieler]

Hi,
Dann verschachtelt doch die Elemente.
https://jsfiddle.net/n0n5n7c1/

Wenn Du jedoch den blur effect dynamisch haben willst, als beim scrollen soll der Hintergrund dynamisch weich gezeichnet werden, das funktioniert mit CSS nicht. Die CSS Effekte wirken nur auf die Elemente auf welche Sie angewendet werden und deren Kindelemente und nicht auf Elemente welche irgendwo im Dom vorkommen.

Gruß

 

[baeri]

sind meine Anforderungen nicht klar definiert, oder habt ihr nur keine Idee wie man es lösen kann und gebt mir dann unbrauchbare Vorschläge?

=> ich bin sehr dankbar über jeden Vorschlag, aber schaut Mal an was ich "vorgebaut" habe... es sollte klar sein, dass ich nur einen bestimmten Bereich eines ganzen als blur haben will...

danke

edit: gelöst... aber mit js