sIFR 3 Hard Drop Shadows

I love sIFR, but man, their documentation is really difficult to figure out. There’s multiple synatxes you can use and all kinds of hidden variables they just expect you to know. I’m just saying for us who don’t live and breath Javascript, it could be a little easier right?

So I’ve been working on a site where I want to use the drop shadow as an effect to make the text look inset. Just a 1px white highlight on the bottom right. Problem is, the drop shadow filter in Flash defaults to a nice, smooth fade. Well, that’s not usually a problem, but it’s not what I wanted. For some reason I spent hours looking for this and finally ran across the syntax in case anyone else was wondering.

Here’s how. Just take the regular syntax in your sifr-config.js file:

sIFR.replace(fontname, {
  selector: 'h3',
  css: '.sIFR-root { color: #322319; text-transform:uppercase; }'
  ,filters: {
        DropShadow: {
           distance: 1
          ,color: '#ffffff'
          ,strength: 2
          ,alpha: .5
        }
      }
   ,wmode: 'transparent'
});

And add the blurX and blurY properties.

sIFR.replace(fontname, {
  selector: 'h3',
  css: '.sIFR-root { color: #322319; text-transform:uppercase; }'
  ,filters: {
        DropShadow: {
           distance: 1
          ,color: '#ffffff'
          ,strength: 2
          ,alpha: .5
          ,blurX: 0
          ,blurY: 0
        }
      }
   ,wmode: 'transparent'
});

You can see how it really makes it look like I exported an image from Photoshop, which is pretty cool. I think I’ve included most of the variables so just play around with it. And please remember…tasteful drop shadows are an art in themselves. Use wisely!