Often times, as web developers, we're asked to add some seemingly simple visual elements to a page, like rounded corners and drop-shadows. There's as many methods of doing these as there are engineers who've banged their collective heads against the issue. In this presentation I'll provide you my markup-lite, non-javascript, mostly semantic methods for adding some fit & finish to your pages. This is by no means the end-all, be-all of rounded corners, and I'd encourage you to do some experimentation to find quicker and more elegant ways of doing some of the following.
background-position
, you can use one image to set several background images. Example: A different icon on each list-item in a UL can use one image file. Please see the "A List Apart" article on Sprites for a great explanation: http://www.alistapart.com/articles/sprites/_rule:xxx;
) hides the css property from everything but IE6, and the star (*rule:xxx;
) hides the css property from everything but IE6 & IE7. This is especially useful when you're dealing with something like width, where in IE7 and Firefox it's a not a suggestion, but in IE6 it is.
<div id="mod-id" class="mod">
<span class="x1"><span class="x1a"></span></span>
<span class="x2"><span class="x2a"></span></span>
<div class="mod-content">
<div class="hd">
<h3>Module head</h3>
</div>
<div class="bd">
<p>Module body</p>
</div>
<div class="ft">
<p class="ft-wrapper">Module foot</p>
</div>
</div>
</div>
mod-content
): This layer wraps your div's content, where it can't be touched by opacity or dropshadows.All of the styling tricks in the following examples use this same markup.
Module Content
Module Foot
Module Content
Module Foot
.mod { border:1px solid #b1e397; background-color:#f4ffe5; position:relative; z-index:0; } .mod .mod-content { position:relative; z-index:2; } /* x1 = top-right, x1a = top-left, x2 = bottom-right, x2a = bottom-left */ .mod .x1, .mod .x1a, .mod .x2, .mod .x2a { display:block; clear:both; font-size:0; /* for IE6 */ height:18px; /* set height to the size of the corner */ position:relative; background:url(images/cr_big.gif) no-repeat; } .mod .x1, .mod .x2 { width:100%; /* scales with the module */ right:-1px; /* overlap borders */ } .mod .x1a, .mod .x2a { /* left corners */ width:3px; left:-2px; } .mod .x1 { background-position:100% 0; top:-1px; } .mod .x1a { background-position:0 -36px; } .mod .x2 { /* bottom corners get moved */ position:absolute; background-position:100% -18px; bottom:-1px; /* overlap bottom border */ } .mod .x2a { background-position:0 -54px; }
Module Body
Module Foot
.mod, .mod .mod-content, .mod .ft, .mod .ft-content { background:url(images/rc_nb.gif) no-repeat; position:relative; } .mod { background-position:100% 0; z-index:0; } .mod .mod-content { background-position:0 0; left:-7px; /* offset by size of the rounded corner */ width:100%; position:relative; z-index:2; } .mod .ft { background-position:100% 100%; bottom:-7px; /* move outside of mod-content */ right:-7px; width:100%; } .mod .ft .ft-content { background-position:0 100%; padding:0 0 7px 0; left:-7px; } .mod .x1 { /* speech tail */ display:block; font-size:0; height:1px; width:1px; position:absolute; right:-15px; top:15px; border-right:0; border-left:15px solid #4C9ADA; /* pixel size = tail size */ border-top:10px solid transparent; /* set angle of arrow */ border-bottom:10px solid transparent; _border-top-color:cyan; /* No 'transparent' borders in IE6 */ _border-bottom-color:cyan; _filter:chroma(color="cyan"); /* filter out the cyan color */ }
Module Body
Module Foot
height:100%
of a parent who's height isn't defined in css, so use the huge px height and an overflow-hidden on the parent for IE6. This is why the shadow isn't offset from the top of the box.mod-content
.mod { position:relative; z-index:0; _padding-bottom:6px; /* IE6 fix - bounds x1's height */ _overflow-y:hidden; } .mod .mod-content { position:relative; z-index:2; border:1px solid #746555; background:#bdafa1; } .mod .x1 { display:block; background:#000; height:100%; _height:3000px; /* IE6 can't do 100% of an unknown height */ width:100%; position:absolute; top:6px; /* offset the shadow */ left:6px; z-index:-1; opacity:.30; *filter:alpha(opacity="30"); /* use 'filter' for IE6 & 7 */ }
Module Body
Module Foot
.mod { _padding-bottom:6px; /* IE6: bound x1a and x2a's height */ _overflow-y:hidden; position:relative; z-index:0; } .mod .mod-content { border:1px solid #fff; position:relative; z-index:2; } .mod .x1 { /*opacity layer*/ display:block; background:#fff; width:100%; height:100%; _height:2000px; position:absolute; _bottom:6px; /* IE6: offset the layer from 'mod' */ opacity:.30; *filter:alpha(opacity="30"); } /* the shadow's parent; controls offset */ .mod .x2 { display:block; width:100%; height:100%; overflow:hidden; position:absolute; top:6px; /* offset the shadow */ left:6px; _top:auto; _bottom:-6px; } .mod .x2a { display:block; border:6px solid #000; border-top:0; border-left:0; width:100%; height:100%; _height:3000px; /* IE6 can't do 100% of an unknown height */ position:relative; bottom:6px; right:6px; opacity:.30; *filter:alpha(opacity="30"); }
Module Body
...with a black gradient PNG
...with semi-opacity turned off
.mod { position:relative; z-index:0; _padding-bottom:6px; _overflow-y:hidden; } .mod .mod-content { border:1px solid #c06; position:relative; z-index:2; } .mod .x1 { /*opacity layer*/ display:block; background-color:#c06; background-image:url(images/grd_white.png); background-repeat:repeat-x; background-position:0 100%; _background:#f39; /* no PNG for IE6 */ width:100%; height:100%; _height:2000px; position:absolute; _bottom:6px; opacity:.40; *filter:alpha(opacity="40"); } .mod .x2 { /* offsets shadow by 6px */ display:block; width:100%; height:100%; overflow:hidden; position:absolute; top:6px; left:6px; _top:auto; _bottom:-6px; } .mod .x2a { display:block; border:6px solid #000; border-top:0; border-left:0; width:100%; height:100%; _height:2000px; position:relative; bottom:6px; right:6px; opacity:.30; *filter:alpha(opacity="30"); }
Module Body
mod-content
'.mod { position:relative; z-index:0; } .mod .mod-content{ background:#e9dac9; border:1px solid #eaeaea; position:relative; z-index:2; } /* x1 = top and left edges; x1a = top right corner; x2 = right and bottom edges; x2a = bottom left corner */ .mod .x1, .mod .x1a, .mod .x2, .mod .x2a { display:block; background:url(images/glow.png) no-repeat; /* turn off for IE6 or use a GIF */ _background:transparent; width:100%; height:100%; position:absolute; } .mod .x1{ background-position:0 0; z-index:-2; top:-10px; /* set to the size of the glow */ left:-10px; bottom:0; /* set glow to the edges of 'mod' */ padding:0 10px 10px 0; } .mod .x1 .x1a { height:10px; width:10px; background-position:100% 0; right:-10px; top:0; } .mod .x2 { background-position:100% 100%; z-index:-1; bottom:-10px; right:-10px; padding:10px 0 0 10px; } .mod .x2 .x2a { height:10px; width:10px; background-position:0 100%; left:-10px; bottom:0; }