neography by

Alex Girón

A designer and entrepreneur living in Old Town Alexandria San Francisco. Cofounder of nclud and canvas. Founder of worthy. Formerly Design Lead at twitter.

Design is Resize.

Thursday, March 29th, 2012

A fun little exper­i­ment with Media Quer­ies, Typo­graphy & CSS3 Transitions.

Inspired by Arley McBlain’s site and his clever use of CSS Media Quer­ies, I set out to explore the pos­ib­ilites using this tech­nique. In my first try I wanted to use simple CSS trans­itions to cre­ate a com­pel­ling piece. The res­ult is a good one, but the pos­sib­ilites of what can be done are endless.

Go on… Click & res­ize your window.

Our Solar System

Our Solar System

Our Solar System

Typekit is used for all the dif­fer­ent typefaces, a bit of CSS3 Trans­forms, back­ground trans­itions and bam. Done.

Simple Code

Here’s an example of how I’m mak­ing 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 win­dow reaches a cer­tain size, in this case 580px it hides one word, dis­plays the next one and it applies font-size changes, back­ground changes and rotations.

This exper­i­ment works best when viewed in Safari, but it should work just fine in other browsers.

So there it is, a simple exper­i­ment, but I’m excited at the possibilites.