CSix CSS Techniques

Thanks to Leslie Sommer

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

Sprites: This is a cute name for basic background-image manipulation. A sprite is one image file that contains more than one background-image. Through the manipulation of 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/
IE6 & IE7 Hacks: There are two basic hacks (or 'filters') that provide an elegant solution to some of your IE pain. The underscore (_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.

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:

Structure: Use a standard "head, body, foot" structure for your content divs. Typically, the "head" and/or the "foot" are optional.
Untouchable layer (mod-content): This layer wraps your div's content, where it can't be touched by opacity or dropshadows.
The 'X' Hooks: The two sets of spans (x1 & x2) can act independently of each other, so you could use one for a gradient and one for a dropshadow without worrying about how one would affect the other. The nested spans (x1a & x2a) add another level of control for positioning. All four can act in concert for rounded corners

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 image: The outside edge of the corner image must be filled, not transparent, otherwise the corners of the box show.
IE6 bug: The images don't sit in the box corners when the IE6 box is over 100% wide, like if you have an extra long URL or string that breaks the box width.
More info: This uses a modified 'sliding doors' method, explained in A List Apart's "Sliding Doors of CSS" article.
This method is best under the following circumstances:
- Bordered modules
- Pages where the design isn't likely to change, or pages that have a set, solid-colored background

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 image: Make sure it'll accommodate the full size of your module (most likely way bigger than the one above). The outside edge of the corners can be transparent.
The method does not use the x-hooks; instead it uses the actual content elements. A side benefit is that the x-hooks are free to be used for other effects
This method is best under the following circumstances:
- Can go over any kind of background, so works with patterned backgrounds and should work with drag & drop behavior.
- Best for smaller modules like dialogue boxes or speech bubbles, where a max-height/width can be set.
- As a design principle, solid-background modules work better as highlighted content (like product alerts or ads), rather than as a default module type.
The pointy tail:
- Uses no images.
- Find out about slanted borders at http://www.infimum.dk/HTML/slantinfo.html.
- Use 'transparent' border color on the invisible sides of the box.
- IE6 work-around: set the border color to a random color (like 'cyan'); then use IE's 'filter:chroma' property to hide it.

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

This method requires a solid module background color, otherwise the translucent box will show through.
IE6 issue: IE6 won't do 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.
Do box styling (border & background) on mod-content

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

This is a more css-heavy method than the previous example, but allows for translucent backgrounds.
Safari issue: Dropshadow doesn't work on Safari at all
IE6 issue: The shadow won't offset at the top for the same reason noted before.

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 image: This uses a white-to-transparent PNG. You can also use a black-to-transparent PNG (see 2nd example above), or any-color-to-transparent image...
Add the gradient background image to your translucent layer (x1, in this example).
IE6 issue: Forget about IE6 and it's bad PNG support. Either use a GIF or nothing at all. Avoid using AlphaImageLoader or base64 encoding if you can; these methods will noticeably slow down your site.
More info: A List Apart: Super-Easy Blendy Backgrounds (http://www.alistapart.com/articles/supereasyblendys/)

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

IE6 issue: Because of the lack of alpha transparency support for PNGs, either use a GIF or, using conditional comments, give IE6 a 2-sided dropshadow instead.
Set the module styling on 'mod-content'

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