Creating a frosted glass effect using CSS is a better method than the old javascript hacks. Using CSS to create the frosted effect uses fewer resources from the site visitors computer by using the native browser rendering engine.
To test this just drag the frosted glass example in the top right of this page.
Ok, without wasting much of your time I’m going to jump straight into it.
The main components used for a classic frosted glass effect are:
> The original content
– – > The frosted glass container ( Exp. <div> )
– – – – > Original content copy inside the glass container (the element that mimics the content on the page with a blur effect).
For a basic idea of how this works. Here is a simple example:
HTML structure:
Read More
Source: New feed