Chapter 6 ■ CSS3 Keyframe animationS for Web Contentdiv.notification:nth-child(2) div.progress span { animation-delay: 6s; }
div.notification:nth-child(3) div.progress span { animation-delay: 12s; }
Naturally, in the real world hand-crafting each notification in pure CSS3 would take a great deal of effort. As
you will see in Chapter 9, you can use the basis of the work here to neatly integrate with JavaScript’s strengths.
A Lightbox Image Gallery Equivalent in CSS3
Lightbox is a generic term for one of the first popular modal techniques used to display gallery images: the
classical Lightbox effect is a fade-out of the page followed by an expansion and fade-in of the image at the center
of the page. Its popularity led to overuse on the web, with many developers simply using the defaults that came
with the code because of unfamiliarity or laziness. Writing the equivalent in CSS allows the developer to easily
customize the appearance of the gallery to their requirements.
First, you’ll use a very similar markup (Listing 6-24) to what you used for the first gallery example in Chapter 3.
This time you’ll use images provided by Robert Lowe, Jon Rawlinson and Camilo Rueda López, licensed under
Creative Commons (Figure 6-3).
Figure 6-3. Large image zoomed in a CSS3-Lightbox equivalent