10.2. Clipping HTML Content

There are times when you want to show only part of a large graphic. Perhaps you want to point out a detail that might be missed in the greater image, or you need to emphasize a particular work, which is embedded in a larger piece that isn't relevant to your purpose.

Let's take the "Kick of the Day" graphic we worked on in the previous section. The image is large, and it's used in a couple of different places on the site. Having overlaid it with a text headline, we'd like to avoid having to reproduce the graphic, trim excess content, and redo the styling to create the knockout type, in order to produce a smaller image that we can use elsewhere.

Figure 10-6 shows the effect we're going for.

Figure 10-6. Smaller Image ...

Get HTML Utopia: Designing Without Tables Using CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.