Gaussian Blur FX With CSS3 And SVG.html | CSS: Presentation Layer

Standards Based Development

Blur Effect with Dropshadow

This blur effect was created with text-shadow

#blur-dropshadow { color: rgba(0,0,0,0); margin: 10px; text-shadow: 0px 0px 6px #000, 0px 0px 3px #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #blur-dropshadow:hover { color: #333; text-shadow: none; } .lt-ie10 #blur-dropshadow { /* for IE7 */ zoom: 1; color: #000; /* Implement the blur */ filter: progid:DXImageTransform.Microsoft.Chroma(Color=#222222) progid:DXImageTransform.Microsoft.Blur(Strength=2); /* * fix the positioning, since the blur filter adds a * few pixels to the top and left */ position: relative; top: -2px; left: -2px; } .lt-ie10 #blur-dropshadow:hover { filter: none; top: 0; left: 0 }

This blur effect was achieved via text-shadow and hiding the text color.

Blur - text-shadow

Blur - SVG blur filter applied to a SVG element


#svg-el-blur { height: 60px; width: 100%; }
    #svg-el-blur text { fill: green; filter:url(#blur-effect-1); font: 50px sans-serif; }
    #svg-el-blur text:hover { filter:url(#blur-effect-2); }

.lt-ie9 #svg-el-blur text { color: green; }

Gaussian Blur


#svg-el-blur { height: 60px; width: 100%; }
    #svg-el-blur text { fill: green; filter:url(#blur-effect-1); font: 50px sans-serif; }
    #svg-el-blur text:hover { filter:url(#blur-effect-2); }

.lt-ie9 #svg-el-blur text { color: green; }

svg Blurs on svg Elements

SVG blur filter applied to a SVG element

jsfiddle link


#svg-image-blur { height: 220px; width: 320px; }
    #svg-image:hover { filter:url(#blur-effect-1); }

Image inserted via SVG with a SVG blur filter applied on hover Blur - SVG blur applied to SVG image element

html Element Blur via svg Filter

Applying a blurred effect on an html via an svg filter:


#svg-filter-blur { filter:url(#blur-effect-1); margin: 15px; }
#svg-filter-blur:hover { filter:url(#blur-effect-2); }

jsfiddle link

Blurring an html Element 2

Applying a css blue to an html element:


#css-filter-blur { margin: 20px; }
#css-filter-blur:hover { -webkit-filter: blur(2px); filter: url(#blur-effect-1); }

jsfiddle link

Blurring an html Element 2

Applying a css blue to an html element:


#css-filter-blur { margin: 20px;
  -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
      -ms-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out;
}
#css-filter-blur:hover { -webkit-filter: blur(2px); filter: url(#blur-effect-1); }

jsfiddle link

Blur Images

Applying a fading blur effect to images:

Fade

Swap


#fade, #fade span { 
    background: #fff url(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence-sprite.png) no-repeat left top; 
    height: 220px; 
    width: 320px; 
    position: relative;
}
#fade span { 
    background-position: 0 -220px; 
    opacity: 0;
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1;
  -webkit-transition: opacity 0.3s ease-out; 
     -moz-transition: opacity 0.3s ease-out; 
      -ms-transition: opacity 0.3s ease-out; 
       -o-transition: opacity 0.3s ease-out; 
          transition: opacity 0.3s ease-out;

}
#fade:hover span { opacity: 1; }

#swap {
    background: url(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence-sprite.png) no-repeat left top; 
    display: block;
    height: 220px; 
    width: 320px; 
}
#swap:hover { background-position: left -221px; }

Gaussian Blur and css3/svg