4 Visual Elements and Graphics

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

<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;”

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

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

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

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

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

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

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

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

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

<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

<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

<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

<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 1870 </figcaption> </figure>

<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 />

<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

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

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

Background Properties background-attachment: scroll | fixed

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

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; }

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

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

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

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; }

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); }

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);