CSS3 Transforms & @font-face Experiment.
Wednesday, March 31st, 2010
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.
46 Comments
if you showed me that 2 years ago, my head would have exploded! its spinning right now. Nice !!
I can easily see the shadows. I don’t understand the rotation of “ARE BORN”. Please elucidate.
Very nice! I dig the ampersand positioning behind the other text. As soon as IE gets on the freaking wagon, we’ll be in business!
@fjpoblam That’s also achieved via CSS3 transforms, basically rotating the words 90 degrees counter clock-wise like so:
–webkit-transform: rotate(-91deg);
–moz-transform: rotate(-91deg);
–o-transform: rotate(-91deg);
WOW…it’s amazing how powerful CSS has become…too bad IE has put up so many problems for it.
Nice job!
You showed me that 2 seconds ago and my head exploded.
Very cool. Stuff like this just makes me hate IE even more for not supporting it.
CSS3 Rocks!
@font-face is so very nice to use! this is a beautiful example of what can be done with aid from modern web browsers. thanks for showing it off!
That’s very nice. It’s a really liberating time to be a web designer, isn’t it? :)
–webkit-transform: rotate(-91deg);
–moz-transform: rotate(-91deg);
–o-transform: rotate(-91deg);
…to rotate something
But what about rendering in different browsers and even different os? Some browsers render fonts bolder… :(
Wait, you mean this doesn’t work in INTERNET EXPLORER?!? How is that possible!?
Apparently all browsers are NOT born free and equal.
I love it .… design that works for web at last integration between web and design — yay
FYI, 90 degree rotation is available using IE filters, so one could create a similar version of this poster for IE if one were so inclined.
Box shadows are also available in IE but they’re hideous and a pain to work with.
Can’t believe you are using CSS3 for this Declaration, it looks so much like done by graphic design tools.
I have quoted your design with Twitter. Hope you permit.
So where’s the interaction? Rollover states, etc?
@Benxamin This example is just meant to show what we can do right now with CSS3 Transform, Border-Radius, @font-face etc… Interactions with CSS3 can be a whole other blog post.
I think this is really cool! I checked. I’m running Firefox 3.6 and Chrome 5.something. So I’m good to go, let’s do it! Isn’t this what we’ve all been waiting for?
That’s sick! Too bad about IE though, I hate IE but at my workplace we have to support it :(
Indeed my head would’ve exploded as well. That’s awesome! And yes…who cares about IE anyways? Show them something plain.
Head … is … exploding…
http://shanerichphoto.com/wp-content/uploads/2010/03/jan11-jessyel-sm-srp.jpg
Great job!
css is most powerful text formating language it provide the interacted face of the web pages and with the help and code which you provide is help me a lot thanks for that
It is a poster. WTF
Absolutely gorgeous! I thought you’d like to know that it semi-works on iPhone’s Safari. the “&” places oddly/is the wrong typeface, the pointing hands around “equal” show up as rectangles, and “are born” is a bit lower on the F, but a lot closer than what shows up on IE!
I agree with Amber: let’s have fun with CSS3, with or without IE. Super example, Alex!
This is a fantastic example of the possibilities with CSS3… its just a shame that it doesnt have full cross-browser support yet! Internet Explorer has been crashing on my PC since early last year, so the chances of it supporting CSS3 commands are non-existant.
Top Marks for an awesome CSS3 example!!!
Let’s not forget that Apple is attempting to own the patent on CSS transform (and CSS animation):
http://www.position-absolute.com/news/apple-patents-css-transform-and-animation/
it is a smart idea for begineers like me
This is great!
Unfortunately, my client base is IE7 so this would be absolutely useless to me.
Nice… the heck with IE.
“IE can suck it.“
Fuck yea!
Yah really nice technique of CSS3.I have one suggestion about your present layout.The text is not displaying clearley..it is hard to read the text..(grey in black)..
You have inspired me sir, thank you very much.
Try to go to that website using IE.
It’ll surprise you.
(I’m using IE8.)
I’ve read a lot about IE9 being css3 standards compliant (but not holding my breathe) and even if it was some of my clients are still fussing about sites in IE6!
Its great to know what we can look forward to. But, with 30%+ of visitors not being able to render this design properly, does it make sense to use these techniques rather than use a background image replacement?
@Rob
We are what you call early adopters who are willing to live with that 30% not seeing everything correct. At some point all browsers will support these features and we won’t have any issues, but without early adopters nothing changes.
Super, but I’d say SVG is more practical for that. Performance wise.
ie, can indeed, suck it.
great work. :)
I’m not seeing a link to an HTML demo page of that poster you made. Is there one? Knowing me I’ll find it right after I submit this comment.
Yep, found it. Duh. Very cool.
Why don’t the hands come thru in opera 10?
Hmm.…Im viewing it in IE8 and firefox now and they both look almost the same. Has IE8 already added support for this in the past several months?
My bad, was viewing an IMAGE, not the actual CSS layout. So sorry if I caused confusion.
Not sure what I like best…the css example itself or the line below it that says IE can suck it…lol. Looks great…excited to see what people will come up with when we dig into this a little more.
It works in IE9 Preview :)
Got something on your mind?