Session 06 - CSS and Image
Examples

• Example 6.1 - display: none;  
  <ul><li>American League <ul><li id="ale">East <ul><li>Baltimore</li><li>Boston</li><li>New York</li><li>Toronto</li><li>Tampa Bay</li></ul></li><li id="alc">Central <ul><li>Chicago</li><li>Cleveland</li><li>Detroit</li><li>Kansas City</li><li>Minnesota</li></ul></li><li id="alw">West <ul><li>Los Angeles</li><li>Oakland</li><li>Texas</li><li>Seattle</li></ul></li></ul></li></ul>#ale { display: none; } #alw { display: none; } * { font-family: arial,helvetica,sans-serif; }
• Example 6.2 - visibility: hidden;  
  <ul><li>American League <ul><li id="ale">East <ul><li>Baltimore</li><li>Boston</li><li>New York</li><li>Toronto</li><li>Tampa Bay</li></ul></li><li id="alc">Central <ul><li>Chicago</li><li>Cleveland</li><li>Detroit</li><li>Kansas City</li><li>Minnesota</li></ul></li><li id="alw">West <ul><li>Los Angeles</li><li>Oakland</li><li>Texas</li><li>Seattle</li></ul></li></ul></li></ul>#ale { visibility: hidden; } #alw { visibility: hidden; } * { font-family: arial,helvetica,sans-serif; }
• Example 6.3 - list-style: none;  
  <ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; }
• Example 6.4 - list-style: none;  
  <ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; padding-left: 0; } ul#extglobalnav li { display: inline; padding-left: 2em; }
• Example 6.5 - list-style: none;  
  <ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; padding-left: 0; } ul#extglobalnav li { display: inline-block; width: 8em; border: thin solid black; margin-right: 3px; text-align: center }
• Example 6.6 - simple list  
  <ul><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul>
• Example 6.7 - inline list items  
  <ul id="extnav"><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul>ul#extnav { list-style: none; } ul#extnav li { display: inline-block; }
• Example 6.8 - Inline List Items  
  <ul id="extnav"><li><a href="#">Academics</a></li><li class="active"><a href="#">Tuition and Enrollment</a></li><li><a href="#">Resources and Policies</a></li><li><a href="#">Inside Extension</a></li></ul>* { background-color: white; } ul#extnav { list-style: none; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; color: #1e1e1e; background-color: white; margin-top: 1em; } ul#extnav li { display: inline-block; margin: 0; padding: 0; } ul#extnav a { padding: 0.5em; margin-right: 0; background-color: white; border-right: 1px solid black; } ul#extnav li:last-child a { border-style: none; } ul#extnav a:link, ul#extnav a:visited { color: black; text-decoration: none; } ul#extnav a:hover { color: #a51c30; text-decoration: underline; } ul#extnav .active { background-color: #f5f5f8;} ul#extnav .active a:link, ul#extnav .active a:visited, ul#extnav .active a:hover, ul#extnav .active a:active { background-color: #f5f5f8; color: #a51c30; text-decoration: none; }
• Example 6.9 - lists as navigation  
  <div 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></div>#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;}
• Example 6.10 - Nested lists for 'clamshell' navigation  
  <div 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></div>#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 a { list-style: none; padding-left: 1.5em; font-size: 90%; font-weight: normal; } #navclam ul.collapse { display: none; }
• Example 6.11 - drop down menu  
  <ul id="dropdown1"><li><a href="#">AL East</a><ul><li><a href="#">Baltimore</a></li><li><a href="#">Boston</a></li><li><a href="#">New York</a></li><li><a href="#">Toronto</a></li><li><a href="#">Tampa Bay</a></li></ul></li><li><a href="#">AL Central</a><ul><li><a href="#">Chicago</a></li><li><a href="#">Cleveland</a></li><li><a href="#">Detroit</a></li><li><a href="#">Kansas City</a></li><li><a href="#">Minnesota</a></li></ul></li><li><a href="#">AL West</a><ul><li><a href="#">Los Angeles</a></li><li><a href="#">Oakland</a></li><li><a href="#">Texas</a></li><li><a href="#">Seattle</a></li></ul></li></ul>ul { padding: 0; margin: 0; list-style: none; } li { float: left; position: relative; width: 10em; } li ul { display: none; top: 1em; left: 0; } li:hover ul { display: block; }
• Example 6.12 - drop-down menu  
  <ul id="dropdown2"><li><a href="#">AL East</a><ul><li><a href="#">Baltimore</a></li><li><a href="#">Boston</a></li><li><a href="#">New York</a></li><li><a href="#">Toronto</a></li><li><a href="#">Tampa Bay</a></li></ul></li><li><a href="#">AL Central</a><ul><li><a href="#">Chicago</a></li><li><a href="#">Cleveland</a></li><li><a href="#">Detroit</a></li><li><a href="#">Kansas City</a></li><li><a href="#">Minnesota</a></li></ul></li><li><a href="#">AL West</a><ul><li><a href="#">Los Angeles</a></li><li><a href="#">Oakland</a></li><li><a href="#">Texas</a></li><li><a href="#">Seattle</a></li></ul></li></ul>ul { padding: 0; margin: 0; list-style: none; } li { float: left; position: relative; width: 10em; } li ul { display: none; top: 1.7em; left: 0; } li > ul { top: auto; left: auto; } 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; }
• Example 6.13 - drop-down/out menu  
  <ul id="dropdown3"><li><a href="#">AL East</a><ul><li><a href="#">Baltimore</a></li><li><a href="#">Boston</a></li><li><a href="#">New York</a></li><li><a href="#">Toronto</a></li><li><a href="#">Tampa Bay</a></li></ul></li><li><a href="#">AL Central</a><ul><li><a href="#">Chicago</a></li><li><a href="#">Cleveland</a></li><li><a href="#">Detroit</a></li><li><a href="#">Kansas City</a></li><li><a href="#">Minnesota</a></li></ul></li><li><a href="#">AL West</a><ul><li><a href="#">Los Angeles</a></li><li><a href="#">Oakland</a></li><li><a href="#">Texas</a></li><li><a href="#">Seattle</a></li></ul></li></ul>ul { padding: 0; margin: 0; list-style: none; } li { position: relative; width: 10em; } 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: 10em; 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; }
• Example 6.14 - Nested lists for 'breadcrumb' navigation  
  <div id="breadcrumb"><ul><li><a href="http://dmoz.org/">Top</a><ul><li><a href="http://dmoz.org/Science/">Science</a><ul><li><a href="http://dmoz.org/Science/Biology/">Biology</a><ul><li><a href="http://dmoz.org/Science/Biology/Genetics/"> Genetics</a><ul><li><a href="http://dmoz.org/Science/Biology/Genetics/Genomics/"> Genomics</a><ul><li><span>Pharmacogenetics</span></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div>/* Order of pseudo-"a" elements: LoVe HAte (Link, Visited, Hover, Active */ #breadcrumb a:link , #breadcrumb a:visited , #breadcrumb a:hover , #breadcrumb a:active , #breadcrumb li span { color: navy; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; padding: 0.5em; text-decoration: none; } #breadcrumb a:hover { text-decoration: underline; } #breadcrumb li span { color: black; } #breadcrumb { background-color: #ddd; } #breadcrumb ul { display: inline; margin-left: 0; padding-left: 0; } #breadcrumb ul li { display: inline; } #breadcrumb ul ul li { background-image: url(images/arrow.gif); background-position: left; background-repeat: no-repeat; padding-left: 25px; }
• Example 6.15 - Nested lists for 'breadcrumb' navigation  
  <div id="breadcrumbf"><ul><li><a href="http://dmoz.org/">Top</a></li><li><a href="http://dmoz.org/Science/">Science</a></li><li><a href="http://dmoz.org/Science/Biology/">Biology</a></li><li><a href="http://dmoz.org/Science/Biology/Genetics/">Genetics</a></li><li><a href="http://dmoz.org/Science/Biology/Genetics/Genomics/">Genomics</a></li><li><span>Pharmacogenetics</span></li></ul></div>/* 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; }
• Example 6.16 - CSS3 border-radius  
  <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; }
• Example 6.17 - CSS3 box-shadow  
  <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 { -moz-box-shadow: 5px 5px #99cccc; -webkit-box-shadow: 5px 5px #99cccc; box-shadow: 5px 5px #99cccc; }
• Example 6.18 - CSS3 text-shadow  
  <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) }
• Example 6.19 - CSS3 text-shadow  
  <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'); color: white; } .opacity-demo p { font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}
• Example 6.20 - CSS3 Gradient  
  <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,white,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,white,blue); color: white; line-height: 200%; } .highlight5 { background-image: linear-gradient(90deg, red,orange,yellow,green,blue,indigo,violet); color: white; line-height: 200%; }
• Example 6.21 - CSS3 Gradient  
  <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%; }