CSS Box-Shadow and Border-Radius Updates

Added some new code to my CSS. I’ve been using border-radius on another site of mine and decided to play around with the box-shadow to see what I could get it to do. Strangely enough, while first playing around with it using FireBug, it was not being rendered correctly. I wasn’t sure what the problem was but when I refreshed the site the problems seemed to work themselves out, so that I could successfully view the edits.

Border-radius is pretty simple to implement:
border-radius: 20px 20px 20px 20px;

The box-shadow was a bit tricky to get it to work the way I wanted. All that is required is a horizontal and vertical shadow offset. It defaults to black.
box-shadow: 0 0 15px 1px #3D270B inset;

The tricky part was setting it up with no offset, 0, for both horizontal and vertical while telling it to be inset, rather than outset. Then adding the blur, spread it out with the color I chose. This gives a 3-D embossed edge effect that looks pretty good. The spread property is confusing to me because it kind of sounds like it would spread things out, but that is what blur does. The spread rule simply adds weight to the effect. It seems to add what ever number of dark pixels you give it to the leading edge of your shadow. 1 or 2 pixels added a fair amount of weight to it and 10 pixels was completely over the top.

h-shadow is Required.
The position of the horizontal shadow. Negative values are allowed.

v-shadow is Required.
The position of the vertical shadow. Negative values are allowed.

blur is Optional.
The blur distance.

spread is Optional.
The size of shadow.

color is Optional.
The color of the shadow.

inset is Optional.
Changes the shadow from an outer shadow (outset) to an inner shadow

One nice thing is that this rendered equally well in Firefox and MS Internet Explorer!!!


Leave a Reply