Web · 2016-04-06

Have fun with this ‘blurry-ing’ plugin

new plugin

Do you like to create special effects like blur, drop-shadow, saturate, opacity or sepia? Values of grayscale, hue rotation & linear multipliers mean a great deal to you? In other words, are you a fan of CSS filters? Though you don’t like opening up Photoshop all the time, you are well aware that CSS filters don’t work on many browsers. That frustrates you while working. Well, don’t despair.

There’s a tiny, yet powerful plugin which can tackle your design issues. Take a look at the specs – 4 kb minified, 1.5 kb gzipped. Super small, yet an ace at blurring images. Background-Blur allows you create blurred images, fade them in or switch to other images.

The plugin is supported by:

  • Chrome
  • Firefox
  • Safari and Safari Mobile (iOS)
  • IE6, IE7, IE8 – blur is supported without animation
  • IE9, IE10, IE11
  • Android browsers

This plugin uses the SVG filter to blur images, provided SVG is supported by the browser (all except IE). In case your browser doesn’t support SVG, the plugin creates an IMG tag & applies a special IE-only filter in CSS.

Creator of this image blurring plugin is Maksim Surguy, a Web developer at NBC News, & owner of bootsnip.com. Based in Washington, USA, Surguy created this plugin to reduce page sizes & use existing images on the page by blurring them. Why? This makes them act as ambient background, even in video thumbnails.

– This post is merely a startup profile based on publicly available information & not a review. - 

 

Image Credit: Background Blur 

 

 

•Share This•

Click here to opt-out of Google Analytics