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

CSS Flexbox and Grid

Grid

Flexbox

CSS Grid

Grid Terms - Lines, Cells, Areas

Lines
grid line

Cells
grid cell

Areas
grid area

Column and Row Line Numbers
grid line numbers

Grid Examples...

Responsive Page Layouts

Site is "responsive" to different devices.

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 wide screen

responsive medium screen

responsive small screen

CSS Normalize and Reset

Two approaches:

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.

CSS Normalize

normalize css in use

Navigation Systems

Harvard College

Breadcrumb, Clamshell, Tab / Horizontal List, Dropdown

harvard university navigation

Navigation and Lists

Markup as a list; CSS to style.

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>

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


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

display

Full list for the American League:

Lists as Side Navigation

Key points:

Default styling:
navigation lists

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>

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

navigation lists

Lists as Navigation

Nested list styled as "clamshell" navigation.

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>

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

lists as navigation

Default styling of nested list:
lists as navigation

Dropdown Menus

Key points:

American League dropdown

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>

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>

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

Dropdown Menus: Vertical

dropdown

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>

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

screenshot

screenshot

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>

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>

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

rounded box

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>

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

border radius

CSS Shadows

shadows
Photo by D Sharon Pruitt

box-shadow

boxshadow

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>

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

box shadow

Text Shadow

textshadow

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>

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

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

demo of opacity

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>

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

 

text shadow

Opacity

demo of 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>

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

 

text shadow

CSS Gradients

See Gradient Generator Tool from learnui.design

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

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

gradient

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>

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

gradient