Phosphorus and Lime
A Developer's Broadsheet
This blog has been deprecated. Please visit my new blog at klenwell.com/press.
profile
Name: klenwell
Home: San Diego, California, United States
About Me: designer, programmer, wordsmith
Thursday, August 16, 2007
CSS: The Rounded Corner Fairy
Technically, it's a sprite. A single image used to round all four corners of a div block. The idea was inspired by this ALA article.
Previously, I've used the clever nifty corners javascript package. It's more elegant on the development side. But in operation, it's a bit clunky and results in a noticeable bounce as the tweaks are applied to the output.
Css-defined background images fill in more smoothly, but require additional sweat in putting together the page. First, you must create the appropriate image(s) (the background and foreground colors must match the css settings.) You only need one 16x16 round image like this:
But you must add four additional empty divs:
You must include the css settings:
And, as noted above, you have to make sure you give the parent block the proper
Also, while it works in Firefox and IE7, it doesn't quite work in IE6 and I haven't tested it any other browsers.
You can see the technique in action here: klenwell google page
Not perfect. But it has it virtues.
Previously, I've used the clever nifty corners javascript package. It's more elegant on the development side. But in operation, it's a bit clunky and results in a noticeable bounce as the tweaks are applied to the output.
Css-defined background images fill in more smoothly, but require additional sweat in putting together the page. First, you must create the appropriate image(s) (the background and foreground colors must match the css settings.) You only need one 16x16 round image like this:
But you must add four additional empty divs:
<div id="col1" class="column"><div class="tl"></div><div class="tr"></div><div class="child">
<!-- content -->
<div class="clear"></div>
</div><div class="bl"></div><div class="br"></div></div>
<!-- content -->
<div class="clear"></div>
</div><div class="bl"></div><div class="br"></div></div>
You must include the css settings:
/* note: parent block must have position setting of relative or absolute */
.column { position:relative; }
.tl { top:0px; left:0px; }
.tr { top:0px; right:0px; background-position:8px 0px; }
.bl { bottom:0px; left:0px; background-position:0px 8px; }
.br { bottom:0px; right:0px; background-position:8px 8px; }
.tl, .tr, .bl, .br { background-image:url('c16.ccddcc.png'); position:absolute; height:8px; width:8px; overflow:hidden }
.column { position:relative; }
.tl { top:0px; left:0px; }
.tr { top:0px; right:0px; background-position:8px 0px; }
.bl { bottom:0px; left:0px; background-position:0px 8px; }
.br { bottom:0px; right:0px; background-position:8px 8px; }
.tl, .tr, .bl, .br { background-image:url('c16.ccddcc.png'); position:absolute; height:8px; width:8px; overflow:hidden }
And, as noted above, you have to make sure you give the parent block the proper
position setting.Also, while it works in Firefox and IE7, it doesn't quite work in IE6 and I haven't tested it any other browsers.
You can see the technique in action here: klenwell google page
Not perfect. But it has it virtues.
some rights reserved, © 2006