The new site design reflects that concept by structuring each page as an unordered list grouping each content layer as a list item. Just as the strata of the earth change color as you descend, I wanted to let content layers darken in the content stack to reflect a hierarchy of information. I also wanted to use color to define the various sections of the site not only to create visual distinction that can inform navigation and location recognition, but also to simply pacify my fickle design aesthetic. Varying the color of the strata and the color of each page or section of a website makes for a lot of color mixing.

To pull this off, I had to find a solution that was practical. I couldn’t see myself manually defining the color for each list item in a page. I am too busy (read as lazy) to make a lasting development and maintenance commitment. Doing it manually would certainly keep me from publishing as frequently on my site.

RGBa to the Rescue

My idea was made ever so simple through the use of RGBa, an elegant way to define color in CSS with an alpha channel making transparency easy. RGBa has four values: one each to define red, green, and blue, and one for alpha transparency. Here’s a simple CSS code example:

.myelement { background: rgba(255,255,255,0.25); } 

In this example, the background color is being set to black at 25% opacity. The cool thing about this approach is that you can stack color blocks to mix hues, add white to a color to create a tint, or add black to create a shade. To create the shades in my strata design concept, all I had to do was set a base background color of a page, then set a transparent black background on of each of the strata to crate shades getting ever darker as you get further down the page. I called my content list “stratosphere”, and set the class “strata” on each list item (note: the list item class was necessary to prevent the script we’ll see shortly from applying colors to any list I might drop in a page.). The CSS looks like this:

	.home #stratosphere { background:#4681bd; }
	.home #stratosphere li.strata { background: rgba(255,255,255,0.25); }

That solves the color mixing problem, but it doesn’t solve the challenge of automatically setting the background color on each of the strata, and varying the opacity of the black overlay to create the color shift effect as you scroll down a page. To do that, I had to use some simple jQuery. In order to get a smooth transition between the shades of the strata, I had to first figure out how many layers are in the page, then divide 1 by that number to get the increment of opacity change (note: with RGBa, 1 is 100% opaque, hence dividing 1 by the number of layers). So if there were five layers in a page the equation would be: 1 ⁄5 = 0.2. That means we’d increase the amount of black in each layer by 20%. Here’s that simple math expressed in JavaScript:

	// Draw Layers
	var numLayers = $('#stratosphere .layer').size();
	var alpha = 0;
	var alphaIncrement = (1/numLayers);

Once you know the increment of change, all you have to do is loop through the list items to dynamically set the RGBa value bumping up opacity as you go.

	$('#stratosphere .layer').each(function(){
		$(this).css("background-color","rgba(0,0,0,"+alpha+")");
		alpha = (alpha+alphaIncrement);
	});

Now I can simply change the background color of the stratosphere list, and the color mixing to create the various layer shades will happen automatically.

You can also use RGBa to make buttons and navigation that will work with any color palette, as I’ve done on this site as well. Semi-transparent buttons inherit the color on which they sit, as does a semi-transparent navigation bar. The result is a site composed of flexible components that adapt to any color situation. The color mixing possibilities with RGBa are endless.

Learn More About RGBa

• 24Ways.org: Working With RGBA Colour
• CSS Tricks: RGBa Browser Support
• W3C: CSS3 Color

I’m doing presentations on HTML5 and CSS3, which will cover a lot of ideas, technologies, and resources. Below are my slides, the exercise files, and the resources mentioned in the presentation.

The Files

• exercise files
• slide decks

The Resources

• HTML5 and Canvas Experiment
• Typekit
• Lost Worlds Fairs
• HTML5 Doctor
• HTML5 Form Support Test Tool
• Pocket Full of HTML5
• HTML5 Test Tool
• Remy Sharp’s IE Fix Script
• CSS3 Support Grid
• CSS3 Gradient Generation Tool
• IE9 HTML5, CSS3, and JavaScript support
• Never Mind the Bullets
• Beauty of the Web
• Going Nuts With CSS Transitions
• Font Squirrel
• Things We Left on the Moon
• Book: InterACT With Web Standards
• InterACT Curriculum Project

If you are unfamiliar with the concept of a framework, you can think of it as a base structure of prefabricated code utilities that function both as a toolbox and a skeletal structure for a project. Many great frameworks have been created for both client-side (Prototype, Dojo, JQuery) and server-side development (Ruby on Rails, CakePHP, Code Igniter), and have revolutionized the way web applications are built. The goal of a framework is to allow you to concentrate more on the project concept and mission rather than micro-focusing on the details of the inner pinnings of the code.

That’s exactly what Blueprint delivers for CSS design. It brings together the solutions from many recent articles on grid-based layout, page rhythm, print style sheets, and typography and packages them neatly into a practical system with a low learning curve. By default, Blueprint creates a flexible 14 column grid to guide your layout. Using very simple class combinations, you can define the size of a div to span any number of horizontal units in the grid. For example, a div like the following will span 5 units of the grid and will sit on the right side of the layout.

[source language='css']

[/source]

Blueprint also creates flowlines that define the type baseline, and create a uniform rhythm to the page. Background images can be turned on to draw out the grid columns and flowlines as guides while refining your layout.

Although still undergoing refinements to create consistent cross-browser support, Blueprint is in a relatively stable state for project development. If you’re curious about the story behind the project, check out Khoi Vinh’s recent blog post on the subject, which includes an interview with Olav Bjorkoy, Blueprint’s creator.