CODEWITHSUNDEEP
css
Luke Wenke
Luke Wenke

Reputation: 1138

Popup with blurred background in css3 and html

Hi this example shows the basic effect - click "Click here" and a popup appears over a blurred background.

http://codepen.io/Palestinian/pen/mDKkG

I tried to create a minimalist version:

http://jsfiddle.net/c2wxbey4/1/

it uses:

filter: blur(2px);

The layer is able to blur the text inside the layer but not the background text.

Upvotes: 4

Views: 41320

Answers (4)

Raj Nandan Sharma
Raj Nandan Sharma

Reputation: 3862

There is another way and more cleaner way to do this using css

backdrop-filter: blur(3px);

Here is link to an example JS Fiddle

One can read more about it in MDN

Upvotes: 5

Alessandro Levi
Alessandro Levi

Reputation: 21

This code will blur everything except few specific div.

As you can see it's necessary to set blur(0px); for second div.

body :not(#unblurred){
    filter: blur(2px);    
}
#unblurred #box {
    background:yellow; 
    border:2px solid black; 
    filter: blur(0px);
}
<h1>test</h1>
<div id="unblurred"><div id="box">Test Box</div></div>

Upvotes: 1

Luke Wenke
Luke Wenke

Reputation: 1138

Here's one way of blurring everything except part of it...

http://jsfiddle.net/c2wxbey4/9/

body :not(#unblurred) {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);    
}

Well it doesn't work if I put content inside of #unblurred:

http://jsfiddle.net/c2wxbey4/10/

The selector to correct this is 

body :not(#unblurred), body :not(#unblurred) * {
    -webkit-filter: blur(2px);
    filter: blur(2px);    
}

edit: I can't get your fix to work: http://jsfiddle.net/c2wxbey4/14/

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add this property in body

filter: blur(2px);

Upvotes: 0

Related Questions