1. Web Development & Design Foundations with H T M L 5
Ninth Edition
Chapter 4
Visual Elements and Graphics
If this PowerPoint presentation contains mathematical equations, you may need to check that your computer has the following installed:
1) MathType Plugin
2) Math Player (free versions available)
3) NVDA Reader (free versions available)
Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links by using INSERT+F7
Copyright © 2019, 2017, 2015 Pearson Education, Inc. All Rights Reserved

2. CSS3 opacity Property Configure the opacity of the element
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; }

3. Hands-on practice 4.13 (page 176)
chapter4/4.13/index.html

4. Rgba Color Four values are required: Example:
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; }

5. Hands-on practice 4.14 (page 178)
chapter4/4.14/rgba.html

6. HSLA Color hue, saturation, light, alpha
Hue is a value between 0 and 360
Saturation: percent
Lightness: percent
Optional alpha: from 0 to 1

7. Hands-on practice 4.15 (pages 180)
chapter4/4.15/hsla.html

8. CSS3 Gradients
Gradient: a smooth blending of shades from one color to another
Use the background-image property
linear-gradient()
radial-gradient()
Example:
body {
background-color: #8FA5CE;
background-image: linear-gradient(#FFFFFF, #8FA5CE); }

9. Hands-on practice 4.16 (page 182)
chapter4/4.16/linear.html
chapter4/4.16/radial.html