fun examples

There is a always a balance to be found between form and function, and this is especially true with web design. Your page could have amazing features and functionality but noone will use it if they can't stand looking at it. It is sometimes worth spending a few minutes to apply some visually pleasing techniques to improve the look of your overall page.

shadows

You may have noticed drop-shadows on elements on some sites. These are a great way to make something stand out on a page without being obtrusive. They are fairly easy to create and can give your pages a sense of depth. The technique I'll show here will allow your to create drop-shadows on block-level elements such as <p>, <img> and <div>.

A simple google search will show you there are a lot of competing techniques for creating drop-shadows. Those that work across most browsers will usually require some extra, style-specific html markup and possibly images (as this example does.) Purists will shun these approaches, but the current state of CSS and browser support leaves few other options. Use what works and you're comfortable with. The code for the example above looks like this:

<div class="shadowbox"> <div class="shadow"> <p> This is an example of a paragraph with a drop-shadow. </p> </div> </div>

You can see from the code above that this technique requires two div elements surrounding whatever you want to be shadowed. The CSS looks like this:

.shadowbox { clear: both; float:left; background: url('../images/shadow.gif') no-repeat bottom right; margin: 10px 0 10px 17px !important; margin: 10px 0 10px 8px; } .shadow { background: url('shadow2.png') no-repeat left top !important; background: url('shadow2.gif') no-repeat left top; float: left; padding: 0px 6px 6px 0px; } .shadowbox p { border: 1px solid #a9a9a9; margin: 0; padding: 4px; }

The first two rules above are the only ones that really matter. The technique uses background images on the two containing divs to achieve the affect. The outer div contains a background image for the lower right and left sides and completes most of the shadow affect. Next the inner div's background will render on top of the outer div's and clean up the upper-right and lower-left corners of the shadow. The padding on the inner box ensures that the content doesn't overlap the shadow.

You'll notice there are to uses of the "!important" keyword. This is usually used to override the normal inheritance rules. IE completely ignores any line containing this, so we can use it to specify a rule for most browsers and then follow it up with an overriding declaration for IE. Why do we need this?

We use these duplicate declarations because we want our drop show to blend into a transparency so any background colors will come through. For this we have the image "shadow2.png" for most browsers. Because IE doesn't support images with transparency, the next line is used to declare an alternative image just for IE ("shadow2.gif").

This page shows examples of shadows on several element types.

(this posting is a stub with a basic, short explanation. this should be expanded later.)

rounded tabs

Of the many navigation options available, tab-based navigation has long been a popular choice. A modern variation is tabbed navigation with rounded corners. In our blog site we used unordered lists to create basic tabbed navigation, which looked something like this:

The technique for transforming the unordered list into these simple tabs is described here. The HTML looks like:

<div id='nav_container'> <ul id='navigation'> <li id='nav_home'><a href='#'>home</a></li> <li id='nav_articles'><a href='articles.html'>articles</a></li> <li id='nav_photos'><a href='gallery.html'>photos</a></li> <li id='nav_me'><a href='me.html'>me</a></li> <li id='nav_links'><a href='links.html'>links</a></li> </ul> </div>

And the corresponding CSS:

#nav_container { clear: both; margin: 0 0 15px 0; padding: 0; float: right; width: 100%; background-color: rgb(116,168,245); } #navigation { margin: 0; padding: 10px 0 0 10px; list-style: none; float: right; } #navigation li { float: left; padding: 0; margin: 0 10px 0 0; border: 1px solid rgb(193,193,193); border-bottom: none; background-color: rgb(255,255,255); } #navigation li a { text-decoration: none; font-weight: bold; color: rgb(100,100,100); padding: 7px; }

Because this was described in detail in the blog section I won't discuss the rules above here. But we can make a few additions to these rules to make our tabs rounded. This yields:

Here are the rules that were changed, with the changes/additions highlighted in bold:

#navigation li { float: left; padding: 0; margin: 0 10px 0 0; border: none; border-bottom: none; background-color: rgb(255,255,255); background: url("rounded_right_corner.gif") no-repeat right top; } #navigation li a { text-decoration: none; font-weight: bold; color: rgb(100,100,100); display: block; background: url("rounded_left_corner.gif") no-repeat left top; padding: 2px 7px 2px 7px; }

This was accomplished using a slight variation of the CSS sliding doors technique. It is one of the few rounding techniques that will withstand significant page resizing. one final step you might make to make your tabs more believable is to add a bottom border for those tabs that aren't active.

vertical navigation menus using lists

not yet written.

what's next?

I hope I've shown the basics of styling with CSS and demonstrated how it can be used to create flexible, elegant-looking pages that are easy to maintain. Next we're going to cover a bit of javascript and show examples of how to make your site more interactive. In doing so we'll cover even more CSS, especially those properties that can be used dynamically to make interactive pages.