I was admiring the layout of a front page splash of a newspaper supplement yesterday, and realised that with (some) modern browsers we can replicate the effect using CSS alone. I’ve knocked together a quick demo using the transform
property which is available in Firefox 3.5 and Safari 4.
The best thing about it is that it uses only a single block-level element, so nicely degrades to a heading only.
First I applied the background image to the element, then I split the heading text into four using some non-semantic inline elements, then applied different values to transform: rotate
for each of those:
#part1 { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); } #part2 { -moz-transform: rotate(-2.5deg); -webkit-transform: rotate(-2.5deg); }
You can view the source to see all of the styles I’ve used.
It’s a really simple technique, took me no more than ten minutes to put together, but a nice effect, I think, and something I’m sure we’ll be seeing a lot more of.
Very nice indeed :)
Ana [August 24th, 2009, 11:25]