Print-style headlines with CSS 3

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.