Is there a css-way to grayscaling a div with a properly percentage?
I can do this in non-IE browsers with webkit support:
-webkit-filter: grayscale(0.7); //e.g. 70%
But in IE I can only use a boolean function like this:
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //with '1'
Can I find out a way (possibly a not-svg way), I can grayscaling an image with a percentage with?
Check this link desaturate
Browser Compatibility:
Internet Explorer 5.5+, Opera 9.5+, Firefox 2+, WebKit Nightly
#A.K's suggestion looks good, although I couldn't immediately see how to do partial grey-scale...
For a CSS-only solution - you can achieve a similar effect by making whatever you want to grey-scale partially transparent and putting a background colour behind it, like this:
http://jsfiddle.net/R23LG/
Obviously you'd want to play around with the transparency settings etc. to get it how you want it.
Related
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.
When I use only rounded corners on my div, it looks about how I expect in IE9.
border-radius: 7px;
However, when I add the following line to make a drop shadow, I get an unexpected effect:
filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3);
Here's a screenshot of the effect. I'm referring to the ugly little black corners suddenly appended to my light blue div:
http://imageshack.us/photo/my-images/406/blackcorners.png/
How can I get rid of that?
IE9 supports box-shadow natively, so there's no need to use the old filter style.
If you're using the filter for the benefit of older IE versions, then it may be that both shadows are coming into play in IE9, and slightly different, thus causing the weird effect.
My first suggestion is simply to drop the filter style. This will mean that versions of IE won't see the box shadow, but it's not really a critical element of the layout.
If that's no good, then I would suggest using CSS3Pie to implement the box shadows for older versions of IE. As a bonus, it'll do the border-radius too.
With CSS3Pie, you can use the standard CSS box-shadow style in older versions of IE, and not need to worry about the filter style. And, to show how it directly answers your question, it will switch itself off automatically in IE9, so you won't get the double shadow effect.
Hope that helps.
I am trying to to overlay some rotated text over my images but I am having some difficulty with it. Here is my code without all the jQuery: http://jsfiddle.net/vCbcz/4/
Issues:
The span does not align with the div after the rotation
The background transparency isn't showing up in Internet Explorer even though the span is positioned and I have added filter: alpha(opacity = 30); to my css.
EDIT: I would like the spans to look like http://jsfiddle.net/vCbcz/6/ except with rotated text. Please don't tell me to put the text in a seperate container.
Setting left:-25px; on the spans fixes it for me in Firefox. See here.
Edit
With regards to IE, the reason your alpha filter isn't being applied is because your second filter: is overwriting your first. If you want them to both be applied, you put them in the same filter: separated by a space like so:
filter: alpha(opacity = 30) progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
I noticed that in IE the left:-25px; makes it worse so perhaps you'll have to do some conditional comments or CSS hacks to get around it. (Icky!)
Just a warning, this doesn't work in Opera at all.
Edit 2
Here's my changes with fixing IE's bugs and supporting Opera and possibly other browsers if they support the CSS3 transform property.
Here is the test site:
http://www.bodwell.edu/summer/new_busp_11/
It looks totally fine in any browser, except of course IE.
The menu bar and title png graphics are getting cut off right at where the underlying layer is. I have no idea how to resolve this and still keep this looking as it is in the rest of the browsers, i.e. Firefox, Chrome, Safari, etc.
Help!
If you remove the opacity attribute it will work. (the one below) from the main_panel class
filter: alpha(opacity=90);
In the meantime you can do that (perhaps have an IE specific CSS that will remove that filter).
They look similar enough in my monitor.
You could use that yellow background image with a PNG transparency and not have that tag.
I'm unsure why IE is doing that though.
I have the two images below.
They are the same image, with one having a slight glow effect on the text.
They are setup as below:
<div id="header"><a></a></div>
withe the original image being the background for the div, and the 'glow' image being the background for the anchor tag, with display:block; width: 100%; height: 100%;opacity: 0;
i am the using the below jquery code
$('#header a').hover(
function() {$(this).animate({"opacity":"1"}, 1000);},
function() {$(this).animate({"opacity":"0"}, 1000);});
to fade the anchor image in and out on hover.
this works fine in firefox, chrome ect.
But in internet explorer the image is given a solid black background where there is transparency.
How can i fix this?
NB: I am only worried about ie7/8 not 6.
http://webspirited.com/header-reachsniper.png
http://webspirited.com/header-reachsniper-hover.png
Update
I have decided that this is simply not worth my time to do in internet explorer.
However this works perfectly in ie9, so i guess ill remove this effect for browsers less that ie9.
In order to set the opacity of a transparent PNG image, you need to use the AlphaImageLoader filter, even in IE8.
EDIT: You also need to add the alpha filter in the CSS, like this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);
Otherwise, jQUery will clear the existing filter as it adds the alpha filter.
This post from Dave Shea's mezzoblue.com may help you: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/
It notes all of the methods which he tried, and the final solution he arrived at the end:
What did work was a little library
called DD_belatedPNG that applies PNG
transparency via VML instead of
AlphaImageLoader. It’s designed for
IE6, but it works just fine in IE7 as
well. For IE8, I was forced to throw
out an X-UA-Compatible meta tag and
step IE8 down to IE7 mode for this
particular page.
With a tiny caveat at the end
It’s still not perfect. I noticed a
faint white bounding box poking
through at lower opacities that forced
me to slightly adjust hover effects
for all versions of IE. But you know,
for all that, it’s darn well good
enough.