sIFR 3 Hard Drop Shadows

by Jonathan Longnecker

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.

Faded drop shadow to sharp drop shadow

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'
});

Image with hard drop shadowsYou 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!

P.S. – If you want to learn how to create a more profitable web shop check out Freakishly Profitable. It's the best way to make a "monster" adjustment to your web studio's bottom line.

January 16, 2009

Tutorials

Comments

  1. nice tip, i never succeed using it previuosly. thank you for sharing, i’ll try it asap.

  2. Is there any way to make the shadow drop to the left and to the bottom? I tried making distance -1, but that brings it to the top-left.

  3. @Jason - Hmm that’s a good one I’m not sure. Maybe there’s an x/y coordinate version of the distance? Syntax is so weird on sIFR.

  4. Finally!, amazing tip.
    This is what I’m looking for. A plain and simple explanation.
    Thanks a lot smile

  5. I completely agree.  The multiple syntax is a killer.  I’m sure it makes sense to javascript pros, but it was killing me.  The “angle” property from Flash seems to work in this too.  Just adding an (,angle: 20) seems to change things around.  Thanks for helping with the syntax.  I had an issue where the text was always white.  When I used your syntax, it was all better.

    So thanks.

  6. Well done to think of seomthing like that



Behold our Amazing Portfolio

Check it Out