As I’ve mentioned I’m doing a couple of HTML5 implementations and in one of them I was faced with some “post” boxes in a WordPress theme that featured both rounded corners and a drop shadow. Since I’m using already using Modernizr, which exposes specific CSS3/HTML5 feature support on the HTML element, I figured I’d do a little bit of extra work and use some CSS3 magic to make the design happen in modern browsers. For this post I’ll skip the extra work bit (a little JavaScript to insert extra markup in for Internet Explorer/Opera) and just look at the implementation for fancy new browsers (Firefox 3.5 and the latest/greatest Webkit based browsers.)

First, let’s look at it in action (this will suck in IE/Opera)

Here’s the CSS:

#container #main article{

  background: url(images/post-bg.png) repeat-x;

  display:block;

  min-height:100px;

  border:1px solid #003366;

  margin-bottom:9px;

  width:85%;

  }

  .borderradius.boxshadow.rgba #container #main article{

  border-radius:10px;

  -moz-border-radius:10px;

  -webkit-border-radius:10px;

  -moz-box-shadow: 0 0 5px rgba(66,66,66,.5);

  box-shadow: 0 0 5px rgba(66,66,66,.5);

  -webkit-box-shadow: 0 0 5px rgba(66,66,66,.5);

  background:#efefef;

  }

The .borderradius.boxshadow.rgba classes are the ones appended by Modernizr to indicate support for those properties.

The pertinent code can be seen in the funny looking -moz and -webkit lines. Those are proprietary CSS extensions that map to the CSS3 standard box-shadow and border-radius properties. I’ll go through each in turn.

box-shadow

Box shadow has six possible arguments

box-shadow: horizontal offset | vertical offset | blur radius | spread radius | color | inset keyword;

I’ll quote the spec for the details:

• The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
• The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
• The third length is a blur radius. Negative values are not allowed. If it is 0, the shadow is sharp, otherwise the larger the value, the more the shadow is blurred. The exact algorithm is not specified.
• The fourth length is a spread radius. Positive values cause the shadow to grow in all directions by the specified radius. Negative values cause the shadow to shrink. The shadow should not change shape when a spread radius is applied: sharp corners should remain sharp.
• The color is the color of the shadow.
• The ‘inset’ keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

In my example, I’m using just the first three arguments and then a Color. I feel like the interface is intuitive and the results are a life saver. Never again will I have to worry about tiling 32 bit PNGs for this effect. Of particular interest is the color argument. That’s a real world example of…

rbga Color

Red-Green-Blue-Alpha FTW. Four arguments. Red, Blue, Green values (between 0 and 255) and then an Alpha value- 0 is transparent. 1 is full opaque. In this case I’m using it to replicate the opacity setting in the Photoshop drop shadow layer effect. Fancy.

border-radius

This one is simple- at least in the way I’m using it- taking a single value and rounding the corners of your box accordingly.

This is like a dream to me. I’ve been doing craptastic markup to produce rounded corners for a decade.

Rounded Corners: now with 100% less crap.

The property can actually take two arguments, the horizontal radius and vertical-radius. Thankfully the design didn’t call for anything like that, because apparently the implementations are different.

For more detail on the values, the spec says:

The two length values of the ‘border-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner (see the diagram below). The first value is the horizontal radius (or vertical if the ‘writing-mode’ is vertical). If the second length is omitted it is equal to the first (and the corner is thus a quarter circle). If either length is zero, the corner is square, not rounded. The border radius also causes the element’s background to be rounded (even if the border is ‘none’). Negative values are not allowed.

I have seen the future!