A nice feauture in CSS3 is the box-shadow. Instead of working with tedious PNG-images you can add shadows to any element with the CSS property box-shadow.
The syntax works like this:
box-shadow: <offset-x> <offset-y> <blur> <spread> <color> <inset>
- The offset settings will set the angle of the shadow. Where it will be cast in relation to the element.
- Blur with set how much the shadows blurs out from its defined position.
- Spread will set the size of the shadow. By default the same size as the element. This number can be negative to set a smaller shadow.
- Color can be any format. i.e. black, yellow, #FFF, rgb(255, 240, 240) or rgba(0, 0, 0, 0.7)
- Using the inset option will cast the shadow inside the element instead of outside.
Here are some examples: