Use Transparent Pixels To Create A Web Page With Pizzazz

Recently, Chris Coyier (@chriscoyier) tweeted the following…

The site does indeed have some really nice utilization of jQuery. They also have a background that changes color as you click through their menu system. Here are a few screen shots:

I thought this was very neat, so I did some poking around to find out if I could replicate this effect. Here is a screenshot and a link to the demo of my final version.

Demo

Paint.NET

It turns out that most of the work is done using an image with transparent pixels. How cool. So I pulled out my Paint.NET and gave it a try. There are quite a few steps to reproduce this effect. Here is a video capturing the details.

HTML

The following is the complete HTML for the demo page:

<div id="wrapper">
    <div id="color-container">
        <p>Click a color swatch.</p>
        <a class="color" style="background-color: #18597f;"></a>
        <a class="color" style="background-color: #8a0651;"></a>
        <a class="color" style="background-color: #dc9d10;"></a>
        <a class="color" style="background-color: #1f8311;"></a>
        <a class="color" style="background-color: #8f3333;"></a>
        <a class="color" style="background-color: #1c6e7a;"></a>
    </div>
    <div id="img-container">
        <img src='think.png' />
    </div>
    <div id="footer">
        Learn how to do this at <a href="http://blog.bobcravens.com">Bob Cravens</a>
    </div>
</div>

The image that we created above is displayed using an HTML ‘img’ element. The rest of the markup is mostly defining the color swatches used to change the background color.

 CSS

The CSS used to style the markup above is shown next.

body
{
    background-color: #000;
    text-align: center;
    color: #fff;
    font-size: 20px;
}
a
{
    text-decoration: underline;
}
a:hover
{
    text-decoration: none;
}
a:visited
{
    color: #fff;
}
#wrapper
{
    width: 750px;
    margin: 10px auto;
}
#img-container
{
    background-color: #18597f;
}
#img-container img
{
    width: 100%;
}
#color-container
{
    margin: 10px;
}
.color
{
    width: 40px;
    height: 40px;
    display: inline-block;
    border: solid 1px #888;
    padding: 10px;
}
a.color:hover
{
    border: solid 1px #fff;
}

This just provides a bit of color and layout to the page. The background color of the ‘img-container’ element is what bleed through the transparent pixels in the image. This will be dynamically set with some jQuery.

jQuery

The jQuery for this demo is super simple.

$(".color").click(function(){
    var color = $(this).css('background-color');
    $("#img-container").animate( {backgroundColor: color}, 600 );
});

This little bit of jQuery hooks up the click event for each color swatch. When the event occurs, the background color of the swatch is used to set the background color of the image container. Thanks to Chris Coyier for suggesting the use of the jQuery color plugin to animate the transition between the colors.

Summary

I thought that designers of Fuel Brand Inc. did a very nice job with their page. In this post, I attempted to reproduce the effect. Simple but elegant.