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!
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.
@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.
Finally!, amazing tip.
This is what I’m looking for. A plain and simple explanation.
Thanks a lot
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.
BestChristianDesign is helping give churches inspiration for their next project. Good call, guys.
Seth Godin reminds us to enjoy and take advantage of the uphills.
Stop announcing your new project. Just do it.
Rock and Roll people, Rock and Roll.
To all you staff designers out there, here’s a link for you. (via @ryanlascano)
Fascinating look into the music business.
Derek Sivers posts some great advice about balancing your life.
@ryanirelan Hate that, too. Was hoping it would grow on me but too many panes all over the place. Too much like my desktop :D
I've noticed I'm not noticing my spelling errors. I need more sleep.
The best Content Management System for designers. Feature rich, completely customizable, and easily extendable.
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
(JavaScript must be enabled to view this email address)
January 19, 2009
nice tip, i never succeed using it previuosly. thank you for sharing, i’ll try it asap.