Is there any online tool to generate cross platform (including IE6) box shadows?

StackOverflow https://stackoverflow.com/questions/9789890

  •  25-05-2021
  •  | 
  •  

Question

I want to generate drop shadows. But it is difficult to generate cross platform shadows. Is there any online tool to generate cross platform (including IE6) box shadows?

That is I want to generate following codes automatically

/* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
Was it helpful?

Solution

this is not the easiest task. You could try this nice generator for crossbrowser css3 and for IE try this nice Framework.

CSS Pie makes use of Internet-Explorers Capability to enhance CSS dynamically via .htc files and their proprietary VML-Format to emulate css3. It's pretty easy to setup and works quite nicely.

Some css3 stuff also can be achieved via MS-filters.

OTHER TIPS

I haven't been able to find a generator, but I know you can partially emulate this with MS-filters. I did find an article that goes into this a bit.

I know it's more of a pain to do it this way, but you could always use images. That may be best way to get them in IE 6. According to http://www.w3schools.com/browsers/browsers_explorer.asp, only 1% of Internet users use IE6 as a web browser. You could make a separate style sheet just for IE6 so it won't clutter your main sheet.

If you want to generate css drop shadow for older IEs I'll recommend Microsoft's own tool to generate drop-shadows here is link. http://samples.msdn.microsoft.com/workshop/samples/author/filter/Shadow.htm

I don't know specific online tool to generate for all browsers, but it pretty easy to do on you own here is example for cross browser css drop-shadow

#box {
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Chrome 1-25, Safari 3.2+ */
       -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Firefox 4-15 */
         -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Opera 10.50–12.00 */
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

    /* IE6 & 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=6);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=3)";
}

I hope this helps

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top