I would like to find out how to add blurry edged drop shadows to Raphael.js objects/paths. As far as I know it is not possible with the library as is but is there a work around?
+2
A:
The easiest way to do it is simply to draw the object with a shadow-colored fill, offset by a few pixels, and then draw the actual object on top.
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
You can also adjust the opacity attribute if needed.
C-Mo
2010-10-07 03:29:37
but a shadow colored fill will have a solid edge. I am looking for an edge that blurry, from light gray to 0% alpha. you know?
J3M 7OR3
2010-10-07 03:38:43
Raphael does have a blur plugin. I've never used it, so I can't vouch for it, but it's by Dmitry so we can assume he knows what he's doing ;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
C-Mo
2010-10-07 04:03:35
Oh that is interesting. You should submit it as an answer and I will accept it. If you don't then I will answer it myself with in 3 days. Thanks. Still drop shadow should be coded into Raphael to make it simpler.
J3M 7OR3
2010-10-07 18:39:46
+1
A:
Adding a link to Raphael.blur in a separate answer, per the OP's request.
http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
Updated code sample:
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);
Note that in Dmitry's comments he mentions that there is no WebKit support. He uses the <filter> element and the feGaussianBlur filter effect. WebKit has implemented the feGaussianBlur effect, but filters are unstable and are disabled in Safari (it may work in Chrome 5 - should definitely work in Chrome 6).
C-Mo
2010-10-07 19:33:55