You are here: Home / Dog Blog / Archives

Elastic Zen Garden

Sunday 7 December, 2003 ( 4:38PM GMT)

Screenshot of The Elastic Lawn design in the CSS Zen Garden websiteThe Elastic Lawn is a new addition to the great CSS Zen Garden designed by yours truly.

The design is built using ems as units rather than pixels to define not only the size of text, but also the dimensions of the layout. The result is an elastic design that will expand and contract depending on the user's text-size setting.

This 'elastic' approach is one that I have used for some time. The argument that text-sizes should be relative (ie. ems rather than pixels) for increased accessibility can be said to extend to the dimensions of the area in which the text is contained. It does kind of make sense to me that there are benefits to layouts that grow proportionally with the text - I mean, if a visually impaired user finds it easier to view larger text, won't they also find that text more manageable if the space between content blocks is also larger? It also avoids increased text sizes pushing out and possibly breaking an intended design (try enlarging the text in some of the other Zen Garden designs for example). The elastic issue is one I will go into in more detail at a later date.

The Elastic Lawn is meant to be more of an interesting demonstration of a concept rather than an accessibility/usability demonstration however. This isn't my usual approach to design - some things such as graphical sub-headings, foregrounds that could have higher-contrasting backgrounds and text on patterned backgrounds can decrease usability but the point of the Zen Garden is to demonstrate the graphical design capabilities of CSS. This particular design hopefully demonstrates that ems are a viable option, even for elaborate designs.

You can find out a bit more about how certain aspects of the design work by taking a look at the annotated CSS file.


Comment 1

Nice. I like the animated links too.

So said John Pepper on Monday 8 December, 2003 at 10:19AM GMT.

Comment 2

Dude...sweet concept! Loved it!

So said [Anon] on Monday 8 December, 2003 at 3:11PM GMT.

Comment 3

We already made one of our websites fully scalable: .

Yet I know that users with 800x600px screen-size have to scroll horizontally in case of increasing text-sizes, in Germany nearly 80% are surfing with a sceen-resolution of 1024x768 or higher. On this basis our decision was an easy one.

So said Cornelia Lange on Tuesday 9 December, 2003 at 6:29AM GMT.

Comment 4 did you achieve those scrolling dotted underline styles in the hover state...? What the... Gimme!

So said brandon on Friday 9 January, 2004 at 9:23PM GMT.

Comment 5

Hehe. Okay...

Quite easy really. There's a static dotted-undeline image that is the background of all links. When hovered over, the background image simply switches to an animated GIF.


So said Patrick on Friday 9 January, 2004 at 9:30PM GMT.

Comment 6


I have used an elastic design on my website as well (I call it 'zoomable') and I included a small javascript that changes to font sizes, in effect creating a 'zoom-in/zoom-out' effect. You can see it here:

I know the design is probably quite wooden since I just got rid of all the tables of the original design which is distributed with the CMS (I use AWF) but if you would not mind a comment, I would greatly appreciate it.


So said Ivaylo on Friday 20 February, 2004 at 7:20AM GMT.

Comment 7


So said Dino on Monday 13 June, 2005 at 11:48AM GMT.

Comment 8

It's very cool!

CSS Zen Garden is great. It was actually inspired by CSSZenGarden when I wrote Elxion CMS Designer's front end. When I saw what is possible with CSS I decided to make CMS for CSS designers...


So said on Saturday 23 July, 2005 at 10:26PM GMT.

Comment 9

All this CSS Zen* stuff is so cool that I should maybe rename Elixon CMS to CSSZenCMS ? :-)


So said on Saturday 23 July, 2005 at 10:29PM GMT.

Comment 10

I'm very excited about the project as I just finished a design theme for
You can have a look at

So said Jane Jolin on Thursday 4 August, 2005 at 9:00PM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.