Press key to advance.

CSS3 Effects & Animation

CSS Recap

 
selector {
  property: value;
  property: value;
}
body {
  color: yellow;
  background-color: black;
  font: 10px sans-serif;
}
#container {
  width: 70%;
  padding: 10px;
  margin: auto;
  border-bottom: 1px solid #ccc;
}

CSS History

The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. This includes releases of HTML and CSS.

Prefixes

selector {
  property: value;
  -webkit-property: value;
  -moz-property: value;
  -ms-property: value;
  -o-property: value;
}
div {
  transform: rotateX(-30deg);
  -webkit-transform: rotateX(-30deg);
  -moz-transform: rotateX(-30deg);
  -ms-transform: rotateX(-30deg);
  -o-transform: rotateX(-30deg);
}

More reading on vendor prefixes / browser integration: MDN Vendor Prefix, shouldiprefix.com, caniuse.com

Effects

Rounded corners

              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; 
            
caniuse.com: border-radius

Opacity

  color: rgba(255, 255, 255, 1); 
  background: rgba(0, 0, 0, 0.5); 
Independent opacity
caniuse.com: rgba colors

Hue/saturation/luminance color

color: hsla(
  128, 
  74%, 
  33%, 
  1.00 
        
HSL example
caniuse.com: hsla colors

☞ Experiment more: HSL Color Picker

Gradients

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

Shadows

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

box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
Such a shady div.
caniuse.com: shadows

Text styling

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;
}
Styling text!
caniuse.com: text-stroke

Exercise: Make Your Logo

  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.

filter

filter: contrast(80%); 
filter: blur(5px); 
filter: sepia(20%); 
filter: invert(0%); 
filter: opacity(50%); 
filter: hue-rotate(60deg); 
filter: grayscale(10%); 
filter: brightness(120%); 
filter: drop-shadow(5px 5px black); 
filter: saturate(110%); 

Webfonts

@font-face {
  font-family: 'LeagueGothicRegular';
  src: url('fonts/leaguegothic/leaguegothic-webfont.eot');
}
.special-header {
  font-family: 'LeagueGothicRegular', sans-serif;
}
Look, I'm in League Gothic font!
How font-face works

Finding fonts:

Exercise: Motivational Quote

  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.

Animations

Define a CSS Animation

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 a CSS Animation

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;
    }
    
Pulse!
caniuse.com: animations

Multi-Step Animations

@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;
}
Taste the rainbow!
caniuse.com: animations

Transitions

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

#box.right {
  margin-left: 1000px;
}
  • Click => document.getElementById('box').className = 'left';
  • Click => document.getElementById('box').className = 'right';
#box {
  transition: margin-left 1s ease-in-out;
}
  • Click => document.getElementById('box').className = 'left';
  • Click => document.getElementById('box').className = 'right';
caniuse.com: css-transitions

Transforms

      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
caniuse.com: transforms

Exercise: Animated Logo

  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.