Gradients , Text Shadow and IE filter

HTML & CSS
1

Hi guys,

I am enjoying taking full advantage of CSS3 and have started using quite a lot of background gradients and text shadows. I am quite happy to allow some browsers to gracefully degrade as I am too lazy to PhotoShop back-up images LOL.

However, due to widespread audience, I do insist on IE 7,8,9,10 which I think is reasonable nowadays (because IE6 will be dead within a year or two), in my humble opinion. Anyway, I’m struggling to find a Gradient/Drop-Shadow generator which produces consistent filter-code.

Can anyone point me in the right direction and if possible explain what is the best cross-browser IE filter syntax , in case I have to code it manually.

IE 7 and 8 are the main culprits although there seems to be a version of IE9 which doesn’t support these filters. I look forward o being enlightened on this subject.

Thanks in advance :wink:

Silversurfer

2

As for teh gradiants, would you be apposed to just using an image? Have you thought of doing that? It produces consistant results cross browser.

Dropshadow should be the same story.

3

Hi thanks for your reply Ryan,
Yes I usually would but I’m thinking now with almost all of these modern browsers supporting the css3 gradients/shadows, its a lot quicker to just code them on the fly rather than open up Photoshop and make them and then upload them. The generators online seem to work great but IE 7 and 8 behave strangely with certain filters so not sure what approach to take.

4

I’d stick with images for now personally. True CSS3 opiton is there, and if you want to take that route you can, but just realize that you’d either have to ignore them , or use a filter such as this


filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#FFFFFF);
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#000000, endColorstr=#FFFFFF)";
5

EEEK ! its nasty code isn’t it , I agree but that’s why I wanted to find a decent css3 generator which does that horrible syntax for you and as mentioned previously, I’m having problems with a few of the main ones.

So that code you have given me, thanks btw, there are two lines, for different versions of IE I presume?

We all know that they’ve never been able to follow simple W3C standards but Can’t Microsoft even keep their own code standardized??

6

The first line of code is designated for IE7 and down.

The second line of code is for IE8 because they have finally done a vendor extension. So that -ms- is targeted for IE8.