Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's some results, if by blur you mean fuzziness:</p> <p>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:</p> <p><a href="http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur" rel="nofollow noreferrer">http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur</a></p> <p>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 <code>CSS positioning</code> and <code>opacity</code> - idk if <code>zoom</code> 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:</p> <p><a href="http://jsfiddle.net/9qnsz/2/" rel="nofollow noreferrer">http://jsfiddle.net/9qnsz/2/</a></p> <p>This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:</p> <p><a href="https://stackoverflow.com/questions/1966949/gaussian-blur-onhover-using-jquery">Gaussian Blur onHover Using jQuery</a></p> <hr> <p>EDIT: As requested, the contents of the jsfiddle:</p> <pre><code>&lt;div class="container"&gt; &lt;div class="overlay"&gt; &lt;p&gt;Please register etc etc...&lt;/p&gt; &lt;/div&gt; &lt;form action="javascript:;" class="form0"&gt; &lt;input type="text" value="Username" /&gt; &lt;input type="text" value="Password" /&gt; &lt;button&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;form action="javascript:;" class="form1"&gt; &lt;input type="text" value="Username" /&gt; &lt;input type="text" value="Password" /&gt; &lt;button&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;form action="javascript:;" class="form2"&gt; &lt;input type="text" value="Username" /&gt; &lt;input type="text" value="Password" /&gt; &lt;button&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;form action="javascript:;" class="form3"&gt; &lt;input type="text" value="Username" /&gt; &lt;input type="text" value="Password" /&gt; &lt;button&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;form action="javascript:;" class="form4"&gt; &lt;input type="text" value="Username" /&gt; &lt;input type="text" value="Password" /&gt; &lt;button&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;/div&gt;​ .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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload