Hintergrund Blur effekt wie bei Windows Vista

[ciberjoerg]

Jeder kennt doch sicher den Effekt den Windows Vista berühmt gemacht hat. Dieser Blur effekt der den Hintergrund in sich verschwimmen lässt. Gibts solch eine Möglichkeit auch in css oder evtl. auch mit Javascript zu verwirklichen?

Wenn ja Wäre ein gutes Tutorial oder Ähnliches Sehr hilfreich.

 

[queicherius]

Du kannst dir ja mal http://www.windoof.org/ anschauen, die haben das Windows-Interface nachgebaut. Aber selbst diese Seite benutzt kein Blur...

 

[hela]

Hallo,

im Internet-Explorer würde es mit dem BLUR-Filter funktionieren (hier die Demo dazu).
Ist aber kein CSS2-Standard und bei CSS3 habe ich so etwas auch noch nicht gesehen.

<edit>
In den modernen Browsern könnte man den Blur-Effekt vermutlich mit Hilfe von "multiple backgrounds" emulieren, "stretching" würde sich wahrscheinlich auch eignen. Ich habe das selbst noch nicht gemacht - ist nur eine Idee von mir.
</edit>

 

[EMP3ROR]

Ich habe es mal bei einer Testwebsite so gemacht wie es mein Vorposter wahrscheinlich gemeint hat. Dazu habe ich das Hintergrundbild kopiert und darauf mit Gimp den blur-filter angewendet. Im body dann den normalen Hintergrund gesetzt und dann noch "background-attachment:fixed;". An der Stelle wo der Blur-Effekt sein soll dann entsprechend das andere Hintergrundbild nehmen und auch da wieder "background-attachment:fixed;".

Hier meine Website, da kannst du es dir mal anschauen: http://www.iamwhoiam.net/max/remaster/

 

[hela]

@EMP3ROR: Sieht gut aus! Ich hätte nicht erwartet, dass sich die Position des fixierten Tabellenzellenhintergrundes am BODY orientiert.

Gerade per Zufall gefunden (eigentl. was anderes gesucht):

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1
​

Hier wird der Fensterhintergrund mit der CSS3-rgba-Eigenschaft halbtransparent gemacht. Eben kein Blur-Effekt.

edit:
Das Blur-Bild kann man übrigens auch auf dem Server mit einem PHP-Imagefilter erzeugen.