# Session 07 - CSS Wrap-up / Image Essentials / User Experience and Design

Harvard Extension School
Spring 2021

Course Web Site: https://cscie12.dce.harvard.edu/

### Topics

1. Housekeeping
2. Navigation Systems
3. Navigation and Lists
4. Lists as Side Navigation
5. Dropdown Menus
6. Breadcrumb Navigation
7. Image to Replace Text - for a logo, wordmark, etc.
8. CSS Rounded Borders
9. CSS Shadows
10. CSS Gradients
11. Images Essentials
12. JPEG
13. GIF
14. PNG
15. SVG
16. WebP
17. Comparison of Image Formats
18. Working with Images
19. Elements of User Experience
20. Strategy
21. Scope
22. Structure
23. Skeleton
24. Surface

Session 07 - CSS Wrap-up / Image Essentials / User Experience and Design, slide1
Housekeeping, slide2
Navigation Systems, slide3
Harvard College, slide4
Navigation and Lists, slide5
display: none, slide6
Lists as Side Navigation, slide7
Lists as Navigation, slide8
Dropdown Menus, slide9
Dropdown Menus, slide10
Dropdown Menus: Vertical, slide11
Breadcrumb Navigation, slide12
Breadcrumb Navigation, slide13
Image to Replace Text - for a logo, wordmark, etc., slide14
CSS Rounded Borders, slide15
CSS Shadows, slide16
box-shadow, slide17
Text Shadow, slide18
Text Shadow, slide19
Opacity - RGBA - red, green, blue, alpha, slide20
Opacity, slide21
CSS Gradients, slide22
linear-gradient, slide23
radial-gradient, slide24
Images Essentials, slide25
Images and the Web, slide26
Graphics Formats for the Web, slide27
image or image or image — Does it matter? , slide28
Graphics: Vector and Bitmap, slide29
Colors, slide30
Color Depth, slide31
Indexed Color Systems, slide32
Bitmap images: Size and Quality, slide33
Graphics Formats for the Web, slide34
JPEG, slide35
JPEG Compression, slide36
JPEG Compression Artifacts, slide37
GIF, slide38
Palettes, slide39
Palettes: Exact, Adaptive, Web 216, slide40
Adaptive Palette: Shift and Dither, slide41
GIF Images and Bit Depth: Color Shift, slide42
GIF Images and Bit Depth: Dither, slide43
Compression for Indexed GIF, slide44
Compression and Dithering, slide45
Transparency, slide46
GIF Animation, slide47
PNG, slide48
Compression for Indexed PNG, slide49
Compression and Dithering, slide50
Transparency, slide51
SVG, slide52
Basic SVG Shapes, slide53
United States Flag, slide54
Harvard Division of Continuing Education Shield, slide55
Massachusetts Map, slide56
Icons, slide57
SVG - Increasing Importance in the Future, slide58
SVG and D3 JS Library, slide59
WebP, slide60
Comparison of Image Formats, slide61
Cartoon Art, slide62
Working with Images, slide63
Start with Original PSD/AI/etc. or High Resolution 24-bit PNG, slide64
Elements of User Experience, slide65
5 Planes in More Detail, slide66
Planning and Designing a Site: Resources, slide67
Strategy, slide68
Who are our Users?, slide69
What Audiences can be identified?, slide70
Audience(s), slide71
Audiences for an Academic Department, slide72
Audiences for a Fitness Club, slide73
Scope, slide74
Content, slide75
Think About the User, slide76
Structure, slide77
Structuring Content, slide78
Organize, slide79
Structural Models, slide80
Hierarchical, slide81
Biological, slide82
Open Directory Project, Yahoo! Categories, slide83
Too deep or too shallow?, slide84
Sequential, slide85
Organic, slide86
Site Architecture, slide87
Label, slide88
Labels - Are there conventions?, slide89
Skeleton, slide90
Page Components, slide91
Wireframes and Sketches - "Low" to "High" Fidelity, slide92
Navigation Systems, slide93
Surface, slide94
F-Pattern, slide95
Non-Designer's Design Book, slide96
Non-Designer's Design Book, slide97
Colors, slide98
Home Page -- Don't Make Me Think (Steven Krug), slide99
Don't make me think, slide100

Presentation contains 100 slides

- img
- img
- img
- img
- img

## Housekeeping

- Assignment - CSS
- Spring Break - Sections (no); Office Hours (yes!)
- Final Project

## Navigation Systems

- Where am I?
- Where can I go?
  - What is close by?
  - What is further away?

## Harvard College

Breadcrumb, Clamshell, Tab / Horizontal List, Dropdown

## Navigation and Lists

Markup as a list; CSS to style.

- list-style: none
- display: inline
- display: none
- display: block

## display: none

Example 7.1 - display: none; - Example 7.1 (Without Styles)<nav><nav><ul><li id="al">American League <ul><li id="ale">East <ul><li>Baltimore Orioles</li><li>Boston Red Sox</li><li>New York Yankees</li><li>Toronto Blue Jays</li><li>Tampa Bay Rays</li></ul></li><li id="alc">Central <ul><li>Chicago White Sox</li><li>Cleveland Indians</li><li>Detroit Tigers</li><li>Kansas City Royals</li><li>Minnesota Twins</li></ul></li><li id="alw">West <ul><li>Houston Astros</li><li>Los Angeles Angels</li><li>Oakland Athletics</li><li>Seattle Mariners</li><li>Texas Rangers</li></ul></li></ul></li><li id="nl">National League <ul><li id="nle">East <ul><li>Atlanta Braves</li><li>Miami Marlins</li><li>New York Mets</li><li>Philadelphia Phillies</li><li>Washington Nationals</li></ul></li><li id="nlc">Central <ul><li>Chicago Cubs</li><li>Cincinnati Reds</li><li>Milwaukee Brewers</li><li>Pittsburgh Pirates</li><li>St. Louis Cardinals</li></ul></li><li id="nlw">West <ul><li>Arizona Diamondbacks</li><li>Colorado Rockies</li><li>Los Angeles Dodgers</li><li>San Diego Padres</li><li>San Francisco Giants</li></ul></li></ul></li></ul></nav></nav> #ale ul, #alw ul, #nl ul { display: none; }

- Markup
- Style
- Screenshot

     <nav>
       <nav>
         <ul>
           <li id="al">American League
             <ul>
               <li id="ale">East
                 <ul>
                   <li>Baltimore Orioles
                   </li>
                   <li>Boston Red Sox
                   </li>
                   <li>New York Yankees
                   </li>
                   <li>Toronto Blue Jays
                   </li>
                   <li>Tampa Bay Rays
                   </li>             </ul>
               </li>
               <li id="alc">Central
                 <ul>
                   <li>Chicago White Sox
                   </li>
                   <li>Cleveland Indians
                   </li>
                   <li>Detroit Tigers
                   </li>
                   <li>Kansas City Royals
                   </li>
                   <li>Minnesota Twins
                   </li>             </ul>
               </li>
               <li id="alw">West
                 <ul>
                   <li>Houston Astros
                   </li>
                   <li>Los Angeles Angels
                   </li>
                   <li>Oakland Athletics
                   </li>
                   <li>Seattle Mariners
                   </li>
                   <li>Texas Rangers
                   </li>             </ul>
               </li>         </ul>
           </li>
           <li id="nl">National League
             <ul>
               <li id="nle">East
                 <ul>
                   <li>Atlanta Braves
                   </li>
                   <li>Miami Marlins
                   </li>
                   <li>New York Mets
                   </li>
                   <li>Philadelphia Phillies
                   </li>
                   <li>Washington Nationals
                   </li>             </ul>
               </li>
               <li id="nlc">Central
                 <ul>
                   <li>Chicago Cubs
                   </li>
                   <li>Cincinnati Reds
                   </li>
                   <li>Milwaukee Brewers
                   </li>
                   <li>Pittsburgh Pirates
                   </li>
                   <li>St. Louis Cardinals
                   </li>             </ul>
               </li>
               <li id="nlw">West
                 <ul>
                   <li>Arizona Diamondbacks
                   </li>
                   <li>Colorado Rockies
                   </li>
                   <li>Los Angeles Dodgers
                   </li>
                   <li>San Diego Padres
                   </li>
                   <li>San Francisco Giants
                   </li>             </ul>
               </li>         </ul>
           </li>     </ul>   </nav> </nav>

In `style` element (`<style>`) within `head` element:

    #ale ul,
    #alw ul,
    #nl ul
     { display: none; }

Full list for the American League:

- American League
  - East
    - Baltimore Orioles
    - Boston Red Sox
    - New York Yankees
    - Toronto Blue Jays
    - Tampa Bay Rays
  - Central
    - Chicago White Sox
    - Cleveland Indians
    - Detroit Tigers
    - Kansas City Royals
    - Minnesota Twins
  - West
    - Houston Astros
    - Los Angeles Angels
    - Oakland Athletics
    - Seattle Mariners
    - Texas Rangers
- National League
  - East
    - Atlanta Braves
    - Miami Marlins
    - New York Mets
    - Philadelphia Phillies
    - Washington Nationals
  - Central
    - Chicago Cubs
    - Cincinnati Reds
    - Milwaukee Brewers
    - Pittsburgh Pirates
    - St. Louis Cardinals
  - West
    - Arizona Diamondbacks
    - Colorado Rockies
    - Los Angeles Dodgers
    - San Diego Padres
    - San Francisco Giants

## Lists as Side Navigation

Key points:

- remove list styling
- make "a" element "block" display

Default styling:

Note: "a" display property is set to "block". This makes the hyperlink active over the whole area, not just with the text.

Example 7.2 - lists as navigation - Example 7.2 (Without Styles)<nav id="navigation1"><ul><li><a href="http://www.baylor.edu/">Baylor</a></li><li><a href="http://www.iastate.edu/">Iowa State</a></li><li><a href="http://www.ku.edu/">Kansas</a></li><li><a href="http://www.ksu.edu/">Kansas State</a></li><li><a href="http://www.ou.edu/">Oklahoma</a></li><li><a href="http://www.okstate.edu/">Oklahoma State</a></li><li><a href="http://www.tcu.edu/">Texas Christian</a></li><li><a href="http://www.utexas.edu/">Texas</a></li><li><a href="http://www.ttu.edu/">Texas Tech</a></li><li><a href="http://www.wvu.edu/">West Virginia</a></li></ul></nav>#navigation1 { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; font-size: 0.7em; width: 15em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900; } #navigation1 ul { list-style: none; margin: 0; padding: 0; } #navigation1 ul li { margin: 0; border-top: 1px solid #333; } #navigation1 ul li a { display: block; background-color: #ddd; border-top: 1px solid #333; border-left: 5px solid #333; text-decoration: none; padding: 5px 2px 5px 0.5em; } #navigation1 ul li a:link, #navigation1 ul li a:visited { color: #900; } #navigation1 ul li a:hover { color: #fff; background-color: #900;}

- Markup
- Style
- Screenshot

     <nav id="navigation1">
       <ul>
         <li>
           <a href="http://www.baylor.edu/">Baylor       </a>
         </li>
         <li>
           <a href="http://www.iastate.edu/">Iowa State       </a>
         </li>
         <li>
           <a href="http://www.ku.edu/">Kansas       </a>
         </li>
         <li>
           <a href="http://www.ksu.edu/">Kansas State       </a>
         </li>
         <li>
           <a href="http://www.ou.edu/">Oklahoma       </a>
         </li>
         <li>
           <a href="http://www.okstate.edu/">Oklahoma State       </a>
         </li>
         <li>
           <a href="http://www.tcu.edu/">Texas Christian       </a>
         </li>
         <li>
           <a href="http://www.utexas.edu/">Texas       </a>
         </li>
         <li>
           <a href="http://www.ttu.edu/">Texas Tech       </a>
         </li>
         <li>
           <a href="http://www.wvu.edu/">West Virginia       </a>
         </li>   </ul> </nav>

In `head` element:

    <link rel="stylesheet" href="example2.css"/>

In example2.css

    #navigation1 {
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 0.7em;
      width: 15em;
      border-right: 1px solid #333;
      margin-bottom: 1em;
      background-color: #ddd;
      color: #900;
    }
    #navigation1 ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #navigation1 ul li {
      margin: 0;
      border-top: 1px solid #333;
    }
    #navigation1 ul li a {
      display: block;
      background-color: #ddd;
      border-top: 1px solid #333;
      border-left: 5px solid #333;
      text-decoration: none;
      padding: 5px 2px 5px 0.5em;
    }
    #navigation1 ul li a:link,
    #navigation1 ul li a:visited
    { color: #900; }
    #navigation1 ul li a:hover {
         color: #fff;
         background-color: #900;}

## Lists as Navigation

Nested list styled as "clamshell" navigation.

- remove list styling
- make "a" element "block" display
- styles for secondary nested lists (e.g. selector for `ul ul a`)
- `display: none` for nested lists that you don't want to display

Example 7.3 - Nested lists for 'clamshell' navigation - Example 7.3 (Without Styles)<nav id="navclam"><ul><li><a href="http://big12sports.collegesports.com/">Big XII</a><ul><li><a href="http://www.baylor.edu/">Baylor</a></li><li><a href="http://www.iastate.edu/">Iowa State</a></li><li><a href="http://www.ku.edu/">Kansas</a></li><li><a href="http://www.ksu.edu/">Kansas State</a></li><li><a href="http://www.ou.edu/">Oklahoma</a></li><li><a href="http://www.okstate.edu/">Oklahoma State</a></li><li><a href="http://www.tcu.edu/">Texas Christian</a></li><li><a href="http://www.utexas.edu/">Texas</a></li><li><a href="http://www.ttu.edu/">Texas Tech</a></li><li><a href="http://www.wvu.edu/">West Virginia</a></li></ul></li><li><a href="http://www.ivyleaguesports.com/">Ivy League</a><ul class="collapse"><li><a href="http://www.brown.edu/">Brown</a></li><li><a href="http://www.columbia.edu/">Columbia</a></li><li><a href="http://www.cornell.edu/">Cornell</a></li><li><a href="http://www.dartmouth.edu/">Dartmouth</a></li><li><a href="http://www.harvard.edu/">Harvard</a></li><li><a href="http://www.upenn.edu/">Penn</a></li><li><a href="http://www.princeton.edu/">Princeton</a></li><li><a href="http://www.yale.edu/">Yale</a></li></ul></li><li><a href="http://www.pac-12.com/">Pac 12</a><ul class="collapse"><li><a href="http://www.arizona.edu/">Arizona</a></li><li><a href="http://www.asu.edu/">Arizona State</a></li><li><a href="http://www.berkeley.edu/">California</a></li><li><a href="http://www.cu.edu/">Colorado</a></li><li><a href="http://www.uoregon.edu/">Oregon</a></li><li><a href="http://www.oregonstate.edu/">Oregon State</a></li><li><a href="http://www.stanford.edu/">Stanford</a></li><li><a href="http://www.ucla.edu/">UCLA</a></li><li><a href="http://www.usc.edu/">USC</a></li><li><a href="http://www.utah.edu/">Utah</a></li><li><a href="http://www.washington.edu/">Washington</a></li><li><a href="http://www.wsu.edu/">Washington State</a></li></ul></li></ul></nav>#navclam { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; font-size: 1.2em; width: 10em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900; } #navclam ul { list-style: none; margin: 0; padding: 0; } #navclam ul li { margin: 0; border-top: 1px none #333; } #navclam ul li a { display: block; background-color: #ccc; border-top: 1px none #333; border-right: 1px solid #333; border-bottom: thin dotted #333; border-left: 5px solid #333; text-decoration: none; padding: 5px 2px 5px 0.5em; } #navclam a:link { color: #900; } #navclam a:visited { color: #900; } #navclam a:hover { color: #fff; background-color: #900; border-top: 1px outset #333; border-right: 1px outset #333; border-bottom: 1px outset #333; border-left: 5px outset #333; } #navclam a:active { color: #fff; background-color: #900; border-top: 1px inset #333; border-right: 1px inset #333; border-bottom: 1px inset #333; border-left: 5px inset #333; } #navclam ul ul { list-style: none; } #navclam ul ul a { padding-left: 1.5em; font-size: 90%; font-weight: normal; } #navclam ul.collapse { display: none; }

- Markup
- Style
- Screenshot

     <nav id="navclam">
       <ul>
         <li>
           <a href="http://big12sports.collegesports.com/">Big XII       </a>
           <ul>
             <li>
               <a href="http://www.baylor.edu/">Baylor           </a>
             </li>
             <li>
               <a href="http://www.iastate.edu/">Iowa State           </a>
             </li>
             <li>
               <a href="http://www.ku.edu/">Kansas           </a>
             </li>
             <li>
               <a href="http://www.ksu.edu/">Kansas State           </a>
             </li>
             <li>
               <a href="http://www.ou.edu/">Oklahoma           </a>
             </li>
             <li>
               <a href="http://www.okstate.edu/">Oklahoma State           </a>
             </li>
             <li>
               <a href="http://www.tcu.edu/">Texas Christian           </a>
             </li>
             <li>
               <a href="http://www.utexas.edu/">Texas           </a>
             </li>
             <li>
               <a href="http://www.ttu.edu/">Texas Tech           </a>
             </li>
             <li>
               <a href="http://www.wvu.edu/">West Virginia           </a>
             </li>       </ul>
         </li>
         <li>
           <a href="http://www.ivyleaguesports.com/">Ivy League       </a>
           <ul class="collapse">
             <li>
               <a href="http://www.brown.edu/">Brown           </a>
             </li>
             <li>
               <a href="http://www.columbia.edu/">Columbia           </a>
             </li>
             <li>
               <a href="http://www.cornell.edu/">Cornell           </a>
             </li>
             <li>
               <a href="http://www.dartmouth.edu/">Dartmouth           </a>
             </li>
             <li>
               <a href="http://www.harvard.edu/">Harvard           </a>
             </li>
             <li>
               <a href="http://www.upenn.edu/">Penn           </a>
             </li>
             <li>
               <a href="http://www.princeton.edu/">Princeton           </a>
             </li>
             <li>
               <a href="http://www.yale.edu/">Yale           </a>
             </li>       </ul>
         </li>
         <li>
           <a href="http://www.pac-12.com/">Pac 12       </a>
           <ul class="collapse">
             <li>
               <a href="http://www.arizona.edu/">Arizona           </a>
             </li>
             <li>
               <a href="http://www.asu.edu/">Arizona State           </a>
             </li>
             <li>
               <a href="http://www.berkeley.edu/">California           </a>
             </li>
             <li>
               <a href="http://www.cu.edu/">Colorado           </a>
             </li>
             <li>
               <a href="http://www.uoregon.edu/">Oregon           </a>
             </li>
             <li>
               <a href="http://www.oregonstate.edu/">Oregon State           </a>
             </li>
             <li>
               <a href="http://www.stanford.edu/">Stanford           </a>
             </li>
             <li>
               <a href="http://www.ucla.edu/">UCLA           </a>
             </li>
             <li>
               <a href="http://www.usc.edu/">USC           </a>
             </li>
             <li>
               <a href="http://www.utah.edu/">Utah           </a>
             </li>
             <li>
               <a href="http://www.washington.edu/">Washington           </a>
             </li>
             <li>
               <a href="http://www.wsu.edu/">Washington State           </a>
             </li>       </ul>
         </li>   </ul> </nav>

In `head` element:

    <link rel="stylesheet" href="example3.css"/>

In example3.css

    #navclam {
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 1.2em;
      width: 10em;
      border-right: 1px solid #333;
      margin-bottom: 1em;
      background-color: #ddd;
      color: #900;
    }
    #navclam ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #navclam ul li {
      margin: 0;
      border-top: 1px none #333;
    }
    #navclam ul li a {
      display: block;
      background-color: #ccc;
      border-top: 1px none #333;
      border-right: 1px solid #333;
      border-bottom: thin dotted #333;
      border-left: 5px solid #333;
      text-decoration: none;
      padding: 5px 2px 5px 0.5em;
    }
    #navclam a:link {
      color: #900;
    }
    #navclam a:visited {
      color: #900;
    }
    #navclam a:hover {
      color: #fff;
      background-color: #900;
      border-top: 1px outset #333;
      border-right: 1px outset #333;
      border-bottom: 1px outset #333;
      border-left: 5px outset #333;
    }
    #navclam a:active {
      color: #fff;
      background-color: #900;
      border-top: 1px inset #333;
      border-right: 1px inset #333;
      border-bottom: 1px inset #333;
      border-left: 5px inset #333;
    }
    #navclam ul ul {
      list-style: none;
    }
    #navclam ul ul a {
      padding-left: 1.5em;
      font-size: 90%;
      font-weight: normal;
    }
    #navclam ul.collapse {
      display: none;
    }

Default styling of nested list:

## Dropdown Menus

Key points:

- Make the list 'horizontal'
- Hide the secondary lists
- Use the CSS ":hover" pseudo-class to change secondary list display property

Example 7.4 - drop down menu - Example 7.4 (Without Styles)<ul id="dropdown1"><li><a href="#">AL East</a><ul><li><a href="#">Baltimore Orioles</a></li><li><a href="#">Boston Red Sox</a></li><li><a href="#">New York Yankees</a></li><li><a href="#">Tampa Bay Rays</a></li><li><a href="#">Toronto Blue Jays</a></li></ul></li><li><a href="#">AL Central</a><ul><li><a href="#">Chicago White Sox</a></li><li><a href="#">Cleveland Indians</a></li><li><a href="#">Detroit Tigers</a></li><li><a href="#">Kansas City Royals</a></li><li><a href="#">Minnesota Twins</a></li></ul></li><li><a href="#"> AL West</a><ul><li><a href="#">Houston Astros</a></li><li><a href="#">Los Angeles Angels</a></li><li><a href="#">Oakland Athletics</a></li><li><a href="#">Seattle Mariners</a></li><li><a href="#">Texas Rangers</a></li></ul></li></ul>#dropdown1 { padding: 0; margin: 0; list-style: none; display: flex; } #dropdown1 li { flex-basis: 12em; flex-grow: 0; flex-shrink: 0; padding: 0; margin: 0; display: block; } #dropdown1 li ul { display: none; padding: 0; margin:0; } #dropdown1 li:hover ul { display: block; }

- Markup
- Style

     <ul id="dropdown1">
       <li>
         <a href="#">AL East     </a>
         <ul>
           <li>
             <a href="#">Baltimore Orioles         </a>
           </li>
           <li>
             <a href="#">Boston Red Sox         </a>
           </li>
           <li>
             <a href="#">New York Yankees         </a>
           </li>
           <li>
             <a href="#">Tampa Bay Rays         </a>
           </li>
           <li>
             <a href="#">Toronto Blue Jays         </a>
           </li>     </ul>
       </li>
       <li>
         <a href="#">AL Central     </a>
         <ul>
           <li>
             <a href="#">Chicago White Sox         </a>
           </li>
           <li>
             <a href="#">Cleveland Indians         </a>
           </li>
           <li>
             <a href="#">Detroit Tigers         </a>
           </li>
           <li>
             <a href="#">Kansas City Royals         </a>
           </li>
           <li>
             <a href="#">Minnesota Twins         </a>
           </li>     </ul>
       </li>
       <li>
         <a href="#">AL West     </a>
         <ul>
           <li>
             <a href="#">Houston Astros         </a>
           </li>
           <li>
             <a href="#">Los Angeles Angels         </a>
           </li>
           <li>
             <a href="#">Oakland Athletics         </a>
           </li>
           <li>
             <a href="#">Seattle Mariners         </a>
           </li>
           <li>
             <a href="#">Texas Rangers         </a>
           </li>     </ul>
       </li> </ul>

In `style` element (`<style>`) within `head` element:

    #dropdown1 {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
    }
    #dropdown1 li {
      flex-basis: 12em;
      flex-grow: 0;
      flex-shrink: 0;
      padding: 0;
      margin: 0;
      display: block;
    }
    #dropdown1 li ul {
      display: none;
      padding: 0;
      margin:0;
      }
    #dropdown1 li:hover ul { display: block; }

## Dropdown Menus

Example 7.5 - drop-down menu - Example 7.5 (Without Styles)<ul id="dropdown2"><li><a href="#">AL East</a><ul><li><a href="#">Baltimore Orioles</a></li><li><a href="#">Boston Red Sox</a></li><li><a href="#">New York Yankees</a></li><li><a href="#">Tampa Bay Rays</a></li><li><a href="#">Toronto Blue Jays</a></li></ul></li><li><a href="#">AL Central</a><ul><li><a href="#">Chicago White Sox</a></li><li><a href="#">Cleveland Indians</a></li><li><a href="#">Detroit Tigers</a></li><li><a href="#">Kansas City Royals</a></li><li><a href="#">Minnesota Twins</a></li></ul></li><li><a href="#"> AL West</a><ul><li><a href="#">Houston Astros</a></li><li><a href="#">Los Angeles Angels</a></li><li><a href="#">Oakland Athletics</a></li><li><a href="#">Seattle Mariners</a></li><li><a href="#">Texas Rangers</a></li></ul></li></ul>#dropdown2 { padding: 0; margin: 0; list-style: none; display: flex; } #dropdown2 li { flex-basis: 15em; flex-grow: 0; flex-shrink: 0; align-self: flex-start; padding: 0; margin: 0; display: block; } #dropdown2 li ul { display: none; padding: 0; margin:0; } #dropdown2 li:hover ul { display: block; } #dropdown2 li { border: thin solid navy; font-family: calibri,verdana,tahoma,helvetica,sans-serif; background-color: #ccf; } #dropdown2 ul li { background-color: #eef; } #dropdown2 a {display:block; padding: 0.25em;} #dropdown2 a:link, #dropdown2 a:visited, #dropdown2 a:hover, #dropdown2 a:active { text-decoration: none; font-weight: bold; } #dropdown2 a:hover { background-color: navy; color: #ccf; }

- Markup
- Style
- Screenshot

     <ul id="dropdown2">
       <li>
         <a href="#">AL East     </a>
         <ul>
           <li>
             <a href="#">Baltimore Orioles         </a>
           </li>
           <li>
             <a href="#">Boston Red Sox         </a>
           </li>
           <li>
             <a href="#">New York Yankees         </a>
           </li>
           <li>
             <a href="#">Tampa Bay Rays         </a>
           </li>
           <li>
             <a href="#">Toronto Blue Jays         </a>
           </li>     </ul>
       </li>
       <li>
         <a href="#">AL Central     </a>
         <ul>
           <li>
             <a href="#">Chicago White Sox         </a>
           </li>
           <li>
             <a href="#">Cleveland Indians         </a>
           </li>
           <li>
             <a href="#">Detroit Tigers         </a>
           </li>
           <li>
             <a href="#">Kansas City Royals         </a>
           </li>
           <li>
             <a href="#">Minnesota Twins         </a>
           </li>     </ul>
       </li>
       <li>
         <a href="#">AL West     </a>
         <ul>
           <li>
             <a href="#">Houston Astros         </a>
           </li>
           <li>
             <a href="#">Los Angeles Angels         </a>
           </li>
           <li>
             <a href="#">Oakland Athletics         </a>
           </li>
           <li>
             <a href="#">Seattle Mariners         </a>
           </li>
           <li>
             <a href="#">Texas Rangers         </a>
           </li>     </ul>
       </li> </ul>

In `style` element (`<style>`) within `head` element:

    #dropdown2 {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
    }
    #dropdown2  li {
      flex-basis: 15em;
      flex-grow: 0;
      flex-shrink: 0;
      align-self: flex-start;
      padding: 0;
      margin: 0;
      display: block;
    }
    #dropdown2 li ul {
      display: none;
      padding: 0;
      margin:0;
      }
    #dropdown2 li:hover ul { display: block; }
    #dropdown2  li {
      border: thin solid navy;
      font-family: calibri,verdana,tahoma,helvetica,sans-serif;
      background-color: #ccf;
      }
    #dropdown2 ul li { background-color: #eef; }
    #dropdown2 a {display:block; padding: 0.25em;}
    #dropdown2 a:link,
    #dropdown2 a:visited,
    #dropdown2 a:hover,
    #dropdown2 a:active
      { text-decoration: none; font-weight: bold; }
    #dropdown2 a:hover { background-color: navy; color: #ccf; }

## Dropdown Menus: Vertical

Example 7.6 - drop-down/out menu - Example 7.6 (Without Styles)<ul id="dropdown3"><li><a href="#">AL East</a><ul><li><a href="#">Baltimore Orioles</a></li><li><a href="#">Boston Red Sox</a></li><li><a href="#">New York Yankees</a></li><li><a href="#">Tampa Bay Rays</a></li><li><a href="#">Toronto Blue Jays</a></li></ul></li><li><a href="#">AL Central</a><ul><li><a href="#">Chicago White Sox</a></li><li><a href="#">Cleveland Indians</a></li><li><a href="#">Detroit Tigers</a></li><li><a href="#">Kansas City Royals</a></li><li><a href="#">Minnesota Twins</a></li></ul></li><li><a href="#"> AL West</a><ul><li><a href="#">Houston Astros</a></li><li><a href="#">Los Angeles Angels</a></li><li><a href="#">Oakland Athletics</a></li><li><a href="#">Seattle Mariners</a></li><li><a href="#">Texas Rangers</a></li></ul></li></ul>ul { padding: 0; margin: 0; list-style: none; } li { position: relative; width: 15em; } li ul { display: none; position: absolute; top: 1.7em; left: 0; } li > ul { top: auto; left: auto; } li:hover ul { display: block; } #dropdown3 li ul { margin-left: 15em; margin-top: -1.8em; } #dropdown3 li { border: thin solid navy; font-family: calibri,verdana,tahoma,helvetica,sans-serif; background-color: #ccf; } #dropdown3 ul li { background-color: #eef; } #dropdown3 a {display:block; padding: 0.25em;} #dropdown3 a:link, #dropdown3 a:visited, #dropdown3 a:hover, #dropdown3 a:active { text-decoration: none; font-weight: bold; } #dropdown3 a:hover { background-color: navy; color: #ccf; }

- Markup
- Style

     <ul id="dropdown3">
       <li>
         <a href="#">AL East     </a>
         <ul>
           <li>
             <a href="#">Baltimore Orioles         </a>
           </li>
           <li>
             <a href="#">Boston Red Sox         </a>
           </li>
           <li>
             <a href="#">New York Yankees         </a>
           </li>
           <li>
             <a href="#">Tampa Bay Rays         </a>
           </li>
           <li>
             <a href="#">Toronto Blue Jays         </a>
           </li>     </ul>
       </li>
       <li>
         <a href="#">AL Central     </a>
         <ul>
           <li>
             <a href="#">Chicago White Sox         </a>
           </li>
           <li>
             <a href="#">Cleveland Indians         </a>
           </li>
           <li>
             <a href="#">Detroit Tigers         </a>
           </li>
           <li>
             <a href="#">Kansas City Royals         </a>
           </li>
           <li>
             <a href="#">Minnesota Twins         </a>
           </li>     </ul>
       </li>
       <li>
         <a href="#">AL West     </a>
         <ul>
           <li>
             <a href="#">Houston Astros         </a>
           </li>
           <li>
             <a href="#">Los Angeles Angels         </a>
           </li>
           <li>
             <a href="#">Oakland Athletics         </a>
           </li>
           <li>
             <a href="#">Seattle Mariners         </a>
           </li>
           <li>
             <a href="#">Texas Rangers         </a>
           </li>     </ul>
       </li> </ul>

In `style` element (`<style>`) within `head` element:

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      }
    li {
      position: relative;
      width: 15em;
    }
    li ul {
      display: none;
      position: absolute;
      top: 1.7em;
      left: 0;
    }
    li > ul {
      top: auto;
      left: auto;
    }
    li:hover ul { display: block; }

    #dropdown3 li ul {
      margin-left: 15em;
      margin-top: -1.8em;
    }
    #dropdown3  li {
      border: thin solid navy;
      font-family: calibri,verdana,tahoma,helvetica,sans-serif;
      background-color: #ccf;
      }
    #dropdown3 ul li { background-color: #eef; }
    #dropdown3 a {display:block; padding: 0.25em;}
    #dropdown3 a:link,
    #dropdown3 a:visited,
    #dropdown3 a:hover,
    #dropdown3 a:active
      { text-decoration: none; font-weight: bold; }
    #dropdown3 a:hover { background-color: navy; color: #ccf; }

## Breadcrumb Navigation

Strategy is similar to that of creating tabs. Use "display: inline" to make list items inline; use background image for "li" to show arrow.

Example 7.7 - Nested lists for 'breadcrumb' navigation - Example 7.7 (Without Styles)<nav id="breadcrumbf"><ul><li><a href="#">Top</a></li><li><a href="#">Science</a></li><li><a href="#">Biology</a></li><li><a href="#">Genetics</a></li><li><a href="#">Genomics</a></li><li><span>Pharmacogenetics</span></li></ul></nav>/* Order of pseudo-"a" elements: LoVe HAte (Link, Visited, Hover, Active */ #breadcrumbf a:link, #breadcrumbf a:visited, #breadcrumbf a:hover, #breadcrumbf a:active, #breadcrumbf li span { color: navy; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; padding: 0.5em; text-decoration: none; } #breadcrumbf a:hover { text-decoration: underline; } #breadcrumbf li span { color: black; } #breadcrumbf ul { background-color: #ddd; padding-left: 0px; margin-left: 0px; } #breadcrumbf ul li { display: inline; } #breadcrumbf li:first-child { background-image: none; padding-left: 0px; } #breadcrumbf li { background-image: url(images/arrow.gif); background-position: left; background-repeat: no-repeat; padding-left: 25px; }

- Markup
- Style

     <nav id="breadcrumbf">
       <ul>
         <li>
           <a href="#">Top       </a>
         </li>
         <li>
           <a href="#">Science       </a>
         </li>
         <li>
           <a href="#">Biology       </a>
         </li>
         <li>
           <a href="#">Genetics       </a>
         </li>
         <li>
           <a href="#">Genomics       </a>
         </li>
         <li>
           <span>Pharmacogenetics       </span>
         </li>   </ul> </nav>

In `head` element:

    <link rel="stylesheet" href="example7.css"/>

In example7.css

    /*
      Order of pseudo-"a" elements:
      LoVe HAte (Link, Visited, Hover, Active
    */
     #breadcrumbf a:link, #breadcrumbf a:visited, #breadcrumbf a:hover, #breadcrumbf a:active, #breadcrumbf li span {
        color: navy;
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: small;
        font-weight: normal;
        padding: 0.5em;
        text-decoration: none;
    }
    #breadcrumbf a:hover {
        text-decoration: underline;
    }
    #breadcrumbf li span {
        color: black;
    }
    #breadcrumbf ul {
        background-color: #ddd;
        padding-left: 0px;
        margin-left: 0px;
    }
    #breadcrumbf ul li {
        display: inline;
    }
    #breadcrumbf li:first-child {
        background-image: none;
        padding-left: 0px;
    }
    #breadcrumbf li {
        background-image: url(images/arrow.gif);
        background-position: left;
        background-repeat: no-repeat;
        padding-left: 25px;
    }

## Breadcrumb Navigation

Example 7.8 - Nested lists for 'breadcrumb' navigation - Example 7.8 (Without Styles)<nav id="breadcrumbf2"><ul><li><a href="#">Top</a></li><li><a href="#">Science</a></li><li><a href="#">Biology</a></li><li><a href="#">Genetics</a></li><li><a href="#">Genomics</a></li><li><span>Pharmacogenetics</span></li></ul></nav>/* Order of pseudo-"a" elements: LoVe HAte (Link, Visited, Hover, Active */ #breadcrumbf2 a:link, #breadcrumbf2 a:visited, #breadcrumbf2 a:hover, #breadcrumbf2 a:active, #breadcrumbf2 li span { color: navy; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; text-decoration: none; } #breadcrumbf2 li::after { content: " \279E "; } #breadcrumbf2 li:last-child::after { content: ""; } #breadcrumbf2 a:hover { text-decoration: underline; } #breadcrumbf2 li span { color: black; } #breadcrumbf2 ul { background-color: #ddd; padding-left: 0px; margin-left: 0px; } #breadcrumbf2 ul li { display: inline; }

- Markup
- Style

     <nav id="breadcrumbf2">
       <ul>
         <li>
           <a href="#">Top       </a>
         </li>
         <li>
           <a href="#">Science       </a>
         </li>
         <li>
           <a href="#">Biology       </a>
         </li>
         <li>
           <a href="#">Genetics       </a>
         </li>
         <li>
           <a href="#">Genomics       </a>
         </li>
         <li>
           <span>Pharmacogenetics       </span>
         </li>   </ul> </nav>

In `head` element:

    <link rel="stylesheet" href="example8.css"/>

In example8.css

    /*
      Order of pseudo-"a" elements:
      LoVe HAte (Link, Visited, Hover, Active
    */
     #breadcrumbf2 a:link, #breadcrumbf2 a:visited, #breadcrumbf2 a:hover, #breadcrumbf2 a:active, #breadcrumbf2 li span {
        color: navy;
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: small;
        font-weight: normal;
        text-decoration: none;
    }
    #breadcrumbf2 li::after {
      content: "  \279E  ";
    }
    #breadcrumbf2 li:last-child::after {
      content: "";
    }
    #breadcrumbf2 a:hover {
        text-decoration: underline;
    }
    #breadcrumbf2 li span {
        color: black;
    }
    #breadcrumbf2 ul {
        background-color: #ddd;
        padding-left: 0px;
        margin-left: 0px;
    }
    #breadcrumbf2 ul li {
        display: inline;
    }

## Image to Replace Text - for a logo, wordmark, etc.

Replacing an "h1" with an image.

- This technique shows how to replace the text in an 'h1' element with an image.
- Set height according to image
- Use a very large negative text-indent
- The advantage is that the image is displayed and the element remains an h1 and remains accessible

## CSS Rounded Borders

### CSS3 border-radius

Example 7.9 - CSS3 border-radius - Example 7.9 (Without Styles)<div class="box rounded"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="box tightrounded"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="box looserounded"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>.box { width: 260px; padding: 0 40px; border: 3px solid #009999; background-color: #CCFFFF; margin: 1em; } .rounded { border-radius: 25px; } .tightrounded { border-radius: 10px; } .looserounded { border-radius: 50px; }

- Markup
- Style
- Screenshot

     <div class="box rounded">
       <h3>Lorem Ipsum   </h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="box tightrounded">
       <h3>Lorem Ipsum   </h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="box looserounded">
       <h3>Lorem Ipsum   </h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>

In `style` element (`<style>`) within `head` element:

    .box {
          width: 260px;
          padding: 0 40px;
          border: 3px solid #009999;
          background-color: #CCFFFF;
          margin: 1em;
      }
      .rounded {
           border-radius: 25px;
      }
      .tightrounded {
           border-radius: 10px;
      }
      .looserounded {
           border-radius: 50px;
      }

## CSS Shadows

Photo by D Sharon Pruitt

- box-shadow (MDN)
- text-shadow (MDN)
- CanIUse: box-shadow? or text-shadow?

## box-shadow

- box-shadow (MDN)
- `box-shadow`: x-offset y-offset color

### CSS3 box-shadow

Example 7.10 - CSS3 box-shadow - Example 7.10 (Without Styles)<div class="box shadow"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>.box { width: 260px; padding: 0 40px; border: 3px solid #009999; background-color: #CCFFFF; } .shadow { box-shadow: 5px 5px #99cccc; }

- Markup
- Style
- Screenshot

     <div class="box shadow">
       <h3>Lorem Ipsum   </h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>

In `style` element (`<style>`) within `head` element:

    .box {
          width: 260px;
          padding: 0 40px;
          border: 3px solid #009999;
          background-color: #CCFFFF;
      }
      .shadow {
          box-shadow: 5px 5px #99cccc;
      }

## Text Shadow

- text-shadow

Example 7.11 - CSS3 text-shadow - Example 7.11 (Without Styles)<div><h3 class="shadow">Only the Shadow Knows</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>h3.shadow { background-color: #eef; font-size: 24pt; padding: 0.25em; color: #900; /* offset-x | offset-y | blur-radius | color */ text-shadow: 3px 4px 4px rgba(150,150,150,0.5) }

- Markup
- Style
- Display
- Screenshot

     <div>
       <h3 class="shadow">Only the Shadow Knows   </h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>

In `style` element (`<style>`) within `head` element:

    h3.shadow {
        background-color: #eef;
        font-size: 24pt;
        padding: 0.25em;
        color: #900;
        /* offset-x | offset-y | blur-radius | color */
        text-shadow: 3px 4px 4px rgba(150,150,150,0.5)
      }

### Only the Shadow Knows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.

## Text Shadow

Example: Text Shadow with Background Image

## Opacity - RGBA - red, green, blue, alpha

A = alpha channel, used for opacity.
Values of 0 to 1, where 0 is fully transparent, 1 is fully opaque

Example 7.12 - CSS3 text-shadow - Example 7.12 (Without Styles)<div class="opacity-demo"><p style="color: rgba(0,0,0,1)">Opacity of 1</p><p style="color: rgba(0,0,0,0.75)">Opacity of 0.75</p><p style="color: rgba(0,0,0,0.5)">Opacity of 0.5</p><p style="color: rgba(0,0,0,0.25)">Opacity of 0.25</p><p style="color: rgba(0,0,0,0)">Opacity of 0</p></div>.opacity-demo { background-image: url('http://cscie12.dce.harvard.edu/resources/images/satin.png'); background-size: cover; color: white; } .opacity-demo p { font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}

- Markup
- Style
- Display
- Screenshot

     <div class="opacity-demo">
       <p style="color: rgba(0,0,0,1)">Opacity of 1
       </p>
       <p style="color: rgba(0,0,0,0.75)">Opacity of 0.75
       </p>
       <p style="color: rgba(0,0,0,0.5)">Opacity of 0.5
       </p>
       <p style="color: rgba(0,0,0,0.25)">Opacity of 0.25
       </p>
       <p style="color: rgba(0,0,0,0)">Opacity of 0
       </p>
     </div>

In `style` element (`<style>`) within `head` element:

    .opacity-demo {
        background-image: url('images/satin.png');
        background-size: cover;
        color: white;
      }
      .opacity-demo p { font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}

Opacity of 1

Opacity of 0.75

Opacity of 0.5

Opacity of 0.25

Opacity of 0

## Opacity

Example 7.13 - CSS3 text-shadow - Example 7.13 (Without Styles)<div class="opacity-demo"><p style="background-color: rgba(100,100,100,1)">Opacity of 1</p><p style="background-color: rgba(100,100,100,0.75)">Opacity of 0.75</p><p style="background-color: rgba(100,100,100,0.5)">Opacity of 0.5</p><p style="background-color: rgba(100,100,100,0.25)">Opacity of 0.25</p><p style="background-color: rgba(100,100,100,0)">Opacity of 0</p></div>.opacity-demo { background-image: url('http://cscie12.dce.harvard.edu/resources/images/satin.png'); background-size: cover; color: white; } .opacity-demo p { color: #ffffff; font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}

- Markup
- Style
- Display
- Screenshot

     <div class="opacity-demo">
       <p style="background-color: rgba(100,100,100,1)">Opacity of 1
       </p>
       <p style="background-color: rgba(100,100,100,0.75)">Opacity of 0.75
       </p>
       <p style="background-color: rgba(100,100,100,0.5)">Opacity of 0.5
       </p>
       <p style="background-color: rgba(100,100,100,0.25)">Opacity of 0.25
       </p>
       <p style="background-color: rgba(100,100,100,0)">Opacity of 0
       </p>
     </div>

In `style` element (`<style>`) within `head` element:

    .opacity-demo {
       background-image: url('images/satin.png');
       background-size: cover;
       color: white;
     }
     .opacity-demo p { color: #ffffff; font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}

Opacity of 1

Opacity of 0.75

Opacity of 0.5

Opacity of 0.25

Opacity of 0

## CSS Gradients

See Gradient Generator Tool from learnui.design

- linear-gradient
- radial-gradient

## linear-gradient

- linear gradient

Example 7.14 - CSS3 Gradient - Example 7.14 (Without Styles)<div class="highlight1"><p>linear-gradient(0deg,red,black)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight2"><p>linear-gradient(90deg,red,black)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight3"><p>linear-gradient(45deg,black,yellow)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight4"><p>linear-gradient(90deg,red,purple,blue)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight5"><p>linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>.highlight1 { background-image: linear-gradient(0deg,red,black); color: white; line-height: 200%; } .highlight2 { background-image: linear-gradient(90deg,red,black); color: white; line-height: 200%; } .highlight3 { background-image: linear-gradient(45deg,black,yellow); color: white; line-height: 200%; } .highlight4 { background-image: linear-gradient(90deg,red,purple,blue); color: white; line-height: 200%; } .highlight5 { background-image: linear-gradient(90deg, red,orange,yellow,green,blue,indigo,violet); color: white; line-height: 200%; }

- Markup
- Style
- Screenshot

     <div class="highlight1">
       <p>linear-gradient(0deg,red,black)
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="highlight2">
       <p>linear-gradient(90deg,red,black)
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="highlight3">
       <p>linear-gradient(45deg,black,yellow)
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="highlight4">
       <p>linear-gradient(90deg,red,purple,blue)
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="highlight5">
       <p>linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>

In `style` element (`<style>`) within `head` element:

    .highlight1 {
        background-image: linear-gradient(0deg,red,black);
        color: white;
        line-height: 200%;
      }
      .highlight2 {
        background-image: linear-gradient(90deg,red,black);
        color: white;
        line-height: 200%;
      }
      .highlight3 {
        background-image: linear-gradient(45deg,black,yellow);
        color: white;
        line-height: 200%;
      }
      .highlight4 {
        background-image: linear-gradient(90deg,red,purple,blue);
        color: white;
        line-height: 200%;
      }
      .highlight5 {
        background-image: linear-gradient(90deg, red,orange,yellow,green,blue,indigo,violet);
        color: white;
        line-height: 200%;
      }

## radial-gradient

- radial gradient

Example 7.15 - CSS3 Gradient - Example 7.15 (Without Styles)<div class="highlight6"><p>circle, red, black<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight7"><p>ellipse red black<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight8"><p>circle,red,orange,yellow,green,blue,indigo,violet<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight9"><p>ellipse,red,orange,yellow,green,blue,indigo,violet<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>.highlight6 { background-image: radial-gradient(circle,red,blue); color: white; line-height: 200%; } .highlight7 { background-image: radial-gradient(ellipse,red,blue); color: white; line-height: 200%; } .highlight8 { background-image: radial-gradient(circle,red,yellow,green,blue,indigo,violet); color: white; line-height: 200%; } .highlight9 { background-image: radial-gradient(ellipse,red,yellow,green,blue,indigo,violet); color: white; line-height: 200%; }

- Markup
- Style
- Screenshot

     <div class="highlight6">
       <p>circle, red, black
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="highlight7">
       <p>ellipse red black
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="highlight8">
       <p>circle,red,orange,yellow,green,blue,indigo,violet
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>
     <div class="highlight9">
       <p>ellipse,red,orange,yellow,green,blue,indigo,violet
         <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
       </p>
     </div>

In `style` element (`<style>`) within `head` element:

    .highlight6 {
        background-image: radial-gradient(circle,red,blue);
        color: white;
        line-height: 200%;
      }
      .highlight7 {
        background-image: radial-gradient(ellipse,red,blue);
        color: white;
        line-height: 200%;
      }
      .highlight8 {
        background-image: radial-gradient(circle,red,yellow,green,blue,indigo,violet);
        color: white;
        line-height: 200%;
      }
      .highlight9 {
        background-image: radial-gradient(ellipse,red,yellow,green,blue,indigo,violet);
        color: white;
        line-height: 200%;
      }

## Images Essentials

- Use an appropriate format (JPEG for photographs; PNG for wordmarks, illustrations; SVG sometimes)
- If adjusting an image, start with the highest resolution, lowest compression available!
  - Set an appropriate image resolution
  - Set an appropriate compression

## Images and the Web

- Content
- Design

### Images and Markup

Two ways of including images:

1. Markup: `img` element
   - `alt` attribute
   - `height` and `width` attributes

       <img src="images/shield.png"
        alt="Harvard Veritas" height="328" width="281"/>

2. CSS: `background-image` property

       #header {
         background-image: url(images/shield.png);
         background-repeat: no-repeat;
       }

## Graphics Formats for the Web

PNG
  Portable Network Graphic
  `.png`
JPEG
  Joint Photographic Experts Group
  `.jpeg` or `.jpg`
SVG
  Scalable Vector Graphic
  `.svg` and `.svgz`
WebP
  WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
  `.webp`
GIF
  Graphics Interchange Format
  `.gif`

### Other formats

Image formats you might encounter, but aren't super-relevant for the web:

- TIFF
- JPEG 2000 (JP2)
- HEIC (Apple Live Photos)
- RAW
- BMP

## image.jpg or image.JPG or image.jpeg — Does it matter?

### JPG or jpg

- Yes. If your filename is "beach.JPG" then you need to reference it as "beach.JPG" -- having "beach.jpg" in the URL won't work!
- No. As long as the case of your filenames match the case in your URL references you'll be fine.

### jpeg or jpg

- No. Media types can be mapped to multiple file extensions, so generally either `picture.jpg` or `picture.jpeg` filenames are fine.
  And for JPEG images, the media type (also known as MIME type) is "image/jpeg"

## Graphics: Vector and Bitmap

Bitmap | Vector
--- | ---
Original image (PNG): | Original image (SVG):
Magnified (16x) | Magnified (16x)
Bitmap formats: PNG, JPEG, GIF | Vector formats: SVG

## Colors

### RGB Color Space

256 colors in each channel (Red, Green, Blue). Values can be

- decimal numbers (0 to 255)
- hexadecimal numbers (00 to ff)
- percentages (0 to 100%)

## Color Depth

- RGB color is a 24-bit system (16 million colors)
- 8 bits (256 colors) for each channel (red, green, blue).

  28x28x28 = 2(8 + 8 + 8) = 224x = 16,777,216

Bits | Colors
--- | ---
1 | 21 = 2
2 | 22 = 4
3 | 23 = 8
4 | 24 = 16
5 | 25 = 32
6 | 26 = 64
7 | 27 = 128
8 | 28 = 256
16 | 216 = 65,536
24 | 224 = 17 x 106 (millions)
32 | 232 = 4.3 x 109

### RGB

- Three channels specified with decimal values (each channel 0 to 255):
  rgb(50, 150, 0)
- Three channels specified with hexadecimal values (each channel 00 to ff):
  #993333
- Three channels specified with percentage values (each channel 0% to 100%):
  rgb(50%, 10%, 75%)

## Indexed Color Systems

An 8-bit indexed image has a palette of up to 256 colors that the image can contain. Color information is not stored for each pixel, but rather just a reference to which color in the palette.

Palettes

- Exact (if 256 or fewer colors)
- Adaptive (weighted based upon colors in document)
- Web Palette (216 Web Safe Colors)
- System
  - Windows
  - Macintosh

### But what happens to the other colors?

If you take a photo that is saved in an RGB system (millions of colors) and then convert it to an indexed system with 256 colors, what happens?

- dither
- color-shift

## Bitmap images: Size and Quality

Factors that can contribute to image size:

- Dimension
- Compression
- Number of Colors

## Graphics Formats for the Web

Property | GIF Graphics Interchange Format | JPEG Joint Photographic Experts Group | PNG Portable Network Graphic | SVG Scalable Vector Graphics | WebP
--- | --- | --- | --- | --- | ---
Color System | 8 bit indexed (256 colors) | RGB (24 bit; millions of colors) | 8 bit indexed (256 colors) RGB (24 bit; millions of colors) | RGB | RGB
Compression | Lossless Compression (LZW; horizontal repeating units) | "Lossy" Compression (compression optimized for gradual color changes) | Lossless Compression | Lossless Compression | Lossless and Lossy
Other Features | `.gif` file extension Transparency Animation | `.jpg` and `.jpeg` file extensions No Transparency No Animation | `.png` file extension Transparency | `.svg` file extension Vector-based Transparency XML format | 25% smaller than equivalent PNGs and JPEGs. Supports transparency
Typical Uses | Illustrations (logos, icons) Animated banners and icons Images with small dimension | Photographs | Any | Illustrations Graphs, Charts, Maps - 'plain' and 'interactive' | Any
Property | GIF Graphics Interchange Format | JPEG Joint Photographic Experts Group | PNG Portable Network Graphic | SVG Scalable Vector Graphics | WebP
Photograph 250 × 188 px | 29.3 kb | 16.8 kb | 25.8 kb (indexed, 8-bit) | 81.9 kb (RGB, 24-bit) | N/A | 9.6 kb
Illustration 148 × 179 px | 1.47 kb | 6.12 kb | 1.02 kb (indexed, 8-bit) | 1.89 kb (RGB, 24-bit) | 0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit) | 0.724 kb

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.

Illustration image from the original works of David Heitmeyer

## JPEG

Joint Photographic Experts Group

Property | JPEG Joint Photographic Experts Group
--- | ---
Color System | RGB (24 bit; millions of colors)
Compression | "Lossy" Compression (compression optimized for gradual color changes)
Other Features | `.jpg` and `.jpeg` file extensions No Transparency No Animation
Typical Uses | Photographs
Property | JPEG Joint Photographic Experts Group
Photograph 250 × 188 px | 16.8 kb
Illustration 148 × 179 px | 6.12 kb

## JPEG Compression

The amount of compression (quality of image) for a JPEG image can be chosen (from a scale of 0 to 100). The image quality is inversely related to the amount of compression since the compression algorithm is "lossy".

Properties | Image
--- | ---
Quality: 80 34.1 kb |
Quality: 70 26.0 kb |
Quality: 60 22.4 kb |
Quality: 50 17.0 kb |
Quality: 40 14.3 kb |
Quality: 30 6.97 kb |
Quality: 20 4.80 kb |
Quality: 10 3.75 kb |
Quality: 1 3.21 kb |

## JPEG Compression Artifacts

Typically first appears at boundaries in images. Portions of image can also become "blocky".

Schlieren at boundaries:

Blockyness

## GIF

Property | GIF Graphics Interchange Format
--- | ---
Color System | 8 bit indexed (256 colors)
Compression | Lossless Compression (LZW; horizontal repeating units)
Other Features | `.gif` file extension Transparency Animation
Typical Uses | Illustrations (logos, icons) Animated banners and icons Images with small dimension
Property | GIF Graphics Interchange Format
Photograph 250 × 188 px | 29.3 kb
Illustration 148 × 179 px | 1.47 kb

## Palettes

An 8-bit indexed image has a palette of up to 256 colors that the image can contain. Color information is not stored for each pixel, but rather just a reference to which color in the palette.

Palettes

- Exact (if 256 or fewer colors)
- Adaptive (weighted based upon colors in document)
- Web Palette (216 Web Safe Colors)
- System
  - Windows
  - Macintosh

## Palettes: Exact, Adaptive, Web 216

### Exact Palette
Image | Palette
--- | ---
### Adaptive Palette
Image | Palette
### Web 216 Palette
Image | Palette

## Adaptive Palette: Shift and Dither

### Color Shift

Image (16 colors; Color Shift) | Zoom
--- | ---

### Dither

Image (16 colors; Dither) | Zoom
--- | ---

## GIF Images and Bit Depth: Color Shift

Properties | Image | Palette (adaptive)
--- | --- | ---
8 bit 256 colors 46.3 kb |  |
7 bit 128 colors 36.2 kb |  |
6 bit 64 colors 28.9 kb |  |
5 bit 32 colors 21.9 kb |  |
4 bit 16 colors 16.5 kb |  |
3 bit 8 colors 10.9 kb |  |
2 bit 4 colors 7.31 kb |  |
1 bit 2 colors 2.84 kb |  |

## GIF Images and Bit Depth: Dither

Properties | Image | Palette (adaptive)
--- | --- | ---
8 bit 256 colors 64.9 kb |  |
7 bit 128 colors 52.3 kb |  |
6 bit 64 colors 43.4 kb |  |
5 bit 32 colors 34.7 kb |  |
4 bit 16 colors 26.7 kb |  |
3 bit 8 colors 18.6 kb |  |
2 bit 4 colors 14.2 kb |  |
1 bit 2 colors 5.86 kb |  |

## Compression for Indexed GIF

GIF LZW compression operates on horizontal blocks of the same color. Here are two images that are identical except for a 90 degree rotation. The vertical stripe GIF image is nearly twice as large as the horizontal stripe GIF image. The PNG images are the same size.

Format | Horizontal Stripes | Vertical Stripes
--- | --- | ---
GIF | 471 bytes | 911 bytes
PNG | 232 bytes | 221 bytes

## Compression and Dithering

A purple shade was created by alternating red and blue pixels.
32× magnification:

200×200px Image, Dithered and Solid
Image Format | Dithered Grid | Solid
PNG | 225 bytes | 209 bytes
GIF | 601 bytes | 303 bytes

## Transparency

With PNG images, a color in the palette can be designated as "transparent". This lets any background colors or background images show through the transparent portions.

Star Image

Background Image
(satin.png)

Format | Background Color (gray) | Background Image satin.png
--- | --- | ---
GIF No transparency |  |
GIF White is transparent |  |
GIF Blue is transparent |  |
PNG No transparency |  |
PNG White is transparent |  |
PNG Blue is transparent |  |

## GIF Animation

- GIF supports animation
- giphy.com

## PNG

Property | PNG Portable Network Graphic
--- | ---
Color System | 8 bit indexed (256 colors) RGB (24 bit; millions of colors)
Compression | Lossless Compression
Other Features | `.png` file extension Transparency Animation through non-standard extension
Typical Uses | Any
Property | PNG Portable Network Graphic
Photograph 250 × 188 px | 25.8 kb (indexed, 8-bit) | 81.9 kb (RGB, 24-bit)
Illustration 148 × 179 px | 1.02 kb (indexed, 8-bit) | 1.89 kb (RGB, 24-bit)

## Compression for Indexed PNG

PNG images use a different compression algorithm than GIF. Note that for PNG, the vertical and horizontal striped images are the same size.

Format | Horizontal Stripes | Vertical Stripes
--- | --- | ---
PNG | 232 bytes | 221 bytes
GIF | 471 bytes | 911 bytes

## Compression and Dithering

A purple shade was created by alternating red and blue pixels.
32× magnification:

200×200px Image, Dithered and Solid
Image Format | Dithered Grid | Solid
PNG | 225 bytes | 209 bytes
GIF | 601 bytes | 303 bytes

## Transparency

With PNG images, a color in the palette can be designated as "transparent". This lets any background colors or background images show through the transparent portions.

Star Image

Background Image
(satin.png)

Format | Background Color (gray) | Background Image satin.png
--- | --- | ---
GIF No transparency |  |
GIF White is transparent |  |
GIF Blue is transparent |  |
PNG No transparency |  |
PNG White is transparent |  |
PNG Blue is transparent |  |

## SVG

Property | SVG Scalable Vector Graphics
--- | ---
Type | Vector
Color System | RGB
Compression | Lossless Compression
Other Features | `.svg` file extension Transparency XML format Uses CSS properties!
Typical Uses | Illustrations (logos, icons) Vector Art
Illustration 300x300px | 575 bytes compressed; 1.7 kb uncompressed

## Basic SVG Shapes

Basic Shapes in SVG 1.1

SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect x="100" y="100" height="30" width="70" rx="10" ry="10"
        style="fill:green; stroke: black;"/>
      <circle cx="50" cy="20" r="15" style="fill:red; stroke: black;"/>
      <ellipse cx="60" cy="75" rx="15" ry="40" fill="yellow" stroke="black"/>
      <line x1="10" y1="3" x2="30" y2="70" stroke-width="5" stroke="magenta"/>
      <polyline fill="none" points="160,15,170,25,180,15,190,25,200,15,210,25,220,15"
        stroke="blue" stroke-width="3"/>
      <polygon points="100,80,150,40,200,60" fill="orange" stroke="black"/>
      <path d="M0 0 C 10 20, 30 20, 40 0" style="stroke: black; stroke-width: 3px; fill: transparent"  transform="translate(-20,-30)"/>
    </svg>

## United States Flag

## Harvard Division of Continuing Education Shield

## Massachusetts Map

Election results by town.

## Icons

## SVG - Increasing Importance in the Future

- Vector (size and resolution advantages)
- HTML5 `canvas` element
- CSS control
  - CSS stylesheets
  - SVG style attributes same/similar to CSS properties

## SVG and D3 JS Library

D3.js
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

## WebP

- WebP

358 kb WebP vs 538 kb JPEG

1920 x 1280 px

## Comparison of Image Formats

### Graphics Formats for the Web

Property | GIF Graphics Interchange Format | JPEG Joint Photographic Experts Group | PNG Portable Network Graphic | SVG Scalable Vector Graphics | WebP
--- | --- | --- | --- | --- | ---
Color System | 8 bit indexed (256 colors) | RGB (24 bit; millions of colors) | 8 bit indexed (256 colors) RGB (24 bit; millions of colors) | RGB | RGB
Compression | Lossless Compression (LZW; horizontal repeating units) | "Lossy" Compression (compression optimized for gradual color changes) | Lossless Compression | Lossless Compression | Lossless and Lossy
Other Features | `.gif` file extension Transparency Animation | `.jpg` and `.jpeg` file extensions No Transparency No Animation | `.png` file extension Transparency | `.svg` file extension Vector-based Transparency XML format | 25% smaller than equivalent PNGs and JPEGs. Supports transparency
Typical Uses | Illustrations (logos, icons) Animated banners and icons Images with small dimension | Photographs | Any | Illustrations Graphs, Charts, Maps - 'plain' and 'interactive' | Any
Property | GIF Graphics Interchange Format | JPEG Joint Photographic Experts Group | PNG Portable Network Graphic | SVG Scalable Vector Graphics | WebP
Photograph 250 × 188 px | 29.3 kb | 16.8 kb | 25.8 kb (indexed, 8-bit) | 81.9 kb (RGB, 24-bit) | N/A | 9.6 kb
Illustration 148 × 179 px | 1.47 kb | 6.12 kb | 1.02 kb (indexed, 8-bit) | 1.89 kb (RGB, 24-bit) | 0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit) | 0.724 kb

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.

Illustration image from the original works of David Heitmeyer

## Cartoon Art

GIF | PNG | JPEG | SVG | WebP
--- | --- | --- | --- | ---
GIF 1,511 bytes | PNG; 8 bit 1,031 bytes | JPEG (Quality 100) 14,660 bytes | SVG 575 bytes (compresssed) | WebP 725 bytes
| PNG; 24 bit 1,944 bytes | JPEG (Quality 6) 1,530 bytes

Original image from the works of David P. Heitmeyer

## Working with Images

### Graphics Tools

- Pixlr (Web, Desktop, Mobile)
- Adobe
  - Installing Adobe Creative Cloud software, including Acrobat, Photoshop, etc.
  - Adobe Photoshop
  - Adobe Illustrator
- Gimp (Open Source)
- Corel
  - PaintShop
  - CorelDRAW
- Gravit
- Acorn
- Affinity Photo (Mac Only)
- Sketch

## Start with Original PSD/AI/etc. or High Resolution 24-bit PNG

- If you contract out: get the original/source files!
  Keep track of them!
  Make sure others know!
- Always start with the original file format (e.g. PSD, AI, etc.) or high-resolution 24-bit PNG.
- Size images accordingly!
  - Don't shrink full-resolution images by using "height" and "width" CSS
  - Don't enlarge images from smaller ones -- you can only go one way (larger to smaller)

## Elements of User Experience

- The Elements of User Experience: User-Centered Design for the Web
- Planes Poster - Detailed
- The Elements of User Experience -- Harvard Library Online Resource

## 5 Planes in More Detail

- The Elements of User Experience: User-Centered Design for the Web
- Simple Planes Poster

## Planning and Designing a Site: Resources

- Williams, Robin. The Non-designer's Design Book : Design and Typographic Principles for the Visual Novice. Fourth ed. 2015.

  Harvard Library: The non-designer's design book by Robin Williams

- Krug, Steve. Don't Make Me Think, Revisited : A Common Sense Approach to Web Usability. Third ed. 2014.

  Harvard Library - Online Resource

## Strategy

Clear and explicit understanding of

- What does the company/organization want from the site? What is "success"?
- What do the users want from the site?

## Who are our Users?

- Most sites get a variety of users
- Some audiences will be "primary", others "secondary"
- What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.

## What Audiences can be identified?

### University of Colorado

### Dell

## Audience(s)

- Who are they?
- What are their goals?
  - their information needs
  - tasks/actions they are performing

### Know Your Audience

- Be clear on who you are building for. Understand their needs.
- User testing, market research, focus groups.
- Feedback from users. Pay attention to what your users do, not just what they say.
- Keep in mind that as number of target audiences increase, difficulty of web design increases.

## Audiences for an Academic Department

- Undergraduate Students
  - Concentrators (Majors)
  - Potential concentrators
  - Non-concentrators
- Graduate Students
- Potential Graduate Students
- Faculty
  - Current
  - Potential
- Researchers
- Public

## Audiences for a Fitness Club

- Members
  - Variety of members - personal training, injury recovery, recreational, etc.
  - Swim Lessons and Swim Team
- Potential Members
  - For a variety of reasons

Additional Goal:

- Promote Training Program and Philosophy

## Scope

Define content or functionality requirements.

What's "in" and what's "out" -- or at least what's "later".

Start broad, then narrow and refine.

## Content

Questions to ask about content:

- Does it fit purpose of site?
- Does it suit the audience?
- Would your users find this useful?

### Approaching a Project

- What content already exists in web or other media types (brochures, pamphlets, statements, etc.).
  - Adapt (or re-adapt) it for the web
- What content would be good to develop for the site?
  - Create it for the web
- Define incremental goals to avoid "scope creep"
  - Initial Phase
  - Additional Phases

## Think About the User

## Structure

## Structuring Content

From Information Architecture for the World Wide Web (available through Harvard Libraries):

information architecture defined:

1. The structural design of shared information environments.
2. The combination of organization, labeling, search, and navigation systems within web sites and intranets.
3. The art and science of shaping information products and experiences to support usability and findability.
4. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

### Organize, Label, (Navigate)

- Organize and Categorize
- Label
- Navigate

## Organize

- Strategy-driven: Top-down
- Content-driven: Bottom-up

### Plan for Growth

### How to?

- Sticky-notes or index cards
- whiteboard or wall

## Structural Models

- Hierarchical
- Sequential
- Organic

## Hierarchical

### Library of Congress Classification

"Q" - Science
"QC" - Physics

## Biological

- Kingdom
  - Phylum
    - Class
      - Order
        - Family
          - Genus
            - Species

Catalog of Life

## Open Directory Project, Yahoo! Categories

## Too deep or too shallow?

Deep | Shallow

## Sequential

- Useful when "workflow" is important in web applications.

- When order is important or part of presentation.

## Organic

Wikipedia.com

## Site Architecture

- Topics
- Audience
- Task-Oriented
- Search
- Internal Organization

## Label

- Know your audience
- Test your labels (ask your audience)
  - Card Sort - physical or online, e.g. Optimal Sort
  - Ask questions
    - Where can I get a driver for my HP ENVY 5540?
    - What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?
    - What IT degree programs are available?

## Labels - Are there conventions?

### Categories and Labels from News Sites

CNN

Fox News

ABC News

CBS

New York Times

NPR

BBC

NBC

## Skeleton

## Page Components

- Header
- Navigation
- Content
- Footer

## Wireframes and Sketches - "Low" to "High" Fidelity

### Sketches

### Wireframes

### Prototypes

## Navigation Systems

- Where am I?
- Where can I go?
  - What is close by?
  - What is further away?
- Where have I been?

### Don't Make Me Think: Navigation

- it tells us what's here
- it tells us how to use the site
- it gives us confidence in the people who built it

## Surface

## F-Pattern

F-Shaped Pattern for Reading Web Content

## Non-Designer's Design Book

The non-designer's design book by Robin Williams

## Non-Designer's Design Book

The non-designer's design book by Robin Williams

## Colors

- Non-Designer's Design Book: Chapter 7, Design with Color

Creating Color Palettes:

- paletton.com
- Adobe Color CC

## Home Page -- Don't Make Me Think (Steven Krug)

- What is this?
- What do they have here?
- What can I do here?
- Why should I be here and not somewhere else?

## Don't make me think

Don't make me think, revisited : a common sense approach to Web usability by Steve Krug

### Three Princples of Usability

- Don't make me think.
- It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.
- Get rid of half the words on each page, then get rid of half of what is left.