0

I learned how to add a shadow to PNG images from the answers to this question. A user named Dudley posted this code which works for me except if Firefox (and an older version of Safari):

.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, 
Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, 
Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>

The code is based on this article. I added the code. I used it as-is except the values for OffX, OffY, and the rgb values. Additionally, I copied the CSS code in a a:hover section of the CSS shown below. (Note: I'd added the id tag change later to try to get it to work, but it didn't appear to work either).

#cssicons > ul > li > a:hover {
    color: rgb(255,255,221);
    id: shadowed;
    -webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
}

The HTML looks like this (truncated for brevity):

<link href="/icon_assets/styles.css" rel="stylesheet" type="text/css">
<div id='cssicons'>
<ul>
   <li class='has-sub last'><a href='http://SwingBuffalo.com/'><span><IMG SRC="/images/swingbuffalo-tiny.png" WIDTH="40px" HEIGHT="40px" title="SwingBuffalo.com"></span></a></li>
   <li class='has-sub last'><a href='http://RhythmShuffle.onbile.com/'><span><IMG SRC="/images/mobile.png" WIDTH="40px" HEIGHT="40px" title="Mobile Site"></span></a></li>
   <li class='has-sub last'><a href='http://www.facebook.com/events/442624375809049/'><span><IMG SRC="/images/fb.png" WIDTH="40px" HEIGHT="40px"></span></a>
      <ul>
        <li><a href='https://www.facebook.com/sharer/sharer.php?u=www.RhythmShuffle.com&t=Rhythm%20Shuffle'><span>Share</span></a></li>
         <li><a href='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2FRhythmShuffle.com%2F&send=false&layout=standard&width=450&show_faces=true&font=trebuchet+ms&colorscheme=light&action=like&height=80'><span>Like</span></a></li>
         <li><a href='http://www.facebook.com/events/442624375809049/'><span>RSVP</span></a></li>
         <li class='last'><a href='http://www.facebook.com/SwingBuffalo/'><span>Swing Buffalo</span></a></li>
      </ul>
   </li>

...

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>

The page containing the code is here. Anyone know what I'm doing wrong?

Thanks, Rob

Community
  • 1
  • 1
hepcat72
  • 890
  • 4
  • 22

2 Answers2

2

I think this may be the answer

css-filters browser support

Browsers that currently support css-filters are Chrome and Safari.

Update #1

It works in Firefox

The point was that filter: url(shadow.svg#drop-shadow); was needed

.shadowed {
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
}

#cssicons > ul > li > a:hover {
    color: rgb(255,255,221);
    id: shadowed;
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, 
Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, 
Color='#444')";
}

I have shadow.svg as actual file, not embedded in html.

Hint initiated by user2057516 : Add the "Content-Type: image/svg+xml" header if it doesn't work

Community
  • 1
  • 1
Branislav
  • 221
  • 1
  • 7
  • Chrome from version 18.0, Safari from version 6.0 – Branislav Feb 11 '13 at 16:10
  • Hmmm... That page implies that it should be possible with SVGs and SVG is the firefox-specific portion of the code I employed from the article, which claims that fitted drop-shadows on PNGs is possible in Firefox. I still think there's a problem with the way I employed the code in the article. – hepcat72 Feb 11 '13 at 18:25
  • OK. Thanks so much for this. However, I feel pretty stupid because even with your solution, which I see works, I cannot get it to work with my own site. I did a sanity check. I copied the files in your example to a test directory on my server and it doesn't work for me: http://rhythmshuffle.com/dev/2013/tests/shadow/ Here are screen-shots to show I'm not crazy: http://rhythmshuffle.com/dev/2013/tests/shadow/crazy1.JPG http://rhythmshuffle.com/dev/2013/tests/shadow/crazy2.JPG Emptied cache. Restarted. What the heck am I missing here? I pulled your index.html, shadow.svg, and styles.css files. – hepcat72 Feb 12 '13 at 02:45
  • The time on your files says "tomorrow". I wonder if that could be a problem… Maybe it will start working tomorrow…? – hepcat72 Feb 12 '13 at 02:46
  • 1
    Ah! I fixed it! I had a hunch that my server did not know what to do with the SVG file, so I wrote a script to add the "Content-Type: image/svg+xml" header and it worked! Thanks so much for your help. I don't think I'd have figured it out if I hadn't seen it work on your end. It gave me confidence that I was on the right track. – hepcat72 Feb 12 '13 at 03:11
  • I'm glad you made it before tomorrow :) – Branislav Feb 12 '13 at 03:33
0

I would used the box-shadow property instead as this can achieve the same effects based upon the offset you use. 

  /* Firefox */
  -moz-box-shadow: 3px 3px 4px #000;
  /* Webkit browsers */
  -webkit-box-shadow: 3px 3px 4px #000;
  /* W3C */
  box-shadow: 3px 3px 4px #000;
  /* 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');

Most modern browsers are now adopting the basic box-shadow property rather than having a vendor prefix. Just modify these until you get the desired output.

jezzipin
  • 4,110
  • 14
  • 50
  • 94
  • Well, I tried your suggestion. For some reason however, the shadows it created did not fit the shapes of the PNGs. Plus, the icons were still disappearing in Firefox. The only improvement was that in Safari 5, shadows appeared where as before, they had not appeared (albeit they were still not fitted to the PNGs). – hepcat72 Feb 11 '13 at 18:20
  • Which areas are you trying to achieve the shadowing on? I'll have a play around in Firebug so that I can get the correct code for you. If you have a design image that you are working from, it may be best that you post that as well. – jezzipin Feb 11 '13 at 18:41
  • There is a row of "icons" across the bottom of the page. On hover, a shadow should appear around the image. It works correctly in Chrome and Safari 6 - so you can see what I'm talking about. Here's the site: http://rhythmshuffle.com/dev/2013/robversion1/ Each page has the row of icons at the bottom. In fact, the row of icons is in an iframe, so it would probably be easiest to just load the iframe: http://rhythmshuffle.com/dev/2013/robversion1/RS2013//Home_files/widget0_markup.html – hepcat72 Feb 11 '13 at 18:52
  • box shadow does NOT 'wrap' around images with transparency. – RozzA Sep 03 '14 at 08:37