CSS3 Gaussian Blur: Revisited

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

In case you have used my previous solution for blurring elements with CSS, here’s a revised and improved version with added support for more elements and enabling it only for CSS3-enabled browsers only:

The CSS

[sourcecode language=”css”]
:root .css3-gaussian-blur *
{
text-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
color: transparent !important;
background-image: none !important;
border-color: rgba(0, 0, 0, .05) !important;
/* disable the pointer events for blurred zones */
-moz-pointer-events: none !important;
-webkit-pointer-events: none !important;
pointer-events: none !important;
}

:root .css3-gaussian-blur input,
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur button,
:root .css3-gaussian-blur select
{
box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
border-color: rgba(0, 0, 0, .05) !important;
resize: none !important;
opacity: .5 !important;
}

:root .css3-gaussian-blur img,
:root .css3-gaussian-blur input,
:root .css3-gaussian-blur input[type="file"],
:root .css3-gaussian-blur input[type="checkbox"],
:root .css3-gaussian-blur input[type="radio"]
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur select
{
opacity: .2 !important;
background: transparent none !important;
}

:root .css3-gaussian-blur fieldset
{
border-color: transparent !important;
}

/* Vendor-specific styles */
/* CSS3 filters are currently supported by Chrome only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
:root .css3-gaussian-blur img
{
-webkit-filter: blur(15px) !important;
filter: blur(15px) !important;
opacity: 1 !important; /* restore the opacity for that browser */
}
}

/* IE<10 styles using the 9 hack */
:root .css3-gaussian-blur img
{
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)9 !important; /* IE has native support for filters since version 5.5 */
-ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)9 !important; /* IE has native support for filters since version 5.5 */
opacity: 19 !important;
}

:root .css3-gaussian-blur *
{
color: #ccc !important9;
}[/sourcecode]

The HTML

Just apply .css3-gaussian-blur class to the element you would like to blur. If you wish to blur the entire page, add this class to the <body />tag.

Related Posts

CSS3 Gaussian Blur: Revisited

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Categories and Tags

Links