I have this example : http://jsfiddle.net/ruchan/8efhk9f5/
I want to make the background(only) of the blocks blurred.
using
filter: blur(5px); makes whole content around it blurred.
Tried using it inside :beforebut still doesn't works
How do i only blur the background, and leave the content un-blurred.
There is a proposed CSS mechanism to do this in the draft version of the filters spec, but it's not implemented in any browsers yet (that I'm aware of) (edit: implemented in WebKit nightlies now, and supposedly is in Mobile Safari iOS 9). For future readers of this answer, this may be a viable solution.
It looks like this:
.thing {
background-image: filter(url('myimage.png'), blur(10px));
}
So, basically it's a functional notation that lets you apply a filter to an image as you load it.
Again, this is not supported anywhere as of right now.
The example from CSS Tricks mentioned in another answer uses a pseudo-element to basically create a duplicate of an element using the same background, and then blurs that with a filter. That should work as a realistic solution today (at least for browsers that support CSS filters - don't forget the -webkit- prefix as well as the unprefixed version!), otherwise you'll have to fall back to a manually created blurred image.
Related
so I've read a lot about the current state of rotating text and not being able to perfectly get real antialiasing to happen in all browsers. It looks like the first box in the pic in chrome, but the second, jaggedy box in firefox. I've tried the most popular fixes including -webkit-backface-visibility:hidden; -webkit-font-smoothing:antialiased; and maybe one other I can't remember.
However this is not asking the same question, but a new one I havent found anywhere. These two screenshots of the same box are both taken from Firefox. The jaggedy box on the bottom is what it looks like normally, however, when I mess with the rotation attributes with another(completely different) element on the page with the css edit console, it renders the box perfect / smoothly...
I do, however, have to continue to press up or down to change the rotation value on another element for the entire box to render antialiased perfectly, then it returns to its jaggedy normal self. I rotated the div that the content is in and put the css fixes on the same div(although I did try putting the css fixes on every element) and I didn't ever seem to get any smoothness or antialising like you see in the box above...only when I rotate another element on the page in the browser. WTF?!!?!? is there a way to do this in css or is it only something the browser is doing in realtime and cannot reproduce that smoothness in CSS yet?
EDIT: PIC for comments section
For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.
The fix:
Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:
transform: rotate(…) translate3d(0px,0px,1px);
The explanation:
Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.
The caveat:
However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.
dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.
Jeremy if you come back and answer this I can give the answer to you. just realized I hadn't had an answer to this so I needed to put something here.
This solution worked as in the comments above:
Jeremy:
I had another thought: it could be related to creating an opengl/webgl layer behind the scenes. If you add translate3d(0px,0px,1px) after the rotate transform, does it "fuzz out" a bit more?
Answer - Yes this works to perfectly anti-alias any text in all browsers!
I'm having a really really weird issue...
I have a header with some background which has the background-size as cover. For IE8 I do have this filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myawesomefile.jpg', sizingMethod='scale');
Which loads fine and it's shown well. However, everything inside the header, becomes un-clickable. hover doesn't work and they don't fire any events...
I've prepared some JSBIN to show this behaviour.
On of the problems with the old IE filter styles is that they do have some nasty glitches, which can result in weird things like this.
This specific issue is a new one on me, but it's just the kind of thing that I'm used to seeing with filter.
I've just spent a bit of time fiddling with your code to see if I could work around it, and I haven't got anywhere. So my suggestion would be to give up on the filter.
Fortunately, there is an alternative: Version 2 of the CSS3Pie library includes a polyfill for background-size, which means that it can be supported in all IE versions.
There are some caveats with CSS3Pie as well; obviously it's a Javascript library, so will fail if your users don't have JS enabled. And it requires you to use the shorthand background syntax rather than a separate background-size property. But the point is that it does work, whereas clearly your current solution doesn't, so I'd say it's worth a try.
Hope that helps.
As a purely aesthetical design thing, I'm wondering if it's possible to have an element with a non-opaque background blur out the content behind it.
More specifically, when I have a modal box appear (as part of my custom alert/confirm/prompt setup), currently the background content is "faded" by having a mask over the screen the same colour as the document's background.
What I'd like to do is apply a small amount of blur (just a few pixels) to the masked content to further direct attention to the modal box.
Browser compatibility is not an issue, since as I mentioned it's purely aesthetical. Preferably I'd like it to work in IE9 as a minimum, and Chrome if possible.
Also, no jQuery. By all means, provide an answer in jQuery if you want, but I'll be translating it to raw JS before letting it near my site.
Nowadays you can use the backdrop-filter CSS Property.
CSS:
.modal {
backdrop-filter: blur(10px);
}
Not possible with pure CSS..
You could use (with its limitations) the html2canvas script to render the pages to a canvas.
Then blur that image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Use the toDataUrl to get the image and use it as a background to your popup...
It is quite an involved process and requires a lot of javascript, but i believe it to be the only way to do it...
This would require javascript (and fairly complex javascript).
From what I understand, it sounds like you're trying to create an 'Aero glass' effect where the content behind a semitransparent element is given a blurred effect. It is not possible with HTML and CSS alone (unless you consider using IE-only filters).
At the moment, there aren't any CSS properties that can dynamically apply image filters like you're describing.
The html2canvas solution presented by Gaby is potentially overkill. You can get the same effect with an iframe of the same website that has been blured (via filter blur or another technique - "-webkit-filter: blur(2px)" only works in chrome as far as I know.
This said, I'd say both solutions are really really hacky and I'd personally never use either myself. I tried this out just to see if it was possible at all out of curiosity.
See a (chrome only) example here: https://s3.amazonaws.com/blur-demo/index.html
I am trying to set an image as background in td.Its working fine with all browsers except IE6. I did google as this is famous png issue with IE6. I tried some solution using javascript but its working fine when i used img. In case of background i am not able to call any javascript method to solve the issue.
Help me if you have some solution ?
I don't believe that any solution exist for this problem. However, I wouldn't worry too much as IE6 market share is decreasing rapidly and in some geographies such as US/Europe, its less than 2-3%. See http://www.ie6countdown.com/
Said that IE6 support is must then I will suggest that you create an alternate image type (gif or jpeg) and use that instead of png. You can use IE6 specific CSS hacks to use the alternate version and thereby delivering the PNG to other browsers.
EDIT
Doesn't CSS such as below work for you
td.myClass {
background-image: url(bg.png);
_background-image: url(bg.gif); /* IE6 Hack */
}
I have a project where I have to resize some images in the actual browser side.
IE8, FF3 et al all apply a filter to smooth the resizing of the image, so in these browsers everything looks good.
In IE7 I have applied the following fix which works great:
-ms-interpolation-mode:bicubic;
In IE6 however I can only find references to the AlphaImage Filter (the same one used to enable alpha transparency on PNG files). However I can't find an example of how to use it, nor have I been able to get it working myself.
Can anyone provide me with an example? Preferably applied to actual img tags, though I could use background images if required.
MSDN link (for what its worth): http://msdn.microsoft.com/en-us/library/ms532969%28VS.85%29.aspx
The code I am using in my CSS is applied to the img, though I've tried applying it to the img container as well (with no effect):
#provider-list li img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/image.gif", sizingMethod="scale");
}
A thousand thank you's in advance :)
Rick
I believe most (if not all) versions of the IE5/6 PNG transparency fix use the same property. Looking at their code might be a good place to at least get the property working, at which point you can tweak it for your own use.
http://jquery.andreaseberhard.de/pngFix/
http://www.twinhelix.com/css/iepngfix/