This page demonstrates some of the issues raised in the Elastic Design article in A List Apart.
To see the elastic effects take place, increase or decrease the text-size of your browser.
Text
The most basic aspect of the elastic design approach is elastic text. The size of the text in this paragraph for example is defined with ems and will change according to the text-size setting on your browser.
In contrast, the text in this paragraph is defined using pixels, and although browsers such as Mozilla will scale this text depending on the browsers text-size setting, Internet Explorer will not.
Layout
This particular page has a fixed-width content-area, unlike the fluid nature of the rest of HTML Dog. Changing the text size on this page will also change the dimensions of the layout, including the navigation bar and the main content area.
The Elastic Lawn design on the CSS Zen Garden demonstrates an elastic layout through a more elaborate design.
Images
The three methods of dealing with images discussed in the A List Apart article are highlighted below.
Elastic image
The following image demonstrates an img element, the width and height of which is set using ems instead of pixels.
The image should be sharp at the default text-size setting, but aspects of it can become unsightly as it shrinks or grows with the text.
Background image in elastic box
The following image demonstrates the use of Image Replacement to display a background image, in this case within a div element.
This background-image is tiled and as such unsightly at a large text-size setting. There are a number of ways to better manipulate this method though, such as having a tessellating image or an image that is larger than that needed at the default-text size. A single image could also have a gradient-fade on its edges to more attractively blend with a background colour.
Clipped image in elastic box
The following image demonstrates an img element within a div element that has overflow: hidden applied to it.
When the text-size is larger than the default, there will be a space around this image (shown here in red). Altohugh the tessellating potential of background images can not be used, there is still the possibility of using fading image, or an image that will usually be larger than the containing element whatever text size is selected, such as that below.
Return to the Elastic Design article.
Discuss the Elastic Design article.