This is the first of what I hope are number of experiments I plan on working on over the next few months, all in an effort to get acquainted with some of the new CSS3 features out in the wild that seem to be gaining some traction.
The last few months have been pretty exciting, with all the talk about new CSS3 features and how browsers are adding support for them, it’s a great time to be a designer for the web. It’s a lot easier these days to experiment with different typefaces, layouts and techniques previously not available.
Take a look at the image below:
No, it’s not a poster. It’s a web page completely designed using basic CSS and new CSS3 techniques. Pretty impressive right?
How’s it done?
Pretty easy actually, I used basic CSS positioning and some of the newer CSS3 features 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');
}
Transforms
-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 Universal Declaration of Human Rights.
Works in these browsers
- Firefox 3.6
- Safari 4
- Chrome 5
- Opera 10
IE can suck it.
So there it is. Nothing out of this world, however I think it shows the potential of CSS specifically the potential 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.
