I would suggest to reproduce the exact same demo in this tutorial for you to understand better how this works. Later you will be able to play with it.

We will use 5 Rectangle shapes in total: One will be our object and the other four will form the shadow.

 

. Create a Grid, 300px Width by 200px Height. All our elements will be created inside this Grid. Double click it to select it (A yellow border indicates that). This helps to easily select (simple left-click) the objects inside our grid.

. Create a Rectangle, 200px Width by 100px Height. Leave its Fill color to the default White and set the Stroke to: No brush. This will be the object to which we will "apply" the shadow. Let's Name it "Object". Set its Horizontal and VerticalAlignment to: Center in the Layout properties panel. (See image 1)

Image 1:

 

. Create a Rectangle, 150px Width by 100px Height, which is exactly 1/4 of the Grid's area. Leave its Fill color to the default White and set the Stroke to: No Brush. In the Layout properties set the HorizontalAlignment to: Right and VerticalAlignment to: Bottom. This will be the bottom-right corner of the shadow. Let's Name it "ShadowBottomRight".
Set its Fill to: Linear Gradient Brush. Select the Brush Transform Tool (See image 2).

Image 2:

Notice the Black to White default Gradient Fill. Leave it as it is.

 

. Now select the OpacityMask Brush and set it to Gradient brush. It's normal that nothing seems to change. Select the Brush Transform Tool if it's not still selected and Rotate the dark end of the brush (Back end of the arrow) towards the left while pressing the Shift key until the arrow is perfectly horizontal. (See image 3)

Image 3:

 

The Shift key causes the arrow to snap so it is indispensable for this project to achieve a smooth looking gradient.

.  Select the White end of the OpacityMask gradient on the Brushes Property panel and set its Alpha transparency to 0%. (See image 4)

Image 4:  

Cool, ha?

 

. Select our "Object" and modify its Order to: Bring to Front. (See image 5)

Image 5:

 

At this point you could already be altering the gradients position and length but if this is new to you you should leave it as it is and continue with the next steps.

. Select the ShadowBottomRight rectangle, copy and paste it. Name it "ShadowTopRight" and set its verticalAlignment to: Top. (See image 6)

Image 6:

 

. In the Transform properties panel select the Flip tab and click on: Flip y axis. (See image 7)

Image 7:

 

. Now modify its Order to: Send to Back. (See image 8)

Image 8:

 

. Select both ShadowBottomRight and ShadowTopRight (with the Shift or the Ctrl keys), copy and paste and with both shapes still selected set the HorizontalAlignment to: Left. (See image 9)

Image 9:

 

. Set the Flip Transform property to: Flip x axis. (See image 10)

Image 10:

 

. Finally modify the selection's Order to: Send to Back. (See image 11)

Image 11: 

 

. You can now name them (you guessed it): "ShadowBottomLeft" and "ShadowTopLeft".

We have finished creating all the elements necessary to the shadow effect. Here is the outcome for now (See image 12) which doesn't look perfectly smooth because we haven't modified the gradients: Notice the 2 peaks of vertical dark shadow towards the center of the Object.

Image 12:

 

I will explain later a trickier part that consists of adjusting the Fills and OpacityMasks gradients to achieve a better looking shadow drop, like the one I used in the Mashooo.com main menu in the header area.

This is my first attempt ever to putting together a tutorial so questions, criticism, complaints, corrections, kudos (they all start with the sound "k"!), etc are all very welcome. Enjoy!

>>Create shadow effect in Expression Blend part 2

 

Currently rated 4.5 by 2 people

  • Currently 4.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

geekswithblogs.net

Thursday, December 25, 2008 9:14 AM

Pingback from geekswithblogs.net

Silverlight Cream for December 21, 2008 -- #463

silverlightweb.com.cn

Saturday, October 31, 2009 2:34 AM

Pingback from silverlightweb.com.cn

Create shadow effect in Expression Blend Silverlight Web

endyear2012.com

Wednesday, May 05, 2010 5:14 PM

Pingback from endyear2012.com

final test pingback from « End Year 2012

silverlightnews.com

Monday, December 12, 2011 8:14 AM

Pingback from silverlightnews.com

Create shadow effect in Expression Blend – Part 2 « Silverlight News

Comments are closed