Blur effect on the entire webpage

Question

I want that the unregistered users on my website, see the entire website\'s pages with a blur effect.

How can I create this blur effect with css ?

Answer 1

Here's some results, if by blur you mean fuzziness:

This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioning and opacity - idk if zoom might help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:

http://jsfiddle.net/9qnsz/2/

This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:

Gaussian Blur onHover Using jQuery

---

EDIT: As requested, the contents of the jsfiddle:

    

        
Please register etc etc...
    

    

        
        
        Submit
    
    

        
        
        Submit
    
    

        
        
        Submit
    
    

        
        
        Submit
    
    

        
        
        Submit
    

​


.container {
    width:500px;
    height:500px;
    position:relative;
    border:1px solid #CCC;
}
    form {
        position:absolute;
        left:10px;
        top:10px;
    }
    form.form0 {
        left:11px;
        top:11px;
        opacity:0.1;
    }
    form.form1 {
        left:8px;
        top:8px;
        opacity:0.1;
        zoom:1.02;
    }
    form.form2 {
        left:11px;
        top:11px;
        opacity:0.1;
        zoom:1.01;
    }
    form.form3 {
        left:9px;
        top:9px;
        opacity:0.2;
    }
    form.form4 {
        left:11px;
        top:11px;
        opacity:0.1;
    }

    .overlay {
        width:250px;
        height:250px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid #666;
    }