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

Inspired by Arley McBlain’s site and his clev­er 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 end­less.

Go on… Click & res­ize your win­dow.

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 rota­tions.

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

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