-moz-window-inactive + feGaussianBlur

Applies Gaussian blur to the window when it's inactive. (Firefox 4 only)

by marcoos

HTML

<h1>-moz-window-inactive + feGaussianBlur</h1>

<p>Deactivate this window for its content to get blurred - even while playing YouTube video.</p>

<iframe title="YouTube video player" class="youtube-player" width="480" height="390" src="http://www.youtube.com/embed/g0owAXCPPnc?autoplay=1"></iframe>

<p>No JS here. Flash is only used by YouTube video above.</p>

<p><small>Note: -moz-window-inactive and using SVG filters for non-SVG content is non-standard yet.</small></p>

<footer><small>Another HTML5+CSS+SVG experiment by <a href="http://twitter.com/marcoos" target="_blank">@marcoos</a>.</small></footer>
    
<svg width="0" height="0">
    <filter id="f1"><feGaussianBlur stdDeviation="3"/></filter>
</svg>

CSS

body { font-family: lucida grande; }
 body:-moz-window-inactive { filter: url(#f1); }
 h1{font-size:24px}
 p {margin:0.5em 0}
iframe {border:0}