ebellempire/Cross-browser-HTML-Blur-Filter.markdown

## Cross-browser-HTML-Blur-Filter.markdown

      
    Raw
  

              Cross-browser-HTML-Blur-Filter.markdown
            
          
    Cross-browser HTML Blur Filter

I sorted through the cross-browser blur filter complexities to come up with –I think– a pretty solid solution. Basically uses CSS3 filters for all modern browsers ('blur' value for all but Firefox, which needs discrete SVG), uses MS filters for IE 9 and older, and StackBlurCanvas script for IE10+.
A Pen by Erin Bell on CodePen.
License.

  
## index.html
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Cross-Browser Blur Filter with CSS and StackBlurCanvas</title>
</head>
<body>

 <!-- Scripts: JQuery, Modernizr (+cssfilters), Resig's Class, StackBlurCanvas. This Pen example may not render the blur effect in IE10+ but I assure you if you re-assemble sensibly in a proper environment, it will work. Note that you need to use the Paul Irish IE conditional class trick. Here are some working demo files http://cl.ly/1N1l3Q1i0f2b -->

<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>

<script src="http://erinbell.org/BLUR/demo/javascript/modernizr.js" type="text/javascript"></script>

<script src="http://erinbell.org/BLUR/demo/javascript/lib/class.js" type="text/javascript"></script>

<script src="http://erinbell.org/BLUR/demo/javascript/controller/stackblur.min.js" type="text/javascript"></script>


<figure>
	<div class="blur"></div>
	<img class="offset" src='http://f.cl.ly/items/1J0T0L3q1h1a0c3Q0W0I/meatloaf.jpg'>
</figure>

<!-- SVG filter for Firefox  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <filter id="blur">
     	<feGaussianBlur stdDeviation="5"/>
    </filter>
    <filter id="drop-shadow">
	    <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
	    <feOffset dx="5" dy="5" result="offsetblur"/>
	    <feFlood flood-color="#000000"/>
	    <feComposite in2="offsetblur" operator="in"/>
	    <feMerge>
		    <feMergeNode/>
		    <feMergeNode in="SourceGraphic"/>
	    </feMerge>
	</filter>
</defs>
</svg>

</body>
</html>

## script.js
// !Modernizr.svgfilters returns a false positive in IE11
// As a result, we need to also try to sniff out Firefox via InstallTrigger
// See: http://jsfiddle.net/9zxvE/383/
// See also: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

if(
!Modernizr.cssfilters && // Not a browser with CSS filter support
!( $('html').hasClass('lt-ie9') ) && // Not an old version of IE (which support MS filters)
!(typeof InstallTrigger !== 'undefined') // Not Firefox (which supports SVG filters)
){
	var blur = new Blur({
		el : document.querySelector('.blur'),
		path : 'images/meatloaf.jpg',
		radius : 5,
		fullscreen : true
		});
}

## style.css
.blur{
	filter: blur(5px); /* Someday, sigh ... */
	-webkit-filter: blur(5px); /* Prefixed CSS3 blur filters */
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: url(#blur); /* Firefox needs SVG */
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); /* IE lte 9 */

	background-image: url(http://f.cl.ly/items/1J0T0L3q1h1a0c3Q0W0I/meatloaf.jpg);
	background-repeat: repeat; /* Repeat for browsers that don't support background-size */
	background-position: top center;
	background-size: cover;

	display: block;
	height:30em;
	width: 100%;
}
figure{
	overflow: hidden; /* Clip any overflow created by the blur effect */
	margin: 0 auto;
	padding: 0;
	display: block;
	background: #333;
	width: 100%;
	height:30em;
}
.offset{
	float:right;
	display: block;
	margin-top: -18em;
	margin-right: 5%;
	box-shadow: 0 0 3px #333;
	position: relative;
	z-index: 2;
	width:90%;
	max-width: 20em;
	height:15em;
	padding: 1em;
	background: #fafafa;
}
	<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>Cross-Browser Blur Filter with CSS and StackBlurCanvas</title>
	</head>
	<body>

	<!-- Scripts: JQuery, Modernizr (+cssfilters), Resig's Class, StackBlurCanvas. This Pen example may not render the blur effect in IE10+ but I assure you if you re-assemble sensibly in a proper environment, it will work. Note that you need to use the Paul Irish IE conditional class trick. Here are some working demo files http://cl.ly/1N1l3Q1i0f2b -->

	<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>

	<script src="http://erinbell.org/BLUR/demo/javascript/modernizr.js" type="text/javascript"></script>

	<script src="http://erinbell.org/BLUR/demo/javascript/lib/class.js" type="text/javascript"></script>

	<script src="http://erinbell.org/BLUR/demo/javascript/controller/stackblur.min.js" type="text/javascript"></script>


	<figure>
	<div class="blur"></div>
	<img class="offset" src='http://f.cl.ly/items/1J0T0L3q1h1a0c3Q0W0I/meatloaf.jpg'>
	</figure>

	<!-- SVG filter for Firefox -->
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
	<filter id="blur">
	<feGaussianBlur stdDeviation="5"/>
	</filter>
	<filter id="drop-shadow">
	<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
	<feOffset dx="5" dy="5" result="offsetblur"/>
	<feFlood flood-color="#000000"/>
	<feComposite in2="offsetblur" operator="in"/>
	<feMerge>
	<feMergeNode/>
	<feMergeNode in="SourceGraphic"/>
	</feMerge>
	</filter>
	</defs>
	</svg>

	</body>
	</html>
	// !Modernizr.svgfilters returns a false positive in IE11
	// As a result, we need to also try to sniff out Firefox via InstallTrigger
	// See: http://jsfiddle.net/9zxvE/383/
	// See also: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

	if(
	!Modernizr.cssfilters && // Not a browser with CSS filter support
	!( $('html').hasClass('lt-ie9') ) && // Not an old version of IE (which support MS filters)
	!(typeof InstallTrigger !== 'undefined') // Not Firefox (which supports SVG filters)
	){
	var blur = new Blur({
	el : document.querySelector('.blur'),
	path : 'images/meatloaf.jpg',
	radius : 5,
	fullscreen : true
	});
	}
	.blur{
	filter: blur(5px); /* Someday, sigh ... */
	-webkit-filter: blur(5px); /* Prefixed CSS3 blur filters */
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: url(#blur); /* Firefox needs SVG */
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); /* IE lte 9 */

	background-image: url(http://f.cl.ly/items/1J0T0L3q1h1a0c3Q0W0I/meatloaf.jpg);
	background-repeat: repeat; /* Repeat for browsers that don't support background-size */
	background-position: top center;
	background-size: cover;

	display: block;
	height:30em;
	width: 100%;
	}
	figure{
	overflow: hidden; /* Clip any overflow created by the blur effect */
	margin: 0 auto;
	padding: 0;
	display: block;
	background: #333;
	width: 100%;
	height:30em;
	}
	.offset{
	float:right;
	display: block;
	margin-top: -18em;
	margin-right: 5%;
	box-shadow: 0 0 3px #333;
	position: relative;
	z-index: 2;
	width:90%;
	max-width: 20em;
	height:15em;
	padding: 1em;
	background: #fafafa;
	}