8.08.2011

Transforms @font-face Expography

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.

via neography.com

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 t ...» more Dogmeat