A little experiment I built: a word clock using CSS3 transforms and a little Javascript to run the actual clock. Useful? Maybe not. Fun? Definitely.

The code behind it is fairly straight-forward. Let’s take a peak:

CSS

The first thing we need to do is set a base set of styles for each arm of the clock.

li{ 
    position: absolute;  width: 150px;
    text-transform: lowercase; 
    -webkit-transform-origin: 0 center;
    -moz-transform-origin: 0 center;
    color: rgba(255,255,255,.1);
    position: absolute; left: 0; top: 0;
}

This is basically saying for each arm, position it at the top of the clock body, and then rotate around left side, so that we have uniform rotations.

Then, for each arm, we set the actual rotation. Here is the HTML for the “hour” arms:

<ol id="hours">
        <li><span>One</span></li>
        <li><span>Two</span></li>
        <li><span>Three</span></li>
        <li><span>Four</span></li>
        <li><span>Five</span></li>
        <li><span>Six</span></li>
        <li><span>Seven</span></li>
        <li><span>Eight</span></li>
        <li><span>Nine</span></li>
        <li><span>Ten</span></li>
        <li><span>Eleven</span></li>
        <li><span>Twelve</span></li>
</ol>

And, the corresponding CSS:

#hours > li{ padding: 0 0 0 80px; }
#hours > li:nth-child(1){ -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); }
#hours > li:nth-child(2){ -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); }
#hours > li:nth-child(3){ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
#hours > li:nth-child(4){ -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); }
#hours > li:nth-child(5){ -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); }
#hours > li:nth-child(6){ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); }
#hours > li:nth-child(7){ -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); }
#hours > li:nth-child(8){ -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); }
#hours > li:nth-child(9){ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
#hours > li:nth-child(10){ -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); }
#hours > li:nth-child(11){ -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); }
#hours > li:nth-child(12){ -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); }

The first line sets the padding, so that each hour arm begins 80px from the center. The rest set up the individual rotations for each arm, at 30 degrees each. The minute and second hands have more padding, and rotate 6 degrees for each arm. The rest of the CSS in the file is used to style the clock, and to show/hide the extra text.

Javascript

All we need to do for the javascript is create a function that sets class=“active” on each arm of the current time. So, at 12:45 and 20 seconds, the 12 hour arm, the 45 minute arm, and the 20 second arm have class=“active”, and the rest are normal. Then we simply set an interval to run every second.

$(function(){
        var hours = $("#hours"), minutes = $("#minutes"), seconds = $("#seconds");
        
        //these are default grabs so that the first time it runs, it doesn't throw an error
        //after that, we use them to cache the current active arm for each group, so that we
        //don't have to waste time searching
        var cHour = $("html"), cMinute = $("html"), cSecond = $("html");
        
        var setCurrentTime = function(){
            //establish what the time is
            var currentTime = new Date();
            var hour = currentTime.getHours() - 1;
            if(hour == -1){ hour = 11; }
            var minute = currentTime.getMinutes() - 1;
            if(minute == -1){ minute = 59; }
            var second = currentTime.getSeconds() - 1;
            if(second == -1){ second = 59; }
            var ampm = "am";
            if(hour > 11){
                ampm = "pm";
                hour = hour-12;
            }
            if(hour == 11){
                ampm = "pm";
            }
            
            //remove the active class, and add it to the new time
            cHour.removeClass("active");
            cHour = hours.children(":eq(" + hour + ")").addClass("active");
            
            cMinute.removeClass("active");
            cMinute = minutes.children(":eq(" + minute + ")").addClass("active");
            
            cSecond.removeClass("active");
            cSecond = seconds.children(":eq(" + second + ")").addClass("active");
            
            $("body").removeClass("am").removeClass("pm").addClass(ampm);
        
        };
        //set the interval to run each second
        setInterval(setCurrentTime,1000);
    
    });

It’s a fun little experiment that doesn’t have any real value on it’s own, but it’s a good exercise and as good of an excuse as any to play around with CSS transforms.

The full CSS file can be found here, and the javascript can be found here

It’s built on the mostly awesome but sometimes infuriating ExpressionEngine, and features some stuff that I’m fairly proud of:

• Brand new design, by yours truly
• Javascript/CSS - based fluid layout (check out the home page for the best example).
• The portfolio section features some custom javascript if you’re in a decent browser. Safari, especially, will give you a treat.
• Some cool stuff like Typekit and Modernizr (and of course jQuery and jQuery UI)
• Some fun HTML5 and CSS3 stuff throughout

I’d like to thank Craig Minch for periodically guiding me in the right direction, and my wife Emily for being so awesome and being my Official Design Consultant on this project.

I’ll most likely be posting about different aspects of the site; but please feel free to drop a comment if you’d like to know more about anything in particular.

Take a look around, and enjoy(:

None of this information is new at all, but it's very nice having it all in one place, and you can just have one bookmark for IE6 fixes instead of an entire folder full of them(:

(via Chris Heilmann)

Aside from having a cool-looking website, Vanadium looks like it will ease all of your validation woes, and make it easy and fun (you know, if you're in to that sort of thing) again. Worth checking out / bookmarking / using.

Aside from containing great information, it really is a pleasure to look at (check out those font stacks!). Two chapters are available right now: Detecting HTML5 Features, which is really an in-depth explanation of how Modernizr works, and Let’s Call It A Draw(ing Surface), which contains some good stuff on the canvas element.

This is the sort of thing that makes me want to work on my redesign(:

A large bonus is their support for a whole slew of CSS 3 features. Their developers page for 3.5 serves as a great resource for checking the -moz specific CSS features, as well as a nice refresher on some of the more complicated CSS 3 features in general. This plus Safari 4's ongoing CSS 3 awesomeness opens plenty of doors for doing some cool stuff. With the two main (good) browsers supporting so many CSS 3 features, plus Firefox's astronomical update rate, the time to start using this stuff is now.

We will publish articles relating to HTML5 and it’s semantics and how to use them, here and now. We will also be inviting questions, in the form of ‘Ask the doctor’ to help answer people’s queries and questions. Answers will be posted in the form of articles for all to learn from.

There are plenty of posts around describing all of the new elements, or discussing semantics of the new elements, but this site is nice in that it actually gives use-cases for each of them, so that you can learn the best way to use them on your next site.

Bookmark this site, add it to your feed reader, and start HTML5-ing.

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good 'ol play on words. It's time to show off your .

It's good fun, and a good exercise. Enjoy naked time while it lasts!

This was a Sprokets project, meaning that I was responsible for the HTML/CSS/Javascript, and was blessed to work with the extremely talented likes of Vince Frantz, John-Paul Walton, Brad Colbow, Mike Barone, and Matt Grosse. It was a pleasure, as always.

Congrats to the Sprokets crew, and good job everyone.

So what are you waiting for? Go make a list!