CSS Angles: Just the Edge Your Web Page Needs!

Building a Shelf

Along the same theme, we can apply this to everyday web design by adding some 3D emphasis to a link or navigation by creating some CSS shelves. And honestly… it wouldn’t kill you to put up some shelves.

The idea for the CSS shelf first came to me during a visit to Webmonkey. Their old design (about a year ago) positioned the search box on what looked like a little shelf with the search box itself casting a shadow. And I wondered if that could be done with pure CSS. Turns out, it can.

Anatomy of the Semantic Shelf

The CSS shelf comes in three parts (four if you include the container <div>). Keeping the markup semantic lets us treat it just like any other type of navigation, and allows us to keep the layout extremely flexible for later design changes.

<div id="shelf">  
 <ul>  
   <li><a href="#">making a link stand out</a></li>  
   <li><a href="#">isn't really all that hard</a></li>  
   <li><a href="#">however, i did seem to swear a lot</a></li>  
 </ul>  
</div><!--/shelf-->

For the base of the shelf we need to first establish a relative positioning point with our <div>, set our height and width properties, and set a font base.

#shelf {  
 position: relative;  
 top: 50px;  
 width: 700px;  
 font: normal .75em Arial, Helvetica, sans-serif;  
}

The second step in building our shelf is dealing with the <ul> to create a base for our link to stand on. Many properties in this part of the shelf are cosmetic, but the margin actually fixes some layout issues I ran into.

#shelf ul {  
 margin: 0 0 0 -50px;  
 padding: 0;  
 border-top: 1px solid #333;  
 border-bottom: 1px solid #333;  
 height: 15px;  
}

The <li> holds the length (width: 130px) of each shelf item, creates the shadow (border-top), and provides some vital positioning properties (position: relative). Setting the border-left color to white creates that knockout effect we mentioned earlier. In this case, it fills in the area below and to the left of the shadow.

#shelf li {  
 list-style: none;  
 margin: 0 20px 0 50px;  
 float: left;  
 border-top: solid 15px #999;  
 border-left: solid 20px #fff;  
 position: relative;  
 width: 130px;  
}

Lastly, we have to set the link properties: the cosmetic styles that form the bottom of the shelf. If you play with these values a little, you can see how much the slightest change can alter the look and feel of your shelf.

#shelf a {  
 display: block;  
 height: 30px;  
 position: absolute;  
 top: -40px;  
 white-space: nowrap;  
 padding: 5px 10px;  
 color: #fff;  
 text-decoration: none;  
 background: #555;  
}

Then we hang it on the wall, sit back, and admire some good old-fashioned quality craftsmanship.

The Future of CSS Angles

The W3C has drafted an extension to the CSS3 box model called Rotating Boxes. This model includes two properties: rotation and rotation-point. Rotation can be applied to block-level, inline table, and inline-block elements; it can take a value from 0 to 360 degrees. Rotation-point can only be applied to block-level elements, takes two values (for example, bottom and left), and defines the point where the rotation occurs. These values may also be numeric and/or negative.

The proposed syntax also includes a block progression property, which can define the direction of the text in the rotated box, and whose use goes beyond being paired with the rotation property.

thead th {  
 block-progression: rl;  
 padding: 0.5em 1em;  
 rotation: 45deg;  
 rotation-point: bottom left;  
}

The above code example (via the W3C examples) will produce slanted table headings, as displayed below.

Benefits

What are the benefits of spending an extra hour buried up to your eyes in CSS trying to achieve a task that an image could accomplish in less than half the time?

1. You take pride in your CSS and hate using unnecessary images to accomplish a design.
2. The amount of CSS you need to make an angle effect will usually be lighter than the weight of the image doing the same job—at least 99% of the time. If you’d like to test this out for yourself, Yahoo came out with a great extension to Firebug for grading a web site on speed, called YSlow.
3. Using an unnecessary image will increase your HTTP requests to the server. Too many requests can contribute to a slow-loading web page.
4. Using a slanted line can be a nice way to break the boxy tendency of a simple design and catch the user’s eye.

The best part about using basic properties (like borders) creatively to solve a problem, is that all the browsers can support these techniques; more often than not, they have very few cross-browser issues. Adding a layer of JavaScript on top of this can create some very cool effects, like James Edwards’ 3D Maze.

Closing

There are many things coming down the CSS pipeline: some from the W3C, others from the community. And a hot topic right now seems to be that JavaScript is the gateway to CSS3. While we wait for some areas of the Web to catch up to the desires of ambitious developers, there’s still a large amount of exploration to be done with the current state of CSS.

Sites like CSS Zen Garden can show us the power of CSS; this is just another example of how semantic markup can be manipulated a great deal with a little sweat and creativity. Of course, this is just the tip of the iceberg with what you can do using pure CSS. The key is to avoid the mindset that a table has to look like a table (sorry, that link works in Firefox only). A lot of the greatest CSS techniques we all know and use came from a combination of imagination, free time, and trying new things over and over again. Don’t let common practices become law just because it’s “how things are done” and it’s a “standard”. CSS is still very young and we’re all feeling out its limitations; the web moves too fast for us to get set in our ways. Remember, using a table for layout used to be a standard too…