Derek Newsom

While reading the fantastic book, “CSS3 for Web Designers" I found a fun little CSS3 code snippet that will rotate everything on your screen by 180 degrees upon hovering.

This is completely useless. It’s just fun.

The code highlights CSS3 transitions and transformations.

First you need to set up all DOM elements with a transition that specifies any CSS attribute change will trigger a 1 second transition.

* { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; }

Then a CSS hover specifier implements the CSS transform that rotates the element by 180 degrees.

*:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

This simple example gives a small glimpse at the power of CSS3.

Now watch the world go round!

** NOTE: It takes a bunch of vendor prefixes in the CSS to get this code to work on as many browsers as possible.

The Analytiks iOS app summarizes Google Analytics data.

It’s turns your stats into refreshable infographics that you can check on your phone.

The below screen was pulled directly from my phone.

It’s UI is elegant and simple. It won me over immediately.

Great work by the team at Analytiks.

If I think for a second, “It’s going to be easy”. I take it back! I take it far away!

The project was supposed to be simple. Pre-made Wordpress template. Photo shop comp with all the content.

Simple right?

Wrong!

I made the terrible mistake of glossing over the font styling.

The sub-header isn’t Helvetica it’s <place any font here>.

The side bar header is heavy not bold, with 1 pixel letter spacing, not like the 0px header spacing of the main content headers.

The main text font family needs to be X but bold text needs to be font family Y. Unless the text is a post header than its obviously Z.

And I was given a postscript font file that wasn’t only incompatible with the web but had a last modified date on it circa early 90’s.

etc. etc. etc.