1. 4
Visual Elements and
Graphics

2. Learning Outcomes Create & Format Lines & Borders on Web Pages
Add Graphics to Web Pages
Configure Images as Backgrounds & Hyperlinks
Configure Visual Effects with CSS3
Configure RGBA color with CSS3
Use HTML5 Elements to Caption a Figure
Use the HTML5 Meter & Progress Elements
Follow Web Design Guidelines for Graphics

3. <hr> <hr /> Style
Inserts Plain Line (Horizontal Rule) Across Page
Emphasize Divisions & Transitions In Content
Style
style=“background-color: #RRGGBB | colorname;”
style=“color: #RRGGBB | colorname;”
style=“height: number;”
style=“width: number;”

4. Box Model Describes Rectangular Boxes that Contain Content
Each Block-level Element is Displayed as a Box
Each Content Box can have Margins, Borders, & Padding

5. Border Properties border: style width color
Shorthand Property Sets All Four Individual Borders
Same Format for margin Property

6. Border Properties border-style: keyword Keywords none dotted dashed
solid
double
groove
ridge
inset
outset

7. Border Properties border-width: thin | medium | thick | #
border-color: value
border-radius: value
Configues Rounded Corners for an Element

8. Padding Properties White Space Between Content & Border padding: # | %
Shorthand Property Sets All Four Individual Paddings
padding-left | padding-right | padding-top | padding-bottom: # | %

9. Images Formats GIF Better for Clip Art Displays Maximum of 256 Colors
Interlaced
Image that Comes into Focus While it is Being Displayed
Non-interlaced
Rendering the Image a Line at a Time
Transparency
One Color Selected to Not Display
Animated
Composed of Several Different Images
Displayed in Rapid Succession

10. Images Formats PNG Better for Clip Art Displays More Colors than GIF
Allows Transparency
Does Not Allow Animation

11. Images Formats JPEG Better for Photographs Unlimited Colors
Generally Smaller File Size
Control Amount of Compression

12. Images Formats SVG Scalable
Made Up of Lines, Not Dots
Created with XML and Can Be Modified by CSS
Easily Edited

13. <img> <img /> Attributes Inserts an Image Into a Document
Secondary to Content
Attributes
alt=“text”
Provides Alternative Text that Describes the Image
IE Displays ALT Text When User Hovers on Image
Users Who Surf With Graphics Turned Off
Non-graphical Browsers
Alt Text is Displayed in Place of Image
Required

14. <img> Attributes height=“pixels” src=“URL” width=“pixels”
Specifies the Image's Height
src=“URL”
Specifies Location of Image to Place in Web Page
Required
width=“pixels”
Specifies the Image's Width

15. <img> Style style=“float: none | left | right;”
Place Image on Left / Right & Wrap Text Around It
style=“clear: none | left | right;”
Display Content After Margin is Clear of Floating Elements
style=“margin: top# right# bottom# left#;”
style=“border-width: #;”
Rendered in Designated Link Color if Image is a Link

16. <figure> & <figcaption>
<figure>…<figure>
Contains a Self-contained Unit of Content (e.g., image)
Along with One Optional figcaption Element
Example
<figure>
<img src="lighthouseisland.jpg"
width="250“ height="355"
alt="Lighthouse Island“ />
<figcaption> Island Lighthouse, Built in </figcaption>
</figure>

17. <meter> <meter>…</meter> Example
Displays a Gauge of a Numeric Value Within a Range
Example
<meter value="14417" min="0" max="14417">14417</meter>14,417 Total Visits<br />
<meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox<br />
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet Explorer<br />
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome<br />
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br />
<meter value="312" min="0" max="14417">312</meter>    312 Opera<br />
<meter value="200" min="0" max="14417">200</meter>    200 other<br />

18. <progress> <progress>…</progress> Example
Displays a Bar of a Numeric Value Within a Range
Example
<progress value="5000" max="10000">5000</progress> Progress Towards Our Goal

19. Background Properties
background-color: colorname | #
background-image: url(imagename.gif)

20. Background Properties
background-repeat: repeat | repeat-x | repeat-y | no-repeat
background-position: % | length | keyword

21. Background Properties
background-attachment: scroll | fixed

22. Background Properties
background-clip: content-box | padding-box | border-box
Confines Display of Background Image
background-origin: content-box | padding-box | border-box
Displays Background Image Relative to Value
background-size: % | # | cover | contain
Resize or Scale Background Image

23. Multiple Background Images
Example
#exampleA { width: 500px; height: 250px; background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); background-repeat: no-repeat; background-position: left top, right bottom, left top; }

24. Favicon (Favorites Icon)
Square Image Associated with a Web Page
Named favicon.ico
Displayed in Address Bar, Tab, Favorites/Bookmarks
Example
<link rel="icon" href="favicon.ico">

25. Box Shadows box-shadow Property Example #wrapper {
Specify Horizontal Offset, Vertical Offset, Blur Radius, & Color
Example #wrapper {
box-shadow: 5px 5px 5px #828282; }

26. Opacity opacity Property
Configure the Opacity of the Background Color
0 = Completely Transparent; 1 = Completely Opaque
Example h1{ background-color: #FFFFFF; opacity: 0.6; }

27. RGBA Color rgba Property Example h1{
Red, Green, Blue, Alpha (Transparency)
Values for Red, Green, & Blue Must Be From 0 To 255
Alpha Value 0 = Transparent & 1 = Opaque
Example h1{
color: rgba(255, 255, 255, 0.7);
font-size: 5em;
padding-right: 10px;
text-align: right;
font-family: Verdana, Helvetica, sans-serif; }

28. HSLA Color hsla Property Example h1{
Hue, Saturation, Lightness, Alpha (Transparency)
Hue - Actual Color from 0 to 360 (Circle)
Red = 0; Green = 120; Blue = 240
Saturation – Intensity from 0% to 100%
Lightness - Brightness from 0% to 100%
Alpha Value 0 = Transparent & 1 = Opaque
Example h1{
color: hsla(120, 100%, 100%, 1.0); }

29. Gradients linear-gradient & radial-gradient Properties
Example #linearBg1 { /* top-bottom */
background: linear-gradient(#000, #400, #800, #c00, #f00); }
#linearBg2 { /* left-right */
background: linear-gradient(to right, #000, #500, #a00, #f00);
#linearBg3 { /* diagonal top left-bottom right */
background: linear-gradient(to bottom right, #000, #800, #f00);