Even More Rounded Corners With CSS
(Another technique for the pile.)
There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with various visual effects. Based on the original More Rounded Corners With CSS, this update reduces the background to a single "sprite", retaining the alpha transparency benefits of PNG without bloating the markup required to produce the same effect. The end result is something which should allow for further customization.
- Fluid layout, width/height (up to full image dimensions)
- Single PNG image
- PNG alpha transparency - corners, borders, drop shadows, inner gradients etc.
- Standard Module Format-based content markup (SMF approach thanks to Nate Koechley) - see also, "It's Not Divitis" (2)
- Degradation to GIF (or 8-bit PNG) for IE 6
See this Basic Rounded Corner CSS example.
Download examples - Includes this demo page, basic examples, images and PSD dialog templates (use layer effects + color fill to customize)
Scott Schiller (contact) is a Front-end Engineer (previously "Web Developer") who builds fun creative and technical stuff on the web - or failing that, tries - when he has free time. He likes building cool things which contribute to, yet enjoys mocking, the Web 2.0 meme. (See How Web 2.0-Aware Are You?)