HTML and CSS Reference
In-Depth Information
Cleverness in Web Design
Web design is a craft grounded in the clever use of positioning, mar-
gins, padding, borders, and most importantly backgrounds to imple-
ment a design of a document or an entire site or application using a
very simple vocabulary. Even the table-based layouts of a decade ago
were based on the clever cheating of the available tools.
Note the first two column example in Chapter 7 where a background
image was used to create the visual appearance of columns even
though the image was attached to a single container. The HTML
DOM is littered with containers waiting for you to push, pull, and
attach images to, so take advantage of them.
The performance impact of having many requests for many different
image files used as backgrounds and icons around a web site can be
quite large. This can be exaggerated if you have button or icons that have
multiple states or you are working with mobile devices where server
requests can chew up both bandwidth and battery life. Creating a
sprite
(one image file that contains multiple graphical elements) and then
using background positioning to shift the image so that only the desired
section of the sprite is visible is a common way to trim down the over-
head of these requests.
Take the four different tab “states” shown in
Figure 8.4
placed in the same graphic file.
Each section of the image graphic file can be
individually applied to a tab by repositioning the
file until the desired part of the image is aligned
(
Figure 8.5
on the next page).
Figure 8.4
A typical sprite image.
