Menu
Does anyone know if Raphael supports the use of a drop shadow. I am trying to create a drop shadow for an object I have created. Here is the code I have, but I can't figure out how I would add a drop shadow. Please help me if you can my manager is becoming VERY frustrated with me.
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="draw-here-raphael" style="height: 200px; width: 400px;">
</div>
<script type="text/javascript">
//all your javascript goes here
var r = new Raphael("draw-here-raphael"),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});
</script>
</body>
</html>
526
The drop shadow (sometimes called a “box shadow”) is an effect often found in catalog photographs, advertising images, and Web pages. It is created by separating the subject object from the background and adding a custom shadow. Sometimes the background is deleted, other times it is substituted out or modified.
A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. Note: This function is somewhat similar to the box-shadow property.
Open the Effects & Presets panel using either Command+5 on a Mac or Ctrl+5 on a PC. Type “Drop Shadow” in the search field. Drag the Drop Shadow effect onto your timeline layer or directly onto the composition scene. Alternatively, you can navigate to the Effect tab and choose Perspective > Drop Shadow.
The .glow()-method can be used to some extent:
var circle = paper.circle(100,100,50);
var path = paper.path('m200,50 l100,0 l100,100 l0,100 z');
circle.glow();
path.attr({
fill: 'blue'
});
path.glow({
color: '#444',
offsety: 20
});
See it in action here: http://jsfiddle.net/sveinatle/gkayG/7/
It seems to only work for the lines though, it doesn't actually fill the shadow.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
