Blur mit HTML & CSS

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
 
Hi,

leider genau der "gegenteilige" Effekt... nicht das Fenster selbst sondern das was darunter liegt!!!
 
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...
 
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ß
 
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

51035-c70511c3e16cb4d4adfeb54998b16651.jpg
 

Anhänge

  • img.JPG
    img.JPG
    106 KB · Aufrufe: 3
Zuletzt bearbeitet:
Zurück