I have always liked using half shadows to break up sections of websites but in order to bring it into my Silverlight designs I have had to create PNG’s and import them into my Silverlight projects. This way has been fine but if you could create the same effect using simple XAML you would be able to create a smaller (file size) and a lot more flexible!!!

effect01

… so thats what I did…

To create this effect just open up Expression Design and create a new document.

Create a oval shape which is much taller than wide. its about 400px high and 25px wide.

oval1

Next up, apply a gradient to your oval. We need to set the gradient to Radial radial_option

and it needs to go from black to black, gradientstops

with the second stop of the gradients alpha set to 0%. stop_alpha2

oval_grad
Should look at bit like this

Now we need to edit the gradient to create the effect we want by editing the gradient properties. gradients-properties

properties

I’m setting the height of the gradient to about 2.5%. (remeber to unlock the constraints between your height and width of the gradient by clicking the link icon in between them)

Ok now we just need to edit the shape of the oval to cut off half of the gradient.
Use the direct select tool to move the points and splines to create a straight line on one side.

manipdone

And there you have it, a nice shadow breaker for you sites all made with XAML!

shad_complete

Another cool thing you can do with these shadows is, create a copy of your shadow, flip it and change it to white, this is called the Gina effect as coined by the guys at “from the couch”.

gina_effect

Thanks for reading, hope it helped and let me know how you go with it!

Alex

Advertisements