Menu
You can use the filter property with blur , although it's not widely supported: http://jsfiddle.net/GkXdM/1/. It's supported on Chrome, but it comes with a big performance penalty when used on the whole page. simplest way to blur any container. Great!
Syntax. filter: blur(px); To apply a blur effect to the background image, with the blur function use the z-index property to set the stack order of the element, set the width and height 100% to have a full background image.
The trick is to use background-position:fixed; on html / body and the element to blur on top of it, so , both background-image lays on the same area of the window. The duplicate uses an extra element, this can be a pseudo element if you do not wish to modify HTML structure. Flex can also be used to center body.
This is working in Firefox and WebKit using the filter: blur(radius). See Can I Use: CSS filters for which browsers can support this.
.blurredElement {
/* Any browser which supports CSS3 */
filter: blur(1px);
/* Firefox version 34 and earlier */
filter: url("blur.svg#gaussian_blur");
/* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
-webkit-filter: blur(1px);
}
The blur.svg for Firefox 34 or below looks like this:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="gaussian_blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
</svg>
You can adjust the radius, but lower values mean better performance.
You can use the filter property with blur, although it's not widely supported: http://jsfiddle.net/GkXdM/1/. It's supported on Chrome, but it comes with a big performance penalty when used on the whole page.
body {
filter: blur(2px);
}
I am not sure if this is what you mean, but an often seen blur-like effect is created by creating a full height, full width DIV-element with a background-color and opacity property set.
/* DIV-element with black background and 50% opacity set */
div.overlay {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50); /* required for opacity to work in IE */
}
Since your page height can vary, you'd probably want to use Javascript to set the height for this element.
Real life demo here: http://premium.wpmudev.org/project/e-commerce/ (click on the video).
They add the class thickbox-open to the body, when thickbox is open, and from there target and style a whole-content (except overlay and popup) containing element like so:
.thickbox-open #main-container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
Okay so no, still not fully usable (http://caniuse.com/css-filters), but we’re getting there.
Apply to a containing element as above rather than body since a blur filter cannot be negated by child elements.
This is possible in Firefox only at this time. Here are the steps (see example here).
You need the XHTML doc type (since we're using XML SVG markup).
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
Insert the SVG element where the blur should appear.
<div class="blurDiv"></div>
<svg:svg>
<!-- Filter -->
<svg:filter id="blurLayer">
<!-- Blur and attributes -->
<svg:feGaussianBlur stdDeviation="0.9"/>
</svg:filter>
</svg:svg>
Include inline style (not from external css file).
<style type="text/css">
div.blurDiv { filter:url(#blurLayer); }
</style>
This gives you a true blur (like zoom out effect), not the standard transparent glass look you find everywhere else.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With