1. Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris

2. MORE ABOUT IMAGES  Image Map  Favorites Icon  CSS Sprites  Sources for Graphics  Guidelines for Using Images  Accessibility & Visual Elements

3. Copyright © Terry Felke-Morris IMAGE MAP  map element  Defines the map  area element  Defines a specific area on a map  Can be set to a rectangle, circle, or polygon  href Attibute  shape Attribute  coords Attribute 3

4. Copyright © Terry Felke-Morris IMAGE MAP  http://webdevfoundations.net/6e/chapter4.html http://webdevfoundations.net/6e/chapter4.html 4

5. Copyright © Terry Felke-Morris FAVORITES ICON - FAVICON  A square image associated with a Web page  Usually named: favicon.ico  May display in the browser address bar, tab, or favorites/bookmarks list  Configure with a link tag:

6. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.7  chapter4/4.7 6

7. Copyright © Terry Felke-Morris SOURCES FOR GRAPHICS Create them yourself using a graphics application: ◦ GIMP ◦ Adobe Photoshop ◦ Adobe Fireworks ◦ Google’s Picasa (http://picasa.google.com/) Download graphics from a free site Purchase/download professional-quality graphics Purchase a graphics collection on a CD Take digital photographs Scan your photographs Scan your drawings Hire a graphic designer to create graphics 7

8. Copyright © Terry Felke-Morris GUIDELINES FOR USING IMAGES  Reuse images  Consider image file size with image quality  Consider image load time  Use appropriate resolution  Specify dimensions  Be aware of brightness and contrast 8

9. Copyright © Terry Felke-Morris IMAGES AND ACCESSIBILITY  Don't rely on color alone.  Some visitors may have color perception deficiencies. Use high contrast between background and text color.  Provide a text equivalent for non-text elements.  Use the alt attribute on your image elements  If your site navigation uses image links, provide simple text links at the bottom of the page. 9

10. Copyright © Terry Felke-Morris CSS3 ROUNDED CORNERS  border-radius property  Configures the horizontal radius and vertical radius of the corner  Numeric value(s) with unit (pixel or em) or percentage  Browser vendor proprietary properties:  -webkit-border-radius (for Safari & Chrome)  -moz-border-radius (for Firefox)  border-radius (W3C syntax)  Example h1 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } 10

11. Copyright © Terry Felke-Morris CSS3 ROUNDED CORNERS  chapter4/box.html 11

12. Copyright © Terry Felke-Morris EXAMPLES OF ROUNDED CORNERS  One value for border-radius configures all four corners Example: border-radius: 15px;  Four values for border-radius configure each corner separately Ordered by top left, top right, bottom right, bottom left Example: border-radius: 15px 30px 100px 5px; 12

13. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.9  chapter4/starter3.html  chapter4/lighthouse/index.html 13

14. Copyright © Terry Felke-Morris CSS3 BOX-SHADOW PROPERTY  Configure the horizontal offset, vertical offset, blur radius, and valid color value  Example: #wrapper { -webkit-box-shadow: 5px 5px 5px #828282; -moz-box-shadow: 5px 5px 5px #828282; box-shadow: 5px 5px 5px #828282;} Optional keyword: inset 14

15. Copyright © Terry Felke-Morris CSS3 TEXT-SHADOW PROPERTY  Configure the horizontal offset, vertical offset, blur radius, and valid color value  Example: #wrapper { text-shadow: 3px 3px 3px #666; } 15

16. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.10  chapter4/lighthouse/shadow.html 16

17. Copyright © Terry Felke-Morris CSS3 OPACITY PROPERTY  Configure the opacity of the background color  Opacity range:  0 Completely Transparent  1 Completely Opaque horizontal offset, vertical offset, blur radius, and valid color value  Example: h1{ background-color: #FFFFFF; opacity: 0.6; } 17

18. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.11  chapter4/opacity/index.html 18

19. Copyright © Terry Felke-Morris RGBA COLOR Four values are required:  red color, green color, blue color, and alpha(transparency)  The values for red, green, and blue must be decimal values from 0 to 255.  The alpha value must be a number between 0 (transparent) and 1 (opaque).  Example: h1 { color: #ffffff; color: rgba(255, 255, 255, 0.7); font-size: 5em; padding-right: 10px; text-align: right; font-family: Verdana, Helvetica, sans-serif; } 19

20. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.12  chapter4/opacity/rgba.html 20

21. Copyright © Terry Felke-Morris CSS3 GRADIENTS  Gradient: a smooth blending of shades from one color to another  Use the background-image property  linear-gradient()  radial-gradient()  Example: background-color: #8FA5CE; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#8FA5CE)); background-image: -moz-linear-gradient(top, #FFFFFF, #8FA5CE); filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=#FFFFFFFF, endColorstr=#FF8FA5CE); linear-gradient(#FFFFFF, #8FA5CE); 21

22. Copyright © Terry Felke-Morris FIGURE 4.39  No image file is needed.  Saves on bandwidth  chapter4/lighthouse/gradient.html 22