LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



  


  
  Cross-Browser Blur Filter with CSS and StackBlurCanvas



    
  

  

  

  

  
  
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(https://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;
}
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 
		});
}
Host Instantly Drag and Drop Website Builder

 

Description

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+.
Term
Mon, 11/27/2017 - 21:38

Related Codes

Pen ID
Pen ID
Pen ID