January 8, 2009, 2:56 pm
Rounded Corners and Other Hooks
By Henry Woodbury
The upcoming CSS3 Specification looks to codify some of today’s favorite interface design tricks, including rounded corners, drop shadows, alpha transparency, and custom fonts. Many of these features can be accessed already using the probable CSS3 style or a browser-targeted version of the same. For example, rounded corners has three test declarations:
-moz-border-radius (for Mozilla-based browsers such as Firefox)
-webkit-border-radius (for Webkit-based browsers such as Safari)
border-radius (the probable CSS style)
Here is a semi-transparent white box with rounded corners and a drop shadow. Two circles are overlayed to show transparency effects.
None of these effects show on the current version of MSIE 7 — so let that be your control. Some may not show on Firefox until the release of Firefox 3.1, but all work on Safari using the Webkit syntax.
It doesn’t fully work in Opera Alpha 10 (Presto 2.2 Engine). The rounded corners… are not yet implemented.
Posted by Karl on January 13, 2009 at 3:02 pm