Web Design

Chapter 5   Beautiful Styles with CSS3

∗ HTML5 animations:

http://www.hongkiat.com/blog/48-excellent-html5-demos/

(1) Enhancing navigation buttons

∗ Structural pseudo-class of CSS

▸ Selecting elements without using id or class, e.g.:

:link
:visited
:hover
:active
:focus
:root
:only-child
:empty
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:last-child

▸ Example of navigation buttons:

✶ Navigation buttons are usually implemented using <li> tags
✶ The CSS child selector may be used to select certain children, e.g.:
HTMLCSS3
<nav>
  <ul>
    <li><a href="#">WHY?</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">OFFLINE</a></li>
    <li><a href="#">REDEMPTION</a></li>
    <li><a href="#">VIDEOS/CLIPS</a></li>
    <li><a href="#">QUIZ</a></li>
  </ul> 
</nav>
...
nav li:first-child {
  margin-left: 0;
}
nav li:last-child {
  margin-right: 0;
}

∗ The nth selector of CSS3

▸ Suppose we add class internal to some navigation buttons:

<ul>
  <li class="internal"><a href="#">WHY?</a></li>
  <li><a href="#">ABOUT</a></li>
  <li class="internal"><a href="#">OFFLINE</a></li>
  <li class="internal"><a href="#">REDEMPTION</a></li>
  <li class="internal"><a href="#">VIDEOS/CLIPS</a></li>
  <li class="internal"><a href="#">QUIZ</a></li>
</ul>

▸ Select odd items

nav ul li:nth-child(odd) a {
  color: red;
}

▸ Select even items

nav ul li:nth-child(even) a {
  color: red;
}

▸ Select the 3rd, 6th, 9th ... items (n starts from 1)

nav ul li:nth-child(3n) a {
  color: red;
}

▸ Select the first, 4th, 7th, ... items

nav ul li:nth-child(3n-2) a {
  color: red;
}

▸ Select the 3rd, 4th, 5th, 6th, ... items of the internal class

nav ul li.internal:nth-of-type(n+2) a {
  color: red;
}

▸ Select non internal class items

nav ul li:not(.internal) a {
  color: red;
}

∗ Exercise:

▸ Save oscar4-3.html and oscar4-3.css as oscar5-1.html and oscar5-1.css, respectively, and modify as follows:

▸ HTML: update the CSS link <link rel="stylesheet" href="css/oscar5-1.css">

▸ CSS: set the color of the even links to red, and change to one column if the viewport width is less than 800px

nav li a {
  ...
}

nav ul li:nth-child(even) a {
  color: red;
}

...

@media screen and (max-width: 800px) {
   ...

  div#wrapper { 
    ...
  }

  nav li { 
    float: none;  
  }

  div#content { 
    ...
  }
...
}
nth1
nth2

(2) Web page aesthetics

∗ Web page beautification

▸ In the early stage: mostly accomplished using images

✶ Shortcomings: more bandwidth required, image re-drawing required for different designs, difficult to achieve responsive web design

▸ Now: mostly accomplished using CSS

∗ Text shadows

▸ E.g., bottom-right shadow: text-shadow: 1px 1px 1px #cccccc;

Right offset, bottom offset, blur distance, color
✶ RGB or HSL formats may be used to represent colors
✶ E.g.: uppler-left shadow (no blur) with color
text-shadow: -1px -1px #cccccc;

▸ E.g.: multiple shadows

text-shadow: 0 1px #ffffff, 4px 4px 0 #dad7d7;

∗ Background gradient

▸ Linear gradient

✶ Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
✶ Top to bottom
background: -moz-linear-gradient(red, blue);
✶ Upper-left to bottom-right
background: -moz-linear-gradient(bottom right, red, blue);
✶ Right to left
background: -moz-linear-gradient(180deg, red, blue);
✶ Multiple colors
background: -moz-linear-gradient(red, green, blue);
✶ With transparency
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
✶ Repeated linear gradient
background: -moz-repeating-linear-gradient(red, yellow, green 20%);

▸ Radial gradient

✶ Syntax:
background: radial-gradient(center, shape size, start-color, ..., last-color);
✶ Evenly spaced
background: -moz-radial-gradient(red, green, blue);
✶ Proportionally spaced
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
✶ Repeated radial gradient
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);

CSS gradient generator

∗ Background gradient patterns

▸ Example: the gradient pattern of body

background: -moz-repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);
or
background-color:white; 
background-image: 
  radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), 
  repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, 
  hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, 
  transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, 
  hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, 
  transparent 50px); 
background-size: 30px 30px, 90px 90px; 
background-position: 0 0;

CSS3 background pattern gallery

∗ Exercise:

▸ Save oscar5-1.html and oscar5-1.css as oscar5-2.html and oscar5-2.css, respectively, and modify as follows:

▸ HTML: update the CSS link <link rel="stylesheet" href="css/oscar5-2.css">

▸ CSS:

✶ Add shadows to "EVERY YEAR"
...

#content h1 {
  font-size: 3em;
  text-shadow: 0.05em  0.05em 0 #dad7d7;
}
#content h1 span {
  color: #757474;
  font-size: 0.6em;
  text-shadow: none;
}

...
✶ Box shadows
# Add shadows to the images in aside
aside img.poster {
  ...
  box-shadow: 0 3px 5px #222222;
}
# Add inner shadows to <body>
body {
  padding: 0;
  box-shadow: inset 10px 10px 10px #999999, inset -10px -10px 10px #999999;
}
✶ Background gradient (may need prefix): add gradients to body, aside, and #content
body {
  padding: 0;
  box-shadow: inset 10px 10px 10px #999999, inset -10px -10px 10px #999999;
  background-image:
    radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
    repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,transparent 50px);
    background-size: 30px 30px, 90px 90px;
    background-position: 0 0;
}

...

div#content {
  ...
  background: -moz-radial-gradient(20px 20px, circle cover, hsla(9,69%,85%,0.5) 0%, hsla(9,76%,63%,1) 50%, hsla(10,98%,46%,1) 51%, hsla(24,100%,50%,1) 75%, hsla(10,100%,39%,1) 100%);    /* Firefox */
  background: -webkit-radial-gradient(20px 20px, circle cover, hsla(9,69%,85%,0.5) 0%, hsla(9,76%,63%,1) 50%, hsla(10,98%,46%,1) 51%, hsla(24,100%,50%,1) 75%, hsla(10,100%,39%,1) 100%);    /* Google chrome */
  background: radial-gradient(20px 20px, circle cover, hsla(9,69%,85%,0.5) 0%, hsla(9,76%,63%,1) 50%, hsla(10,98%,46%,1) 51%, hsla(24,100%,50%,1) 75%, hsla(10,100%,39%,1) 100%);
}

...

aside {
  ...
  background: linear-gradient(to right, #888888, #ffffff);
}

...
backgroundGradient1