How to blur the div below the section thus applying that effect to the section and its content( would like to get OSX Yosemite blur effect without background image ).
Here is the markup.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
section{
display: table;
position: relative;
background: rgba(255,0,0,0.5);
width: 300px;
height: 100px;
}
section h1{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
div{
position: absolute;
top: 30px;
left: 10px;
width: 300px;
height: 100px;
background: rgba(255,255,255,0.5);
filter: blur(4px);
}
</style>
</head>
<body>
<section>
<h1>There is some content</h1>
</section>
<div></div>
</body>
</html>
I see that you've got filter: blur. I did some testing with that as well but couldn't get it to work at all in firefox 31. Seems that text-shadow should accomplish something similar.
.blurred {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments