Chapter 3 ■ CSS3 tranSitionS for imageS
In this case, the captions are descriptions of the image, but this technique could also be used for the
graphical navigation for a site (see Chapter 4).
Listing 3-15. HTML5 Figure and Figcaption Code
You’re going to do a few things in the CSS. First, the images and the figure element surrounding them
should be set to the same size and floated side-by-side. You’ll also style the captions before hiding them with
more CSS.
reM: NOt the BaND
traditionally, fonts on web pages have been sized in pixels, percentages, or ems. the latter two have
generally been the preferred approach because they are inherently scalable. Since 1em is literally the width
of the M character, making paragraph text 20% larger was as easy as stating that the font-size for the p
selector was 1.2em. Using em also makes it easy to proportionally size the space between elements as font
sizes increase and decrease. for example, you set the gutter between an image and the text surrounding
it by measuring the image’s margin in em units, creating a visual relationship between body copy and
illustrations.
the one issue with using em as a measurement system in web pages is that it compounds, due to the fact
that the unit is always set relative to the font size of the parent element. Setting li elements to 1.2em in
size is fine until you nest a list inside it: the content of the inner li will be rendered at 1.4em in size.
rem (for root em) gets around this problem by measuring itself relative to the root element—that is, the
html element. this means that you can declare a single font size on the html selector and scale everything
relative to that, as shown in Listing 3-16.
Figure 3-3. Animated image captions