How can I apply a Gaussian blur using CSS to a DIV which contains text. Basically, what I want to achieve is to have the box with a gaussian blur but the text in a normal way. Can this be done? I don't know how, I've been trying but I just can't.
Example:
Like I have my div at opacity: 0.75 I would like my div to be transparent but with gaussian blur, since in the background I have a moving image, so I want the box to be blurred.
Apply following CSS to your block:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
However, this property works only in modern browsers: compatibility table
Well I don't think you can achieve what you are looking for without some extra div or even better a pseudo-element. My suggestion would be:
div {
position:relative;
width: 10em;
height: 20em;
padding: 1em;
}
div::before {
content: '';
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
z-index: -1;
}
Your question is not too clear though so I am not sure if this is what you are looking for...
Pen: http://codepen.io/marczking/pen/dqxwG
Related
everyone, I have created these buttons that animate when you hover over them. Everything works fine with the animations and how I want it to work functionally but for some reason every time you hover over any of the buttons a strange white line appears underneath. it's faint but it's very noticeable. I just want to know why it's doing this and what I can do to stop it. the code could be viewed in this codepen
The issue started when I added the following bit of css. Is it possible to resolve the problem? Thank you in advance.
.hero-content li:hover {
transform: translateY(-50px) scale(1) !important;
-webkit-filter: blur(0) !important;
-moz-filter: blur(0) !important;
-o-filter: blur(0) !important;
-ms-filter: blur(0) !important;
filter: blur(0) !important;
opacity: 1 !important;
}
.hero-content:hover li {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
transform: scale(.97);
opacity: .9;
}
After removing the following CSS properties from Codepen the issue was fixed
-webkit-filter: blur(2px);
filter: blur(2px);
I tried the following code and it is not helping.
.information{
background-image:url(../images/needle_img.png),url(../images/broken_noise.png);
background-size: auto 60%, auto auto;
background-position:left bottom,top left;
-webkit-filter: brightness(0.8),brightness(1);
-moz-filter: brightness(0.7),brightness(1);
-o-filter: brightness(0.8),brightness(1);
-ms-filter: brightness(0.8),brightness(1);
filter: brightness(0.8),brightness(1);
background-repeat: no-repeat,repeat;
}
So, I'm developing a website based on CSS3. Here is a part of code which trying to make the background blur.
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
I know that IE is not supported for blur filter. I search for article they said I have to use SVG to solve this problem. But somehow my website is using in a scenario that there is no internet which mean that I cant access any url when browsing it. Is there anyway to solve this problem without using SVG?
One way that I can think of is basically just duplicating the background container and changing the opacity and moving the image slightly to give yourself a blur. Another option you have would be to just create another image to put on your server, and just use photoshop to blur it and then switch the picture
img:first-child {
opacity: 1;
}
img {
opacity: 0.2;
position: absolute;
top: 0;
}
img:nth-child(2) {
left: 1px;
}
img:nth-child(3) {
left: 2px;
}
img:nth-child(4) {
left: 3px;
}
img:nth-child(5) {
left: 4px;
}
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
I've added this .blur class to body tag to blur whole website.
CSS
.blur {
filter: blur(1px);
filter: url("blur.svg#gaussian_blur");
-webkit-filter: blur(1px);
-o-filter: blur(2px);
}
HTML
<body class="blur">
...
<div class="mustBeClear"></div> <!-- somewhere in the page-->
...
</body>
How to keep .mustBeClear class not blured.
I've tried
.mustBeClear{
filter: none;
-webkit-filter: none;
-o-filter: none;
}
but, it does not work!
What you are trying to do is not possible. Because SVG filters get applied to an entire element at once, you cannot then selectively "undo" the filter for a single child element.
What I would recommend instead is to only blur the element that you want to be blurred, then you can use absolute positioning on another element on top that does not have the blur effect.
Here is a live example to illustrate what I'm talking about:
.container {
position: relative;
top: 50px;
left: 50px;
}
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-o-filter: blur(5px);
}
#text {
position: absolute;
left: 50px;
top: 50px;
}
<div id="container">
<div class="blur">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
<div id="text">Not Blurred Text</div>
</div>
Anyway, I blurred a div via this code:
background: #FFFFFF;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
opacity: 0.4;
But I want to put inside that blurred div some text, and the stays stays blur too after all, is there a way to cause the text itself only to not blur?
No, but:
You can position another element over the blurred element in that case.
See: z-index for this, along with the position: attribute.
Important: the element cannot be inside the blurred element and just have a higher z-index only. It needs to be outside it, positioned over the other one, and have a higher z-index than the blurred element.
Here is a very basic example, using position: absolute;:
http://jsfiddle.net/digitalextremist/ky3Ca/3/
Excerpt:
.unblurred {
position: absolute;
top: 5px;
left: 5px;
z-index: 9;
}
There are a lot of ways to do positioning. The above jsfiddle only shows one way to get you started.
You can position the text over the div using some other html element, check this fiddle:
http://jsfiddle.net/7PxzL/1/
HTML:
<div></div>
<span>This is the Text</span>
CSS:
div {
width:100px;
height:100px;
background: #cccccc;
z-index:-1px;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
span {
position:absolute;
top:10px;
left:10px;
}