# Session 07 - CSS, Part 4

Harvard Extension School
Fall 2021

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

### Topics

1. CSS Flexbox and Grid
2. CSS Grid
3. Responsive Page Layouts
4. Responsive Page Layouts
5. CSS Normalize and Reset
6. Navigation Systems
7. Navigation and Lists
8. Lists as Side Navigation
9. Dropdown Menus
10. Breadcrumb Navigation
11. CSS Rounded Borders
12. CSS Shadows
13. CSS Gradients

Session 07 - CSS, Part 4, slide1
CSS Flexbox and Grid, slide2
CSS Grid, slide3
Grid Examples..., slide4
Responsive Page Layouts, slide5
Responsive Page Layouts, slide6
Responsive Web Design: CSS Media Query, slide7
CSS Normalize and Reset, slide8
CSS "Reset", slide9
CSS Normalize, slide10
Navigation Systems, slide11
Harvard College, slide12
Navigation and Lists, slide13
display: none, slide14
Lists as Side Navigation, slide15
Lists as Navigation, slide16
Dropdown Menus, slide17
Dropdown Menus, slide18
Dropdown Menus: Vertical, slide19
Breadcrumb Navigation, slide20
Breadcrumb Navigation, slide21
CSS Rounded Borders, slide22
CSS Shadows, slide23
box-shadow, slide24
Text Shadow, slide25
Text Shadow, slide26
Opacity - RGBA - red, green, blue, alpha, slide27
Opacity, slide28
CSS Gradients, slide29
linear-gradient, slide30
radial-gradient, slide31

Presentation contains 31 slides

- img
- img
- img
- img
- img

## CSS Flexbox and Grid

### Grid

- Two axes
- Layouts and more complex layouts
- Overlapping items

### Flexbox

- One primary axis
- Basic layouts
- Easier than "Grid"

## CSS Grid

- CSS Grid Layout (MDN)
- Basic Concepts of Grid Layout
- Getting Started with CSS Grid (CSS-Tricks)
- Complete Guide to Grid (CSS-Tricks)

### Grid Terms - Lines, Cells, Areas

Lines

Cells

Areas

Column and Row Line Numbers

## Grid Examples...

- Two columns
- Three columns
- Responsive

## Responsive Page Layouts

Site is "responsive" to different devices.

## Responsive Page Layouts

CSS media query:

    /* Small screens; no query needed */
    /*

    */

    /* Larger phone/tablet screens */
    @media (min-width: 576px) { /* specific rules go here */ }

    /* Medium screens */
    @media (min-width: 768px) { /* specific rules go here */ }

    /* Larger screens */
    @media (min-width: 992px) { /* specific rules go here */ }

    /* Extra large screens */
    @media (min-width: 1200px) { /* specific rules go here */ }

## Responsive Web Design: CSS Media Query

Media queries can be used to include style sheets (`media` attribute) or in CSS rules (`@media` rule) or `@import` statement

Link to stylesheet

    <link rel="stylesheet"
      media="screen and (max-width: 992px)"
      href="site-large.css" />

CSS rule

    @media screen (min-width: 992px) {
      /* rules for large screens */

    }

- Responsive Web Design by Ethan Marcotte on A List Apart
- Live Example

## CSS Normalize and Reset

Two approaches:

- CSS Reset: give yourself a "blank slate" to build upon; that is, effectively remove all browser default styles.
- CSS Normalize: give yourself consistency across browsers.

## CSS "Reset"

Sometimes it is useful to use a CSS stylesheet to "reset" styling for all elements. This attempts to start your styling with a "blank slate" instead of the browser defaults.

- Eric Meyer's Reset CSS
- Andy Bell's "A Modern CSS Reset"

- Basic Markup
- Basic Markup with Eric Meyer CSS Reset
- Basic Markup with Andy Bell "A Modern CSS Reset"

## CSS Normalize

- normalize.css project
- normalize.css

- HTML Demo Page
- HTML Demo Page with normalize.css

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

## CSS Rounded Borders

### CSS3 border-radius

Example 7.9 - CSS3 border-radius - Example 7.9<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<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<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<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<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<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<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%;
        }