Pro CSS3 Animation
Chapter 3 ■ CSS3 tranSitionS for imageS :target The use of :target may be the most effective pseudo-selector in this instance, a ...
Chapter 3 ■ CSS3 tranSitionS for imageS In this case, the captions are descriptions of the image, but this technique could also ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-16. rem Font Sizing for a Document html { font-size: 62.5% } body { font-size: ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-18. CSS to Hide and Position a Caption figure { float: left; } figure, figure ...
Chapter 3 ■ CSS3 tranSitionS for imageS Again, you will use images of the same size to produce the best results, as shown in Lis ...
Chapter 3 ■ CSS3 tranSitionS for imageS 42 The code in Listing 3-22 will produce the image shown in Figure 3 - 6. Figure 3-6. St ...
Chapter 3 ■ CSS3 tranSitionS for imageS 43 Now you can truly fan the cards out, applying a transition at the same time, as shown ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-25. A Linked Card Fan Gallery If you want to rotate the first and secon ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-28. A Card Fan Gallery with Images Referenced by Their src Attribute cardfan i ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-30. HTML and CSS Code for a Card Fan Effect with Generated Content cardfan ...
Chapter 3 ■ CSS3 tranSitionS for imageS You’ll use much the same approach you used previously: an image of known dimension (supp ...
Chapter 3 ■ CSS3 tranSitionS for imageS The code to position the caption in Figure 3 - 9 can be seen in Listing 3-33. (Note that ...
Chapter 3 ■ CSS3 tranSitionS for imageS transform-origin: bottom right; transform: rotate(90deg); } figure.clapperboard:hover fi ...
Chapter 3 ■ CSS3 tranSitionS for imageS In this case, I’ve made the figcaption twice as wide as it was before and padded the con ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-37 presents the full CSS code. Listing 3-37. CSS Code for a Clapperboard Capti ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-39. CSS Code for a Clapperboard Caption figure.clapperboard:hover figcaption { ...
Chapter 3 ■ CSS3 tranSitionS for imageS When the page loads, you want several pictures to slide from one side of the page to the ...
Chapter 3 ■ CSS3 tranSitionS for imageS 54 url(lake-benmore-new-zealand-panorama.jpg) -1300px 200px no-repeat, url(lake-tekapo-n ...
Chapter 3 ■ CSS3 tranSitionS for imageS The last issue, not so serious, is that the background images fade suddenly when they mo ...
Chapter 3 ■ CSS3 tranSitionS for imageS Listing 3-46. Animated Fake Background Images body:hover img#benmore, body:hover img#tek ...
«
1
2
3
4
5
6
7
8
9
»
Free download pdf
