CSS Mojo: Adding Visual Polish To Your Pages

Presented by: Leslie Sommer
leslie(at)lesliesommer(dot)com :: YM: supahank

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.

The Basics: 2 simple tricks

The Markup

<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>

Things to note:

All of the styling tricks in the following examples use this same markup.

Rounded corners with a border

The Example

Module Head

Module Content

Module Foot

Module Head

Module Content

Module Foot


The Sprite

Notes:

The CSS

.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;
}
		  

Rounded corners with solid background

The Example

Module Head

Module Body

Module Foot

The Sprite

Notes

The CSS

.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 */ 
}
			  

Translucent dropshadow (2-sided)

The Example

Module Head

Module Body

Module Foot

Notes

The CSS

.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 */
}
	  

Translucent dropshadow (2-sided) with translucent content area

The Example

Module Head

Module Body

Module Foot

Notes

The CSS

.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");
}
		  

Translucent dropshadow (2-sided) with translucent content area and gradient

The Example

Module Head

Module Body

...with a black gradient PNG

...with semi-opacity turned off

Notes

The CSS

.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");
}
		  

Glowy shadow (4-sided)

The Example

Module Head

Module Body

The Sprite

Notes

The CSS

.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;
}