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.

CSS3 Trans­forms & @font-face Experiment.

Wednesday, March 31st, 2010

This is the first of what I hope are num­ber of exper­i­ments I plan on work­ing on over the next few months, all in an effort to get acquain­ted with some of the new CSS3 fea­tures out in the wild that seem to be gain­ing some traction.

The last few months have been pretty excit­ing, with all the talk about new CSS3 fea­tures and how browsers are adding sup­port for them, it’s a great time to be a designer for the web. It’s a lot easier these days to exper­i­ment with dif­fer­ent typefaces, lay­outs and tech­niques pre­vi­ously not available.

Take a look at the image below:

All Humans

No, it’s not a poster. It’s a web page com­pletely designed using basic CSS and new CSS3 tech­niques. Pretty impress­ive right?

How’s it done?

Pretty easy actu­ally, I used basic CSS pos­i­tion­ing and some of the newer CSS3 fea­tures to put it together. Below are a few samples of the code so you can get an idea:

@font-face

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive.eot');
	src: local('ChunkFive'),local('ChunkFive'),
	    url('Chunkfive.woff') format('woff'),
	    url('Chunkfive.ttf') format('truetype'),
	    url('Chunkfive.svg#ChunkFive') format('svg');
}

Trans­forms

-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);

Text-Shadows & Box Shadows

text-shadow: 2px 8px #b5c1b8, -1px -1px #fff;
box-shadow: 4px 6px #b5c1b8;

The font used is called Chunk, a nice bold slab serif. The text is an excerpt from the Uni­ver­sal Declar­a­tion of Human Rights.

Works in these browsers

  • Fire­fox 3.6
  • Safari 4
  • Chrome 5
  • Opera 10

IE can suck it.

So there it is. Noth­ing out of this world, how­ever I think it shows the poten­tial of CSS spe­cific­ally the poten­tial in using new CSS3 features.

In the words of Matt Brett:

if you showed me that 10 years ago, my head would have exploded!

Indeed. We’ve come a long way.