IE8 filter syntax for chained filter

Multiple filters, RGBa, DXImageTransform

[SuzyUK]

does anyone know how to chain IE8 -ms-filters using the new vendor prefix & quoted string. I can't seem to get the two divs below to work together (have added a nested to span which seems to work) Note: the div is absolutely positioned and it may be that as I read somewhere (can't remember) that this had a bearing, sound familiar to anyone?

this is what's working, but I'd like them both on the div, don't want a pesky nested span! ;)

div {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
}

div span {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff)";

}

If you use more than one filter on an element they have to be chained like this (using the old syntax)

div {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#00ffffff, endColorstr=#ffffffff)
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

I've tried a few variations of the above, with the -ms-filter style syntax (within the quotes) but can't seem to get it work

[rainborick]

I know you're just posting an example, but it looks like you've got an extra 'ff' in your 'startColorstr' and 'endColorstr' values here.

In any case, I'd be interested in hearing your opinion of the MS gradient filter. I only played with it once to put a gradient background behind some text and I wasn't pleased with the effect. It seemed like IE was drawing the text first and then merging the gradient background with it - or, more accurately "through" it. The word "filter" seemed very appropriate.

[SuzyUK]

never used filters myself before either.. I'm using the gradient filter to "overlay" a transparent gradient effect, though you're right and "filter" is still an appropriate name, it does indeed seem to mix in with text color however the overall effect is what I'm and after and I'm isolating the CSS per IE version so am able to tweak the text color to achieve a pleasing(hopefully!) effect - it will not necessarily be identical to what non-IE browsers get though, but similar.

it looks like you've got an extra 'ff' in your 'startColorstr' and 'endColorstr' values here.

Ah... no it's deliberate, (though there may well be other typos in my syntax, as I typed it by hand) and a little known feature of the gradient filter, but getting better documented on some blogs due to RGBa HSLA usage increase -

#8digit HEX is like using RGBa(255, 255, 255, 0.25) where in that syntax the 4th option, the Alpha Channel, tells [good] browsers how transparent to make the color.. MS uses this #AARRGGBB syntax where the first two characters are the Alpha channel, and the last 6 the usual hex value, you have to convert floating "a" integer from the RGBa from decimal to it's hex equivalent - so e.g 0.25*255 = 63.75 which in HEX = 3F - so that would become the first 2 digits of the string, there are calculators online or the windows calc in scientific view will do it for you

AFAIK there is no way to do extra color stops with the MS filter, just a start and end.. but you can achieve a simple enough transparent effect going from #00ffffff to #ffffffff - i.e. fully transparent to solid white - I'm using it with a shades of grey to simulate a transparent png background, (am not allowed to use images)

I actually want the "text" behind to gradient/fade, rather than be clear so it's doing it's job, in effect it's making the text below it look as if it has had an RGBa color applied to it.. well nearly anyway, I haven't yet tried a hover effect using this, though I believe it's not too good!

another Gotcha with this is that to use the filter like this the background color of the element it's applied to has to be transparent, so that's why I'm using it as an overlay

btw using any DXImageTransform filters automatically disables cleartype (IE7 anyway, don't know about 8) - MS Blog [blogs.msdn.com] - maybe that could have hampering the effect you wanted too?

[alt131]

Not much help, but the only time I used filters the only way to get them to work was to drop the -ms- and quotes.
Totally defied logic, but worked cross-version ;)
Never had a problem with setting a (default) background colour because it is over-ridden by the start/stop strings anyway.
... hmmm, on looking closer, do you need to set a gradient type, plus quote the colours?
filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#0ff',EndColorStr='#fff');

[edit] adding extra thoughts[/edit]
No troubles with absolute positioning - but given the above mileage obviously varies ;) - but I did refer to the troubles with simple transforms/filters in the pseudo thread - that could be it.

Just came across a discussion that suggested triggering haslayout can help with transparency-type effects (I know, I know ...)

[rainborick]

Thanks Suzy for explaining the syntax, and alt131 for the added info. I'm just beginning to absorb some of the principles of graphics. My little experiment was just that. I was working with changing stylesheets dynamically with JavaScript, and chose gradients because I was also dabbling with ImageMagick. Between the sub-par results in IE and the compatibility issues, I'm sticking with images and watching how CSS support evolves and how HTML5 shakes out.

[alt131]

Hi rainboriock, using these with ImageMagick sounds very interesting - would you care to explain your experiement a little more?

In my grand (single) experience with filters, I was working with very high colour contrast between the gradients and the text colour, and the main body text was softer shades. That must have been relevant because I didn't notice much impact on text clarity. I didn't notice it during my recent experiments with pseudo's either - but I wasn't really looking.

However, they do seem to slow the rendering/painting down - which I loathe.

[rainborick]

Nothing remarkable, really. I had three or four projects that sort of dovetailed together here. I've been working on a script that uses ImageMagick to generate gradient background images and gradient-filled text because I'm such a klutz at using graphics programs. I had also recently been working on adding shadow effects to text with CSS which included dealing with Microsoft filters, and writing a short article on changing class rules in stylesheets with JavaScript. Along the way, I discovered CSS gradients (and I should have recognized the alpha channel, Suzy), and decided to use it as an example of dealing with browser compatibility issues in the article on JavaScript to make it a little jazzier. So, I asked about Suzy's impression of the Microsoft gradient filter with hope of discovering that I'd been using it incorrectly.

[SuzyUK]

Thanks you two..

yes IE7 and below always need hasLayout set when any filter is used, IE8 of course shouldn't (and can't!) but I did find that in one combination I tried to use that assigning display:inline-block in IE8 did help :o

thanks alt131, ref old style syntax, however I think I've discovered something else which may have being affecting the whole mix so am giving up on that idea

@rainborick, further discoveries, to see if this compares to what you were doing - there appears to be no problem with the text-color "filtering/mixing" IF there's no rotation (or is that any multiple filter?) going on

example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
html, body {
margin: 0; padding: 0;
background: #222;
}

body {
font-family: verdana, tahoma, sans-serif;
font-size: 14px;
}

#wrap { 
width: 500px;
margin: 0 auto;
padding: 20px 0;
color: #fffff0;
xposition: relative;
}

.ie {
font-size: 25px;
line-height: 50px;
text-align: center;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#00111111, endColorstr=#ffccffcc)
/* progid:DXImageTransform.Microsoft.BasicImage(rotation=3) */
;
} 

.ie div {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#00111111, endColorstr=#ffccffcc);
color: #222;
} 
</style>
</head>
<body>
<div id="wrap">
<div class="ie">Text in div <div>text in nested div</div></div>
</div>
</body>
</html>

as it is above, it works quite nicely, but uncomment that second filter in the div.ie {} rule and it all goes wrong.. it rotates but the first color filter stops and the second mucks up the text color & aliasing and IE8 completely loses the plot!

I think because rotation was important to what I was trying to do that that was problem all along! not the nesting syntax (I tested again using the old style rules, thanks alt131!) - and like I said this could apply to any second filter - I didn't test!


So in comparison to what you were trying to rainborick... does this help explain differences or similarities?
- in short I can get the overlay effect (both text and background have a gradient effect), without any negative effect on color or jaggying of the text, but need the nested element (to test, comment out the text in the nested div and position it absolutely over the first part, make it 100% high and wide to overlay the under div, and remember to position the under div relatively too) - it's lovely! however as soon as I add the rotation filter :(

Oh well back to a horizontal drawing board ;)

[alt131]

yes IE7 and below always need hasLayout set when any filter is used,

Ah .. well there goes a few months of blissful ignorance ;)
Although, I also found references to these things "only" working on block elements. I guess it makes sense as things like gradients need dimensions to be able to calculate the effect.

as it is above, it works quite nicely, but uncomment that second filter in the div.ie {} rule and it all goes wrong.. it rotates but the first color filter stops and the second mucks up the text color & aliasing and IE8 completely loses the plot!

I haven't spent enough time with filters to understand their inner workings, but I suspect the colour syntax. I removed the alpha channel, then realised the text colour was defaulting to a darker shade that just happened to look like #222 - unless the page was zoomed, in which case the text switched to the colour on the outer div.

Given one of the gradient colours was similar to black, that suggested some sort of masking issue, so I applied progid:DXImageTransform.Microsoft.Alpha(opacity='100') to the inner div to set the opacity of the content and voila - gradients, rotation, and anti-aliased text any colour I wanted.

Note I didn't pursue the issue of the colour syntax, and also used the old filter syntax, plus set text colour after applying a filter - both of which defy received wisdom. <sigh/>

actually want the "text" behind to gradient/fade, rather than be clear

. Not sure if I understand exactly, but have you considered the alpha filter rather than gradient?

[JAB Creations]

I hope this is what you're looking for? It does seem that when the image is rotated that the gradient effect is lost (though one of the colors is retained) which I think is very likely an unintended bug. This works in IE8 for me. It looks like to daisy-chain the filters you just use a space...

- John

<style type="text/css">
#oDiv
{
filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=2) progid:DXImageTransform.Microsoft.gradient(startColorstr=#0088ffff, endColorstr=#ff22ffff)'
}
</style>

<div id="oDiv" style="position:absolute; left:270px;">
<span style="color: #f0f">An Image - > <img src="http://www.webmasterworld.com/gfx/logo.png" /></span>
</div>