I found a Stackoverflow article on creating text shadows in IE: StackQuestion
Now I tried all of the 'filter' solutions in there, and in IE9, the text renders horrible(although the shadow shadow shows, the text pixelates heavily...).
Does anyone know of a proper text-shadow technique for IE? Even if it is just for IE9...
Thank You
Check this site out: http://css3pie.com/
It's a plugin that enables you to use CSS3 in IE6-9
You can get text-shadow effects in Internet Explorer, taming IE's crunky filter shadow effects, forcing them to look okay and stop pixelating the text. Use the IE Chroma filter:
Set a background colour that is close to, but not the same as, your shadow colour - e.g. for black shadows, a dark grey, for white glows, a light grey
(set the background colour in a stylesheet or style rule inside an IE-only class or conditional comment, to not wreck your design in every other browser!)
Precede your IE filter CSS rule with a Chroma filter set to the same colour as the background fill
It looks (almost) quite good!
jsfiddle examples (load in IE8, IE9)
...or if you don't have easy access to IE8/9, here's a screenshot from that fiddle in IE9 IE8 mode. Notice the difference between the horrible, artifact-ridden, pixelated mess that is IE's default filter, against the quite crisp, normal-looking Chroma filter equivalents.
CSS code examples. Note how you've got a Chroma filter then another filter, all on one line, in quotes against one -ms-filter - and how the Chroma colour matches the background colour precisely, and how the Chroma colour compliments (but doesn't match) the main effect colour:
.chroma-glow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}
Some requirements (learned the hard way...)
Elements must be block or inline-block, can't be inline.
Filters fail to apply to any children that are position: relative; or position: absolute;
(they work if applied directly to position: absolute; or `position: relative; elements)
If you're adding the filters dynamically, e.g. with jQuery like $elem.css('filter','progid...');, it seems like the background colour must be applied directly to the element with the filter for the chroma to work. A couple of tips:
Have the effect colour, applied background colour, and chroma colour all identical
Since you'll want this background colour only in IE, use feature detection or IE detection.
#element {
filter: glow(color=black,strength=5);
}
Related
I am using the filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#0000FF',GradientType=0 ); code to set the gradient background image in IE9.
Here is my fiddle.
The result in IE9 looks like,
But, i got trouble with the border-radius style.
What's wrong in my code? Is there any solution for this?
I have found the similar question on
IE9 round corners and filter: progid:DXImageTransform.Microsoft.gradient With answer of
Add the browser specific class or Set svg data as background image.
I don't like to use different css file or adding different HTMLElement based on browser version.
It might affect the performance of page when i use svg data as background-image.
You can add another element inside your .gradient_style which will have background-image and filter set. Then set overflow: hidden on parent element and you should be good.
Example CSS:
.gradient_style {
background: transparent;
height: 50px;
width: 150px;
border-radius: 25px;
border: 1px solid #050DFA;
overflow: hidden;
}
.gradient_style div {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#00A3EF', GradientType=0);
width: 100%;
height: 100%;
}
And HTML:
<div class="gradient_style"><div></div></div>
Working sample: http://jsfiddle.net/DymK5/2/
This is a known bug in IE9, where a background gradient using the filter style ignores the border-radius and always renders the gradient into the corners of the element.
It is unfortunate that IE9 didn't implement standard CSS gradient syntax, which makes this kind of thing necessary.
There are work-around options, but they're all a bit ugly.
The most well-known work-around option is to use an SVG data-URL for the gradient, for IE9 only. The issues with this are that you still need the filter for IE8 support, and of course IE10/11 does use standard CSS gradients, so you need to start using conditional stylesheets to set the styles depending on the brower version. It gets ugly very quickly.
I wouldn't worry too much about performance of this; it should be fine. The problems are more with managing the code than with perf. (and in any case, even if there is a perf issue, it will only affect the specific browser version involved, IE9, so it will be a relatively small portion of your audience)
Another option is to use the CSS3Pie polyfill script. This is a good option because it allows you to use standard CSS code for your gradients in all IE versions. Since you say you dislike using different CSS for different browser versions, this is a big plus point.
The downside is that it is Javascript-based, so could have performance implications. But that said, I've never seen it have any perf problems with it, as long as you're not over-doing it (ie using it for hundreds of elements on the same page).
If all else fails, I guess there's always the option of simply just not supporting gradients for old IE versions, and having a plain solid-colour background fallback.
I have a class called "button", I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.
However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the "satauration" value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..
I was thinking... if it is possible to change the "saturation" value (only) of the background-color so that my hover effect will still be useful for random colors.
Using filter currently seems to only work for webkit-based browsers..
-webkit-filter: saturate(3);
filter: saturate(3);
Demo | Source
Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);
Demo | Source
Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html
There are two solutions for this problem:
First, use a transparent png with a white to transparent gradient. On onHover, apply the image over the button. I haven't tried it but it looks promising.
Second, use a css inset dropshadow. With the parameters set correctly, you can easily manage the gradient effect.
You can also use rgba(r,g,b,a) for making changes to the underlying button color. But remember that the text value of the button will also get affected, giving you issues of usability.
I am using jquery.reveals.js plugin.
the following colors specified in css
#fff
#000
are being interpreted differently on different browsers.
Getting the following output on firefox,chrome,and IE 9 ( and above)
however I am getting some unexpected result with IE8
I guess above problem is because the color specified in css in only 3 digits i.e. #fff and #000.
How can I fix this for IE8
Well it looks like the IE8 one is correct, and the modern browsers are interpreting it to what looks like #000; but with some transparency, is there a setting of opacity: 0.5; somewhere that IE is ignoring and good browsers are doing??
It's probably because before IE9, IE's png handling was horribly flawed. If you look into the plugin's asset folder you will find a modal-gloss.png. Now when you opacity animate a sem-transparent in IE before IE9 it will loose its transparency.
Try disabling animation with
$(...).reveal({ animation: 'none'});
the colors are displaying properly. I think the problem is with opacity.
Here you can read about CSS Transparency Settings for All Browsers.
Specify the color in six characters, or perhaps better yet specify the color as an rgba value.
Stick to using the standard as intended without leaving guesswork for the browser. Meaning define in hex as #RRGGBB not #RGB. You can switch color value schemes (like to RGB) but that should not be your issue.
This link shows you examples of each color value scheme and talks about browser compatibility:
http://www.w3schools.com/cssref/css_colors_legal.asp
Try rgba(0,0,0,0.5).
More about RGBA
Hi guys I have a problem of images showing background-color on IE6 and its supposed to be a transparent background. on all the other browsers it is showing fine except for IE6.
can anyone please tell me what am i doing wrong. tried the opacity to 0 but its still showing the background-color.
The fix is quite simple. No need to include any JavaScript. Define your css like this and include your image name in filter.
.whatever {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
IE6 doesn't support semi-transparent PNGs. Try something like this for a work-around if you really need to:
http://css-tricks.com/snippets/css/png-hack-for-ie-6/
or http://www.jay-han.com/2008/10/15/unit-png-fix-best-ie-png-hack/
Or just drop IE6, it's way behind all other browsers, and fast losing market.
IE6 doesn't support transparent PNGs properly.
This page has a fix which involves a behaviour file. Alternatively you could use GIFs.
This works:
a { color: hsla(0,100%,50%,0.2) }
And this does not:
img { color: hsla(0,100%,50%,0.2) }
Is there something like img { opacity: 1 } that allows to define hsl values to an image?
Text and images are 2 different things.
Text is rendered by the browser with the settings you provide (decoration, size font color ...)
an image is rendered in another way. the browser does not have information about what is on the image, and can therefor not alter the image itself.
Parameters like color etc will not have effect on the image.
By the way, the color parameter defines the text color.
Edit: If you want to apply a "color" to an image, you could create a div with a background image, and then in that div another div with a background color and an opacity. that way the transparant color will be overlayed on the image.
You can apply filters to images in some browsers: Firefox allows you to apply SVG filters to HTML content from CSS, but Chrome, Safari and Opera you'll need to wrap your content in SVG to apply filters to them, here's an example that works in Opera. There might not be an appropriate SVG filter for what you need, but it may be an avenue worth exploring if you have no other alternatives.
In Internet Explorer you might be able to use a static filter.
This works (press 'run code snippet' multi times):
.colors{ filter: hue-rotate(90deg); }
<img src="http://lorempixel.com/300/150/" heigh=150 >
<img src="http://lorempixel.com/300/150/" heigh=150 class="colors" >
degree is 0 to 360.
W3Schools.com: CSS filter Property
The color attribute is used as the drawing colour for text characters, borders and such. It does not apply to bitmap images.
Therefore, it doesn't matter whether you add alpha channel information to your colour value or not: The whole of the declaration doesn't apply.
opacity is different, because it specifies the alpha value for the whole element.
The only way to impact the colors of an image with css is to use opacity to control the alpha channel. Note that you could make a hack to (sort of) change the luminance of your image by placing another element on top of if. Ensure that it covers the image exactly by adjusting position and size, make the background-color black, and set the opacity to 0.5.
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
may be these filter help you to change a single image in different color sachem but they also have browser compatibility issue