Vista Aero effect by CSS3

[composite]

Just see and enjoy it.

 

http://jsfiddle.net/composite/6zr2q/embedded/result/

 

HOW TO:

just click anywhere to show or hide and enjoy aero effects.

 

BROWSERS:

Firefox (All versions exclude blur effects but looks good like windows 8.)

Chrome 19 and above.

Safari 6 and above (sorry windows safari users.).

Opera 15 and above (Only affect by webkit).

Sorry for IE users. IE All version include 11. I'm finding figure out for IE looks like Firefox.

 

TECH:

Effects by CSS3 Only. Javascript is just for toggle class. that's all.

transition used for show and hide animation.

transform used for show and hide effect.

filter:blur used for blurred window effect.

Edited December 19, 2013 by composite

[lovewebdesign]

Nice design. Thanks for sharing !

[davej]

Translucent frame. Rounded corners. Gentle fade in and fade out. Fake desktop image. Rather nice.

 

...but I can't grab it and move it. Fix that.

Edited December 19, 2013 by davej

[composite]

...but I can't grab it and move it. Fix that.

 

I'm sorry. but I have no plan for that because grab and move requires javascript.

I just want to say It's possible to vista aero show and hide effect can do it by CSS3.

Edited December 20, 2013 by composite

[davej]

Well, you toggle it using Javascript, and I can't think of too many uses for it that wouldn't be based on Javascript.