Sunday, September 12, 2010

Drop Shadow Effects For Beginners

It is very easy to create drop shadow in the expression blend. In this post I will show you how you can use the expression blend 4 to create the drop shadow of the object.DropShadowEffect is a pixel shader effect that applies a shadow behind an object. The shadow is positioned at a specified distance from the object and at a specified angle.The output of this exercise will be as shown in the Image 1.

Image 1
Now let us start our example of how to create drop down effect.Create new project in expression blend 4. I have created silverlight application in expression blend 4.I have inserted the text block control and set the text proper of the text block to "DROP SHADOW EFFECTS". Now next step is to create the drop show for the text block.

Image 2
Now click on the new button in the Effect which is located in the Appearance(you can see it in Image 2.and is a red rectangle is placed around the new button.). You will see new dialog box which is shown in the Image 3. From here you can see there are two effect Blur and the DropShadow effect. As we are creating drop shadow effect so select the DropShadow effect from the list and press OK.

Image 3
When you click on the OK button following properties for the Drop shadow are appears blur radius, color, Direction, opacity and shadow Depth property.

Image 4
Here is the detail of the drop shadow effect properties

Blur Radius :
              The BlurRadius property blurs the shadow in a similar manner as BlurEffect.

Color :
              The Color property specifies the color of the shadow
Direction :
              The Direction property sets the angle at which the shadow is cast. The valid range of values is from 0 to 360. A value of 0 places the shadow directly to the right of the object. Increasing the value causes the shadow to rotate counter-clockwise around the object. So, directly up from the object is 90. The default value is 315.

Opacity :
             The Opacity property specifies the opacity of the shadow. A value of 0 indicates that the shadow is completely transparent and a value of 1 indicates the shadow is completely opaque.

Shadow Depth :
             The ShadowDepth property sets the distance between the object and the shadow that is cast. Increasing this value positions the shadow effect further away from the object. The default value is 5

All and any comments / bugs / suggestions are welcomed!

No comments: