WEB DEVELOPMENT DESIGN FOUNDATIONS WITH HTML 5 7
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML 5 7 TH EDITION Chapter 11 Key Concepts Copyright © Terry Felke-Morris 1
CSS IMAGE GALLERY Configure each thumbnail image: <li><a href="photo 1. jpg"><img src="photo 1 thumb. jpg" width="100" height="75" alt="Golden Gate Bridge"> <span><img src="photo 1. jpg" width="400" height="300“ alt="Golden Gate Bridge"> Golden Gate Bridge </span></a> </li> The key CSS: #gallery span { display: none; } #gallery a: hover span { display: block; position: absolute; top: 10 px; left: 300 px; text-align: center; } Copyright © Terry Felke-Morris 2
HANDS-ON PRACTICE 11. 5 Page 472 chapter 11/gallery. html Copyright © Terry Felke-Morris 3
CSS 3 TRANSFORM PROPERTY Allows you to rotate, scale, skew, or move an element Example: -webkit-transform: rotate(3 deg); -moz-transform: rotate(3 deg); -o-transform: rotate(3 deg); -ms-transform: rotate(3 deg); Copyright © Terry Felke-Morris 4
HANDS-ON PRACTICE 11. 6 Page 475 chapter 11/transform/index. html Copyright © Terry Felke-Morris 5
CSS 3 TRANSITION PROPERTY Provides for changes in property values to display in a smoother manner over a specified time. Example: background-color: #cccccc; -webkit-transition: background-color 1 s ease-in; -moz-transition: background-color 1 s ease-in; -o-transition: background-color 1 s ease-in; Copyright © Terry Felke-Morris 6
HANDS-ON PRACTICE 11. 7 Page 477 chapter 11/transistion/index. html Copyright © Terry Felke-Morris 7
HANDS-ON PRACTICE 11. 8 Page 478 chapter 11/gallery 2/index. html Copyright © Terry Felke-Morris 8
- Slides: 8