face: border-radius: 0px; 
              left eye: border-radius: 0px; 
              right eye: border-radius: 0px; 
              base white: border-radius: 0px; 
              mouth: border-radius: 0px; 
              nose: border-radius: 0px; 
              left black eye: border-radius: 0px; 
              right black eye: border-radius: 0px; 
            

  color: rgba(255, 255, 255, 1); 
  background: rgba(0, 0, 0, 0.5); 

color: hsla(
  128, 
  74%, 
  33%, 
  1.00 
        

☞ Experiment more: HSL Color Picker

background-image: linear-gradient(to bottom,
  #f95a61 0%, 
  #ffffff 50%, 
  #2a4758 100%); 

background-image: radial-gradient(center, circle cover, red, #000 40%);
                                                        

caniuse.com: gradients

More reading: MDN: linear-gradient

text-shadow: 
  rgba(64, 64, 64, 0.5) 
  0px 
  0px 
  0px; 

box-shadow: 
  rgba(0, 0, 128, 0.25) 
  0px 
  0px 
  0px; 
            

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: turquoise;
  -webkit-text-stroke-width: 0.00px; 

  text-align: left;
  text-decoration: overline pink wavy;
  text-transform: uppercase;
  text-indent: 100px;
}

1. Start with this HTML. You can view page source and copy it into a local file or a new page on jsbin.com.
2. Change the font size and alignment of the text to be bigger and centered.
3. Add a stroke to your logo text, using HSLA to specify the fill and stroke colors.
4. Use RGBA to specify the background color of the container and add some padding.
5. Round the corners of the container.
6. Generate a gradient for the container. You can use this tool if you'd like.
7. Add a shadow to your text.
8. Add a shadow on the box.

1. Start with this HTML. You can view page source and copy it into a local file or a new page on jsbin.com.
2. Replace the text with a quote that motivates you.
3. Use a custom font for the quote text.
4. Find a new image. You can use pixabay.com to find Public Domain licensed images.
5. Use filter to change how the image looks.
6. If you have time left, try using properties you learned earlier as well.

• Doctor Who - Spinning Tardis
• CSS3 Submarine
• Star Wars: The Force Awakens
• 3D Solar System

See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.

Define a custom CSS3 animation (in this case, named "pulse") using CSS3 @keyframes:

      @keyframes pulse {

        from {
         opacity: 0.0;
         font-size: 100%;
        }

        to {
         opacity: 1.0;
         font-size: 200%;
        }

      }

Apply the CSS animation you defined to a specific HTML element.

<div>Pulse!</div>

    div {
      animation-name: pulse;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in;
      animation-direction: alternate;
    }
    

@keyframes rainbow {
    0%   {
      background-color: red;
      width:500px;
    }
    25%  {
      background-color: yellow;
      width: 200px;
    }
    50%  {
      background-color: blue;
      width: 300px
    }
    100% {
      background-color: green;
      width: 200px;
    }
}


div {
  animation-name: rainbow;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-direction: alternate;
}

#box.left {
  margin-left: 0;
}

#box.right {
  margin-left: 1000px;
}

• Click Left => document.getElementById('box').className = 'left';
• Click Right => document.getElementById('box').className = 'right';

#box {
  transition: margin-left 1s ease-in-out;
}

• Click Left => document.getElementById('box').className = 'left';
• Click Right => document.getElementById('box').className = 'right';

      You can transform this div by hovering over it!

#transform-example {
  transform: rotateZ(5deg);
  transition: transform 2s ease-in-out;
}

#transform-example:hover {
  transform: rotateZ(-5deg);
}

Other Transform Values

• translate – translate element along X, Y, or Z axes (in deg, rad, turn, or %)
• scale – scale size of element along X or Y axes (in integers – e.g. 2.0 for 200% scale)
• rotate – rotate element along X, Y, or Z axes (in deg, rad, or turn)
• skew – skew element along X or Y axes (in deg or rad)
• perspective - set perspective from which element is viewed (in px)
• Additional Properties

• Doctor Who - Spinning Tardis
• CSS3 Submarine
• Star Wars: The Force Awakens
• 3D Solar System

See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.

1. Start with your logo page.
2. Animate your logo in some way. You can start with the pulse from the slides and then experiment.
3. Transform your logo when you hover over it.