4 Visual Elements and Graphics

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 /> • 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. Border Properties • border: style width color • Shorthand Property Sets All Four Individual Borders • Same Format as Margin

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

6. Border Properties • border-width: thin | medium | thick | # • border-color: value

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

8. 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

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

10. Images • Formats • JPEG • Better For Photographs • Unlimited Colors • Generally Smaller File Size • Control Amount Of Compression

11. <img> • <img /> • 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

12. <img> • Attributes • height=“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

13. <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

14. Image Maps • Image Map • An Image that has Multiple Areas Defined as Links • Hotspot • An Area in an Image That is Defined as a Link • Example <img src=“filename.ext” usemap=“#mapname” /> <map id=“mapname”> <area shape=“rect” coords=“x1,y1, x2,y2” href=“url” /> <area shape=“circle” coords=“x,y,r” href=“url” /> <area shape=“poly” coords=“x1,y1, x2,y2, ...” href=“url” /> </map>

15. Image Maps • Requirements • id Attribute for <map> • alt Attribute for <area>

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

17. <meter> 5 • <meter>…</meter> • 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> &nbsp;&nbsp; 312 Opera<br /> <meter value="200" min="0" max="14417">200</meter> &nbsp;&nbsp; 200 other<br />

18. <progress> 5 • <progress>…</progress> • 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 | #

20. Background Properties • background-image: url(imagename.gif)

21. Background Properties • background-repeat: repeat | repeat-x | repeat-y | no-repeat

22. Background Properties • background-position: % | length | keyword

23. Background Properties • background-attachment: scroll | fixed

24. Multiple Background Images 3 • 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;}

25. 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">

26. Rounded Corners 3 • border-radius Property • Configures Horizontal Radius & Vertical Radius of Corner • Browser Vendor Proprietary Properties • -webkit-border-radius (for Safari & Chrome) • -moz-border-radius (for Firefox) • border-radius (W3C syntax) • Exampleh1 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }

27. Box Shadows 3 • box-shadow Property • Specify Horizontal Offset, Vertical Offset, Blur Radius, & Color • Example#wrapper { -webkit-box-shadow: 5px 5px5px #828282; -moz-box-shadow: 5px 5px5px #828282; box-shadow: 5px 5px5px #828282; }

28. Text Shadows 3 • text-shadow Property • Specify Horizontal Offset, Vertical Offset, Blur Radius, & Color • Example#wrapper { text-shadow: 3px 3px3px #666; }

29. Opacity 3 • opacity Property • Configure the Opacity of the Background Color • 0 = Completely Transparent; 1 = Completely Opaque • Exampleh1{ background-color: #FFFFFF; opacity: 0.6; }

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

31. Gradients 3 • linear-gradient & radial-gradient Properties • Example#linearBg2 { /* Standard */ background: linear-gradient(#2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(#2F2727, #1a82f7); /* Safari 5.1+ */ background: -webkit-linear-gradient(#2F2727, #1a82f7); }