Windows Aero effect in pure HTML + CSS + JS

    In pursuit of the post “ jQuery → Impressive Animation Effects ” I decided to show my craft, created more for fun, and not for real implementation. I tried to make the background blur effect like in Windows Aero.



    Here is an example , together with pictures it weighs 200 Kb. Quite a bit of.

    The next step is to use one picture for the background, and blur it with SVG. The SVG example for some reason only works in Opera (as it is written in the comments, it also works in other browsers) and loads the processor 100%.

    Conclusion: using existing technologies, this effect can be realized, but either the pictures will weigh a lot, or the processor will be fully loaded. The real implementation is still a long way off, but maybe someone knows a more elegant solution?

    Also popular now: