neography by

Alex Girón

A designer living in Old Town Alexandria San Francisco. Co-founder of nvite, canvas and nclud. Founder of worthy. Formerly Design Lead at twitter.

Design is Resize.

Thursday, March 29th, 2012

A fun little experiment with Media Queries, Typography & CSS3 Transitions.

Inspired by Arley McBlain‘s site and his clever use of CSS Media Queries, I set out to explore the posibilites using this technique. In my first try I wanted to use simple CSS transitions to create a compelling piece. The result is a good one, but the possibilites of what can be done are endless.

Go on… Click & resize your window.

Our Solar System

Our Solar System

Our Solar System

Typekit is used for all the different typefaces, a bit of CSS3 Transforms, background transitions and bam. Done.

Simple Code

Here’s an example of how I’m making the switch from one word to the next:

@media screen and (min-width:580px) {
li.t2{color: rgba(0, 0, 0, 0);
-webkit-transform: rotateX(0deg)
}}
@media screen and (min-width:580px) {
li.t3{color: rgba(0, 0, 0, 1);
-webkit-transform: rotateX(0deg);
font-size:140%;
}
body {background: #8fc447;}
}

Pretty basic, when the browser window reaches a certain size, in this case 580px it hides one word, displays the next one and it applies font-size changes, background changes and rotations.

This experiment works best when viewed in Safari, but it should work just fine in other browsers.

So there it is, a simple experiment, but I’m excited at the possibilites.