10 Challenging But Awesome CSS Techniques

Most designers and web developers only scratch the surface of the potent language that is CSS. In terms of programming languages, CSS has a fairly simple learning curve. That doesn't mean that CSS isn't a powerful language. Sometimes it's the small things that make a huge difference in a website design.

In this post we're going to outline 10 awesome CSS techniques for web developers who know their stuff.

There are plenty of CSS techniques and hacks out there for beginning designers. Everyone knows about the routine tricks like:

These simple tricks are all fine and very important, but today we're going to look at some CSS techniques that are a bit more challenging. They're not the run-of-the-mill techniques you'd teach a CSS beginner. These 10 tricks are slightly more difficult, but if done well they can add an extra special something to your website layout.

1. Focusing and Blurring Menu Items

Let's start things off with a technique that isn't too advanced, to get us limbered up. The focusing and blurring of navigation menu items is a powerful way to add attention to the selected item. This technique is different than traditional image rollovers because instead of changing the state of the hovered element, it changes the elements that aren't selected.

At the core of this effect is a simple rollover, using an image for each of the links. Each image is 600px wide, with 3 different states: static, active and rolled over.

An example menu item image

This will make each navigation button 200px wide, so that when a button is rolled over, every other navigation item will shift -200px to change their background image. It's a nifty effect that is quite different to most rollover-based navigation menus.

2. Illustrative Menu Rollovers

Illustration-based layouts are the latest trend in web design, and for good reason. A beautiful illustration can be a very appealing web layout. Yet sometimes illustrated layouts have a difficult time showing animation on the pages, as the bulk of the design is based on images. We can use a bit of CSS in the navigation to animate the illustration.

WebDesignerWall has an excellent tutorial that not only shows you how to add animation to the navigation, but also how to create the entire navigation system in Photoshop. The finished product is a playful, vibrant navigation system that makes the design much more life-like and appealing. The difficult part about following the example isn't working with the CSS, but rather making the changes in Photoshop to have the rollovers appear connected.

3. Advanced Typography Tweaks with CSS

Typography is sometimes overlooked in a CSS. However, you can do many creative things to text just by adding some CSS. For example:

Reflections

You can skip the javascript and go straight to the CSS for making reflections within text. Granted, it doesn't look quite as elegant as the javascript solution, but it has potential to be quite nice.

Flowing Headlines

You can create nifty headlines that flow together by using a low letter spacing for the first character inside a span. Note: Not all character combinations look fantastic.

Drop Characters

You can even create drop characters (see the "g"?) by utilizing a low line height and a bottom border.

You can see many other advanced CSS techniques for text at the 3.7Crea.tv blog.

4. Dynamically Highlighted Columns In Tables

Crazy Egg has an incredibly intuitive design for their signup page. Instead of making the user click to another page to start the signup process, Crazy Egg uses CSS and a touch of javascript to make the table column neatly slide to the left while a signup form appears in place of the other columns. Quite handy if you're wanting the visitor to instantly start the signup process, all within a very tiny space.

While tables are something that modern designers typically like to avoid, they can be perfect for organizing lots of data. Pricing tables are a great place to utilize tables, and making them more interesting certainly helps the user experience.

Ask the CSS guy has an excellent tutorial that replicates the code, complete with a live example and downloadable source.

5. Dynamic Variables in CSS

CSS isn't really that powerful of a language by itself. Sure, you can do tons of nifty tricks with it, but it's still only a stylistic language. You can't store variables or do other things that dynamic languages like PHP can do. However, you can use dynamic languages to output CSS, giving them dynamic variables.

By using the header() function in PHP, it's possible to have PHP print out CSS. You can use different arrays to show different bits of CSS styles. For example, here is a default color scheme in CSS, output in PHP:

$persistent = array(
'bgmast' => 'bbd9ee',
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3',
'fgmenu' => '444',
'bgcont' => 'fff',
'fgcont' => '444' );

And here is an alternate color scheme:

$alternate1 = array(
'bgmast' => 'ddb',
'fgmast' => '000',
'bgmenu' => 'aa7',
'fgmenu' => 'fff',
'bgcont' => 'fff',
'fgcont' => '333'
);

If you wanted to show an alternate color scheme you'd simply toggle between $persistent and $alternate1 to swap the styles.

Check out the full tutorial at Digital Web Magazine for a more in-depth explanation of dynamic style switching with CSS and PHP.

6. Pull Quotes with CSS

Pulling quotes from the text of a web page is a great design technique that can add a nice element of style to a website. Many magazines, ebooks and other online publications use quotes to set apart a bit of the most important text so that the reader's eye is drawn to it. Quotes are essentially a piece of eye candy for the reader. Here are a few ways a designer could pull quotes from the article.

Manually

The designer could manually make an extra div that looked something like:

1	<div class="quote">
2	This is the quoted text, floated right with some padding.
3	</div>

with a style that looked like:

1	.quote {
2	float:right;
3	padding-left:15px;
4	....

with any other styles that might be needed. Manually making an extra div isn't a great idea because it takes more time and adds duplicate content to the source.

Javascript

You could also utilize javascript to pull quotes from the text. While this eliminates the duplicate content issue and doesn't require you hardcode another div, you'll still have to include a bit of javascript.

Designmeme has an excellent tutorial on how to pull quotes using only a bit of CSS and the CSS 2 :before pseudo element to show a quote.

<p class="pullquote" title="Only this, and nothing more.">Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’</p>

Here's the pullquote class:

.pullquote {
width:550px;
line-height:1.5;
font-size:1.2em;
text-align:justify;
}

along with the :before pseudo class:

.pullquote:before {
content:"201C" attr(title) "201D";
font-family: "Times New Roman", Times, serif;
font-size:1.2em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25em 1em 0.5em 0;
padding:1em;
}

Now every time you have a paragraph with the class "quote", any text you put in the title attribute will show up in a quote box (with curly quotes).

You can read the rest of the excellent CSS pull quotes tutorial at Designmeme.

7. Change Styles Based on the Time of Day

Changing the appearance of your website based on the time of day is not only a fun way to add depth to your design, it's also a way to personalize the visitor's experience. So far there are two ways to accomplish it with CSS: By javascript or PHP (or some other dynamic language).

Both approaches essentially do the same thing, with a few small differences. By using javascript you can use the visitor's time to display the appropriate stylesheet. (If you want to use your server's time, use the PHP version).

Here's the javascript code from katgal that changes the stylesheet every 3-4 hours, based on the user's time.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";

var css = '<';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>
<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Using this method you can show different stylesheets

From 5 am to 8 am
From 8 am to 12 pm
From 12 pm to 3 pm
From 3 pm to 6 pm
From 6 pm to 9 pm
From 9 pm to 5 am

8. Change CSS Styles Based on the Weather

Changing the appearance of your website based on the time of day is peanuts compared to the ability to change the appearance of your site based on the weather. CSS-Tricks has an amazing tutorial that shows how to form a design based on the current weather conditions from Yahoo! Weather.

By using a bit of CSS and PHP trickery, the tutorial shows how to switch classes of the layout based on the weather. Just create a style (the example shows a header image) that correlates to the appropriate weather conditions. It uses a stylesheet like this

.header {
width: 782px; height: 150px;
/* DEFAULTS TO SUNNY */
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-rain {
background: url(images/header-rain.png) no-repeat center center black;
}
header-snow {
background: url(images/header-snow.png) no-repeat center center black;
}
.header-sunny, .header-fair {
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
background: url(images/header-partlycloudy.png) no-repeat center center black;
}

and once it pulls the weather condition via PHP/XMl. This snippet of PHP is used in the layout to show the proper weather class.

1	<div class="header header-<?php echo $weather_class; ?>">
2	</div>

9. Perfect Page-Printing with CSS

An overlooked feature on the website is the "print this article" link. There are many people who use the Internet who still like to print out useful articles and store them in paper form. In order to pull this off, you need to use CSS/XHTML page breaks.

David Walsh has some excellent code that shows the CSS that is needed to make effective page breaks in printing pages.

@media all
{
.page-break    { display:none; }
}

@media print
{
.page-break    { display:block; page-break-before:always; }
}

And then to use the code, just add <div class="page-break"></div> whenever you need to break the page, like so:

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->

David also gives some great examples of places to add printing breaks in the page.

Between page sections (h2 or h3 tags, depending on your site format)
Between the end of an article and subsequent comments / trackbacks
Between longs blocks of content

Related

Check out some of David's articles on how to make your site more printer friendly.

10. CSS Bar Graphs

Bar graphs create a nice visual for a group of otherwise boring statistics. Apples to Oranges has found a way to accurately display bar graphs with CSS only. It's an elegant solution for what would have to otherwise be hardcoded or done with javascript.

The basic thought behind the tutorial is that you create a class like .graph

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

and display it on the page like so:

1	<div class="graph">
2	<strong class="bar" style="width: 24%;">24%</strong>
3	</div>

The only "fluid" piece of the example is adding the style="24%" to the <strong> statement. Any percentage would have correctly shown the proper graph. Simple and elegant.

There are many more complex examples of creating bar graphs from CSS at the Apples to Oranges blog, if you're feeling adventurous.

Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.

Glen Stansberry is a web developer and blogger who's struggled more times than he'd wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.