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.
As I get ready to kick off a couple of personal web projects, I’ve been reading Enric Jardí‘s book, Twenty two tips on typography*, a primer on what works and what doesn’t in typography.
Although Jardí mainly works on type for print, most of the rules also apply to type for the web. In this article I’m going to highlight five of his tips which are useful in deciding upon the right type for a project.
The latest alpha release of Firefox 3.6 (3.6a1) contains some new rules for providing backgrounds to elements: multiple background images, background-size, and an implementation of the Webkit gradient proposal (modified from the original — more on that later).
I’ve put together a very rough demo of what you can do with these new rules; you’ll require a recent build of Firefox 3.6 or Webkit to view it. Try resizing the window to different dimensions, and see how it changes.
Here’s an explanation of how I did it:
Firefox 3.6 has become the latest browser to support the CSS3 background-size property (although the first to do so according to the latest W3C spec.).
Using it is pretty simple:
div {
background-image: url('image.png');
-moz-background-size: 80%;
}
This, along with multiple background-images, is going to go a long way towards cleaning up mark-up and prettifying the web.