On Saturday, Google Politics & Elections posted an interesting infographic about search trends over the last week related to the four remaining GOP Presidential candidates.

Here’s the infographic:

From Google Politics & Elections

Overall, pretty nice. It makes good use of color, highlights the important details, and avoids loading the graphic with needless frills, pointless content, etc.

The one problem, though, is that it’s simply an image. While it’s nice to look at, it’s kind of boring.

Some CSS3 Up In Here

So as I was internally complaining about how boring the image qua image is, it occurred to me that some simple CSS3 flourishes could really make this nice.

Check Out the Example (note: you’ll need a more recent version of Webkit or Firefox for this to work…)

In this experiment, I’m using a few things I’ve not messed with much in the past: keyframes and the flex-box model.

Flex-Box Model

If you’re a web designer, you’ve no doubt spent endless hours trying to coax HTML and CSS to do simple things like expand “columns” a particular percentage in width and height. This is a horrible nightmare to endure, and it usually ends in a lot of hacks and more cursing, just to get content to line up correctly.

Enter the flex-box model. WIth the flex-box model, you can create dynamic, “flexible” areas of content that not only “flex” to fill space based on your precise specification, but can also have intrinsic relationships to other elements.

In my example, I used the flex-box model to handle laying out the “name” and “percentage” content in each candidate’s “bar.” Here’s the HTML:

<div class="bar">
    <img src... />
    <div class="name">Newt Gingrich</div>
    <div class="total">+688%</div>
</div>

Very simple. In fact, the flex-box doesn’t really require much in the way of mark-up…you can easily use the basic structures that you would normally implement.

Since there’s nothing special about the markup, the real magic happens in CSS:

// flex box styles for "bar" container
.bar {
    display: -webkit-box;
    display: -moz-box;
}
// flex box styles for "name" content
.name {
    -webkit-box-flex: 1;
    -moz-box-flex:1;
}

That’s it? Yep, that’s it. When we add “display:box;” to the parent element, we are telling it that it should behave according to the flex-box model. By default, this will lay out all of its children along the horizontal axis. Notice we didn’t have to float anything. That is awesome.

And for the “name” content, we’ve added the “box-flex” attribute and given it a value of “1″. This tells the individual item that not only should it be laid out horizontally with its siblings, but that moreover it should take up additional space. Since we’ve applied “box-flex” to only 1 element, this will take up any remaining space in the parent–if other siblings had “box-flex” as well, the value of “1″ would change in relation to the box-flex of the other siblings.

In essence, what this does it to give us a really nice horizontal layout of 3 items (the image, the “name” and the “percentage”) without needing floats, positioning, or any other nonsense. Since “name” is the only content with “box-flex” assigned, it will greedily gobble up the remaining space left over in the parent, resulting in a nice right-alignment of the variable-width “percentage” content. Did I mention no floats? Hooray.

Keyframe Animations

Besides the super-sweet flex-box utilization, this example also uses the super-fancy keyframe animation specification. What are keyframes? Think about when you used to create animations in Flash, and you created keyframes at specified points along a timeline where you wanted specific events to occur. Keyframes in CSS3 animations are very similar.

In this example, I wanted to animate the background of the main content area (the gradients behind each candidate). WIth the keyframe specification, this is stupid simple. Here’s some CSS:

@-webkit-keyframes expanding {
    0%   { width:0;}
    100% { width:100%;}
}
.bar {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: expanding;
    -webkit-animation-duration: .25s;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-fill-mode: forwards;
}

This is a bit more involved than the flex-box model, so let’s take a look piece by piece.

The first chunk of code is where we define the keyframe to be used in the animation. You use the @-webkit-keyframes directive, and then provide a name (“expanding”, in this example). Then, within the object, you simply define the style rules that should be applied at each “frame” of the animation. In this example, we have a very simple definition. At the start of the animation (0%), the width of the element will be 0; at the end (100%) the width will be 100%. The cool part is that the browser takes care of the animation in between each keyframe, and this is why we get the horizontal bar “expansion” animation in this example.

The next chunk of code is how we 1.) apply the keyframe specification to the particular element (“animation-name”) and 2.) additionally configure how the animation will behave, such as the duration, why kind of timing function should be applied, how many times the animation should run, etc.

Pretty cool stuff.

Some Caveats

Unfortunately, support in browsers for some of the cooler stuff in this demo is currently pretty limited. To the best of my knowledge, both the flex-box and keyframe specification are only implemented in Webkit and Firefox.

Moreover, I didn’t bother with a graceful degradation to other browsers. So if you open this example in IE, Opera, etc., you’re out of luck. If you feel like implementing a graceful degradation, feel free to grab the source from GitHub.

Wrapping Up

While a lot of these features are still not yet ready for primetime, I think this example shows ways in which these new aspects of CSS3 can help to improve the experience of the internet. Does this application of CSS3 radically improve the infographic? Probably not. However, it does show the promise of how simple interactivity can be added without much pain at all.

Step 1: Install Ruby

To get SASS setup, you’ll first need to install Ruby and Ruby Gems (SASS is bundled with something called “Compass”, and Compass is a “Gem” that can be added into Ruby). You can go the painful route and install Ruby and then add Gems into it. However, if you’re stupid about these things, you can do what I did and just grab the Ruby 1.92 installer–it comes pre-built with Gems already configured.

Get the Ruby 1.92 Installer

When prompted, choose “”Add Ruby executables to you PATH”

I installed to the default directory on Windows (C:\Ruby192\)

Step 2: Setup Compass

Now that Ruby is installed, the next step is to get Compass (e.g., SASS) setup. This step actually took me the longest, simply because I’m stupid about command-line stuff. So here’s a play-by-play of what to do (this is for Windows…I assume Mac is similar), just in case you suffer from a similar level of stupidity:

• Open a new Command Shell (Start -> Run -> type “cmd”)
• Navigate to your Ruby installation directory (cd/ruby192)
• Type “gem install compass –pre” – if it works, you should see a bunch of text appear about things being installed, configured, and what not.
• BTW, we’re using “–pre” to get a beta version (0.11) of Compass. This is necessary, as the latest non-beta will break when compiling.

Step 3: Done!

You’re done. The next step is to actually start customizing some sassy stylesheets!

If you’re a web designer, there are times (I’m sure) when you’ve wanted to have a transparent background for something.  After all, Web 2.0 is all about transparency and rounded corners, right?

In CSS2, there were generally two ways to go about this.  The easiest was to use the “opacity” property.  Sure, it didn’t validate, and you had to use an alternate syntax for IE7, but still…super easy.

.opacity {opacity:.7;}

The major downside (besides lack of support) of this approach is that the opacity is applied to the entire element. So, if you have a div with a bunch of text in it, any opacity setting applied to it will rollup to whatever content is contained within the element to which the opacity is applied.  Especially with text, this can make for some washed-out-looking content:

In this example, the heading has a simple color of “white”, yet it looks very washed out.  This is simply because it inherits the opacity of its parent element.

So if the opacity of the content is important, the next best option is to use a .png as a background image.  With this approach, we get all the benefits of background-opacity, while still preserving the natural opacity of any content:

.opacity-alt {background:url(images/smoke.png) repeat;}

Of course, the major drawback to this approach is the extra overhead of having to create the image.  While not a big deal for one or two elements, if at some point in the future you want to change the opacity slightly, you’ll have to open up Photoshop, rework the background image, and, well, it’s a pain.

Something New with CSS3

With CSS3, we come into a whole new collection of wonderful properties that help to get around some of these less than ideal issues with opacity.  The most significant one is the expansion of the rgb() property to include a fourth “channel”: alpha.  The syntax is almost exactly similar to the old rgb(), but simply adds an additional specification.  Here’s the two side-by-side:

.opacity {background-color:rgb(0,0,0);}
.opacity {background-color:rgba(0,0,0,.6)}

The “alpha” specification allows us to change the opacity of the color of the element, not the element itself.  What these means, in a nutshell, is that the old problem of washed out text is completely wiped away.  Here’s the finished example with rgba() applied:

Now, of course, since Microsoft hates people, this approach won’t do you any good in IE 8 or below.  However, if you’re running a real browser like Firefox 3.6, Chrome 4, or even Safari 4, you’re golden.

So that brings up a good question: since IE sucks and doesn’t support this, what are my options for cross-browser support?  Well, fortunately, since IE doesn’t have any idea about rgba(), you can simply use the standard approaches if targeting IE is important to you (remember, per the specs, unrecognized properties will be ignored).  So in our final example, we can modify it slightly to have full cross-browser support by either:

Defaulting to solid color (will take care of IE and other browsers that don’t support rgba():

background-color:#000;
background-color:rgba(0,0,0,.6);

Using a background image (same results as above):

background:transparent url(images/smoke.png);
background:rgba(0,0,0,.6) none;

Or just target IE:

background-color:#000;
filter: alpha(opacity = 60);
background-color:rgba(0,0,0,.6);

As you can see, there’s some cool stuff coming of age in CSS3. Sure, many browsers are still WAY behind (not to mention the problem of user adoption…), but this is something web designers have had to deal with from day one, right?  Nevertheless, these changes are coming eventually, so I hope this was an interesting introduction to some of what is in store for the future of web design.