CSS3 Shadows

I have updated the CSS3 Shadow action to add some extra attributes. The shadow can now be positioned on either on the outside of the html box (drop shadow) or inside (inset shadow).

I have also added the Spread attribute so that you can now define how many pixels wide your shadow is before it is blurred.

This box has the following attributes:

Shadow position: outside

X-axis Offset: 0px

Y-axis Offset: 0px

Shadow blur: 10px

Shadow spread: 5px

Shadow colour: 30%Black

CSS3 Shadows – Spread

The spread attribute here has not had the blur added so it is just 5px wide, giving a grey border.

CSS3 Shadows – Spread and Blur-1

Add blur to the spread and it softens the edge, here the blur is 3px with the same width border (5px), this softens the edge and bigger numbers extend the blur further in each direction.

CSS3 Shadows – Spread and Blur-2

Inserting a negative number into the Spread attribute reduces the blur area, as seen on this box where the Y-offset is 20px, Blur is 10px and the spread is -10px.

CSS3 Shadows – Inset

Change the Shadow direction from outside to inset and the shadow is now drawn on the inside of the box. The box border round this page is an inset box with no X or Y offset, Blur of 10px and a Spread of 5px.

CSS3 Shadows – Inset and CSS3 corners

Add some CSS3 corners to make a more complex shape just using the CSS3 atributes, and no images at all.