Good gradient shadow code, or drop shadow

[ZeptOr]

I'm looking for a good way to make a gradient shadow/dropshadow in both Firefox and IE. I made a gradient transparent shadow in PNG, and it looks good in Firefox (You can see it http://greenear.x10hosting.com/Main/index4.html, on the sides of my site) but it doesn't work in IE because its a PNG and transparency doesnt show in PNG formats for IE.

Whats a good way to do this? I tried gif in photoshop, but it i cant get the gradient transparency to work in gif format.

Help.. Please?

 

[Colin]

I don't think there is an actual way to code a dropshadow etc. Your best bet is to wait for everyone to have IE7 and hope that it works.

 

[karhukat]

You might want to try one of the IE png hack's. Here's one http://homepage.ntlworld.com/bobosola/index.htm. I've never used it but looking at the examples it seems to work. I'm sure there are other similar hacks if you do a search.

Alternatively, couldn't you use a IE conditional comment, to use a image without the shadow for IE6 and below. As people upgrade to IE7, they will see the shadow but until then at least they wouldn't see the white where the transparency is supposed to be.

 

[ZeptOr]

so there isnt anyway to do it? I know i have seen sites before that have it

 

[karhukat]

I think the javascript hack I linked in my first post will work if they have javascript enabled.

Also, here is a link to a css workaround that you could try.

http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217

 

[ZeptOr]

I am trying the javascript hack, but it isn't working

It says on their website that you have to specify the image width and height, but i don't know where

here is the code, where do I put in the height/width?

  <!--[if lt IE 7]>
    <script language="JavaScript">
        function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
        {
        var arVersion = navigator.appVersion.split("MSIE")
        var version = parseFloat(arVersion[1])
        if ((version >= 5.5) && (document.body.filters)) 
          {
            for(var i=0; i<document.images.length; i++)
            {
                var img = document.images[i]
                var imgName = img.src.toUpperCase()
                if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
                {
                    var imgID = (img.id) ? "id='" + img.id + "' " : ""
                    var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                    var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                    var imgStyle = "display:inline-block;" + img.style.cssText 
                    if (img.align == "left") imgStyle = "float:left;" + imgStyle
                    if (img.align == "right") imgStyle = "float:right;" + imgStyle
                    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                    var strNewHTML = "<span " + imgID + imgClass + imgTitle
                    + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                    + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
                    img.outerHTML = strNewHTML
                    i = i-1
                }
            }
          }    
        }    
        window.attachEvent("onload", correctPNG);
     </script>
  <![endif]-->

 

[karhukat]

Sorry, I missed that. I don't think that this will work for you afterall, it wants the width and height set in the img tag and you aren't using one because it's a background. Will the css hack work for you? I'll see if I can find anything else. Sorry.

 

[DecemberGuild]

I have an idea. Try that CSS hack. You can create a small DIV. Make the background black, and use the Alpha filter to fade it to transparent. This works on IE.

Edit: Don't use the one he linked. The standard "Filter:Alpha" should work on all browsers.
http://www.fred.net/dhark/demos/css/css_filter_examples.html

Edit: Here-
Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0) (Edit the lines in red.)