Blur mit HTML & CSS


baeri

Erfahrenes Mitglied
#1
Hi,

ich suche nach einer Möglichkeit ein "Vordergrundelement" mit einem "Blureffekt" zu versehen, welcher sich auf dem Hindergrund auswirkt...

> Allerdings sollte dies kein "fester" Hintergrund sein, sondern "eigentlich" alle darunterliegenden Elemente welche sogar beweglich (scrollbar) sind <- Text, Bilder, Shapes...

hier habe ich ein Konzept gefunden, welches einen Blureffekt genau so macht wie ich mir das vorstelle:
https://jsfiddle.net/baer777/51grzx8k/1/

allerdings eben NUR auf das Hintergrundbild und dies nicht beweglich :/
Hier kann man gut sehen, dann der Hintergrund eigentlich "kopiert" wird:
https://jsfiddle.net/baer777/51grzx8k/2/

gibt es evtl. eine Bibliothek <- gerne auch Javascript die das "unkompliziert" umsetzt?
 

EuroCent

Erfahrenes Mitglied
#2
Dies sollte über das entsprechende Bild gehen.

Beispielsweise:
HTML:
<img id="hintergrundbild_mit_Blureffekt" src="SRC_ZUM_BILD"/>
CSS:
#hintergrundbild_mit_Blureffekt {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
 

baeri

Erfahrenes Mitglied
#3
hö??? das ist doch noch weniger als das was ich bereits habe?

Ich kenne den Hintergrund doch nicht! Dieser wird doch Dynamisch generiert aus (wie bereits erwähnt), Text, Shapes und Bilder...
=> Wie ich das Bild mit Blur effekt erzeugen kann, habe ich ja bereits <- wenn auch nicht beweglich...

Jetzt brauch ich das ganze 1. Beweglich und 2. für alle darunter liegenden Elementen...

Ein Bild mit Blureffekt zu erzeugen ist nicht die echte Problematik :/
 

baeri

Erfahrenes Mitglied
#5
nein,....

du erkennst doch den Fehler, dass beim Scrollen, das Bild hinter der Box (das blured element) NICHT mitscrollt <- und auch nicht perfekt passt...

Obendrein will ich nicht nur das Bild als blured element haben sondern auch noch alles andere was zwischen Bild und Box liegt <- da häng ich aber schon, ich bekomme noch nicht mal was "dazwischen" ...

=> also will ich Faktisch über eine "ganz normale Seite" mit Text, Elementen und Bildern >eine Box legen< (welche irgendwelche undefinierten Elemente enthält) FIXIERT also mit einer festen Position. Unterhalb der Box soll die Seite aber noch sichtbar sein (aber nicht halbtransparent sondern mit einem Blur <- also verschwommen)
 

EuroCent

Erfahrenes Mitglied
#6
Dann mach doch den Blureffekt über den Body oder DIV bereich der mit Werten belegt ist, wie du ihn benötigst, da wo du es haben möchtest :)

Ansonsten steh Ich selbst auf dem Schlau und bin raus :D
 

baeri

Erfahrenes Mitglied
#7
Das könnte, ich, ist aber eben auch nicht das Ziel, weil wie erwähnt soll nur ein "kleiner fester ausschnitt" für den Kompletten "beweglichen Bereich" den blur effekt erzeugen...

... leider bin ich mir sicher, dass CSS alleine das nicht hinbekommt...
> evtl. kann ein Moderator das ins Javascript Forum verschieben...
 

EuroCent

Erfahrenes Mitglied
#8
Das kann CSS, wie gesagt wenn es nur ein Fensterausschnitt sein sollte, dann via Body, DIV oder whatever Element.
Die Scrollbar kann ebenso über CSS gesteuert werden :)
 

baeri

Erfahrenes Mitglied
#9
leider kein beispiel hierfür bisher gefunden... <- GENAU DESHALB schreibe ich ja hier im Forum...

"dann mach halt wie dus willst" ist leider nicht hilfreich...
 

baeri

Erfahrenes Mitglied
#11
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
 

baeri

Erfahrenes Mitglied
#15
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

Monsterator
Moderator
#16
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

Erfahrenes Mitglied
#17
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

 

Anhänge

Zuletzt bearbeitet:

Neue Beiträge