CSS3 - Adding Shadows To Boxes
With CSS 3 you can not only add shadows to text, you can also add shadows to the boxes that are drawn around some parts of your page content. This is done using the box-shadow property. This property has six values some of which are optional and some of which are mandatory.
- inset - this first optional value indicates whether the shadow goes inside or outside the box. If the value inset is specified then the shadow goes inside the box. If it isn't specified then the shadow goes outside.
- horizontal width - a mandatory value specifying the horizontal distance the shadow extends from the box.
- vertical height - a mandatory value specifying the vertical distance the shadow extends from the box.
- blur - this optional length value sets the blur radius for the shadow.
- spread - another optional length where a positive value makes the shadow larger than its element and a negative value makes it smaller.
- Colour - defines the colour of the shadow. This is mandatory in some browsers but optional in others (where if omitted black is the default).
You can supply multiple shadows on the same box using a comma separated list.
Examples
.shadow {box-shadow: 4px 4px 3px #000;}
Limitations
All modern browsers implement this property although some still require their proprietary prefix to be used in order for them to apply it. Some older browsers do not recognise the spread value.
Related Articles
- Table Controls
- Page Layout
- Background Controls
- Internet Explorer Duplicating Character Bug
- External Stylesheets
Copyright © Felgall Pty Ltd