create rounded corners and drop shadows in CSS3

11 November 2011

Whether it's HTML5 or CSS3, both are slowly and painfully becoming standards, but in the meantime, it turns out that there's much debate and contention about even the simplest of features.

Like rounded corners.

In the CSS3 spec, rounded corners are specified as border-radius: though it's implemented differently in the Mozilla family of browsers (including Firefox) than the Webkit (Safari) group.

What this means is that if you're running, say, Internet Explorer or an older version of one of these browsers, odds are good you won't see anything happen when you specify the right CSS attribute.

Here's an example:

This should be a box with nicely rounded corners.

The code for this to work is:

<div style="background-color:#ccf;padding:8px;border:2px solid black;border-radius:10px;">This should be a box with nicely rounded corners.</div>

Not too bad to use, but why they can't just accept "border-radius", well, that's part of the adventure of web standards, I suppose.

Now, what about a drop shadow? That's done with the css attribute box-shadow, which takes three parameters: horizontal offset of the shadow, vertical offset of the shadow, blur factor and color. Complicated, eh?

Here's how it could be used in cooperation with the earlier rounded box:
This should be a box with nicely rounded corners.

Bet there's no shadow, though. Turns out that there's great debate about how to implement box shadow, so in fact you need to match the CSS3 model of your browser for it to even have a possibility of working.

Like this:

Did that work for you? If you're on a modern browser it probably did. Cool, right? Yeah, except here's the CSS3 required to make this work:

This should be a box with nicely rounded corners and a drop shadow.

Here's the code I'm using for this to work:

<div style="background-color:#ccf; padding:8px; border:2px solid black; border-radius:10px; box-shadow: 8px 8px 4px #666;-o-box-shadow: 10px 10px 5px #888;-icab-box-shadow: 10px 10px 5px #888;-khtml-box-shadow: 10px 10px 5px #888;-moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;">This should be a box with nicely rounded corners and a drop shadow.</div>

More than a bit of work, but at least it does render properly in modern browsers, and that's pretty darn slick.

 


Sumber : Jasa Pembuatan Website dan Sistem Informasi http://klatenweb.com
Selengkapnya : http://klatenweb.com/read/2011/11/11/725/create-rounded-corners-and-drop-shadows-in--CSS3.html