Alex Girón

Designer & Founder. Building Join Team. Creative Director at Eventbrite, Formerly Design Lead at twitter. Founder at nvite, canvas, nclud, worthy.

CSS3 Trans­forms & @font-face Exper­i­ment.

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 trac­tion.

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 design­er for the web. It’s a lot easi­er these days to exper­i­ment with dif­fer­ent typefaces, lay­outs and tech­niques pre­vi­ously not avail­able.

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 new­er CSS3 fea­tures to put it togeth­er. Below are a few samples of the code so you can get an idea:


@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');


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

Text-Shad­ows & Box Shad­ows

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 fea­tures.

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.