Tuesday, June 8, 2010

Drop Shadows

Tested the concept of drop shadows today. The idea is to have a shadow under an graphical object to make it look like it hovers.

Applied a drop shadow to the Swedish Flag from my previous blog entry. The entire flag should have a shadow. The blue bottom rectangle in the flag has the same size as the entire flag so the desired effect can be achieved by adding a drop shadow to this rectangle.

The code that give the drop shadow can be seen in the following snippet:

effect: DropShadow {
    color: Color.rgb(32, 32, 32),
    offsetY: 5,
    offsetX: 5,
    radius: 15

The default color of the drop shadow is black but in this example a gray tone is used instead which is defined by the color argument above.

The final result can be seen in the picture below.

Complete source code can be found here.

No comments:

Post a Comment