CSS tartan

I’ve been playing with the idea of transparency in CSS and come up with CSS tartan. I know it works on Mozilla 1.7 and IE 6.0. The cross-browserness of the technique was effectively taken from Quirksmode. Some of the widths look a little odd in IE due, I think, to the box model incompatibility problem. There is no additional styling on this text, so it may not look as elegant as it could. There is also an example without text.

The tartan is (apparently) a Tipperary tartan and is copied from this image from the no-doubt scholarly Tartanweb site. I believe my family hails from that part of Ireland. Different tartans would need different sized divs and different colours, though I doubt you’d need that big a palette.

There are twelve separate divs to produce this effect: six for the horizontal lines and six for the vertical lines. All the colours are primary simple css colours: red, blue, green, orange, and black.

I don’t know whether this could be of any use: I for one don’t intend to set up a Scottish (or Irish) themed website. However, I was playing with the idea of css transparency and fancied a go. I shall certainly try to use it a bit more often to see if I can break away a little from the blockiness I usually fall into.