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

  • 1996: CSS1
  • 1998-2011: CSS2
  • 1999-Now: "CSS3"

All CSS Specs

Prefixes

selector {
  property: value;
  -webkit-property: value;
  -moz-property: value;
  -ms-property: value;
  -o-property: value;
}
div {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

More reading: MDN Vendor Prefix, shouldiprefix.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, 0, 0, 0.75); 
  background: rgba(0, 0, 255, 0.75); 
Independent opacity
caniuse.com: rgba colors

Hue/saturation/luminance color

color: hsla(
  128, 
  74%, 
  33%, 
  1.00 
        
HSL example
caniuse.com: rgba colors
Changing just saturation:
Screenshot of HSL color picker, low saturation and high saturation
Changing just brightness:
Screenshot of HSL color picker, low brightness and high brightness

☞ Experiment more: HSL Color Picker

Gradients

background-image: linear-gradient(to bottom, #00abeb 0%, #fff 50%,
                            #66cc00 50%, #fff 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 stroke

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: turquoise;
  -webkit-text-stroke-width: 0.00px; 
}
Stroke Ain't A Joke!
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: grayscale(10%); 
filter: sepia(20%); 
filter: saturate(110%); 
filter: hue-rotate(60deg); 
filter: invert(0%); 
filter: brightness(120%); 
filter: contrast(80%); 
filter: blur(5px); 
filter: drop-shadow(5px 5px black); 
filter: opacity(50%); 

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

Animations

@-webkit-keyframes pulse {
from {
 opacity: 0.0;
 font-size: 100%;
}
to {
 opacity: 1.0;
 font-size: 200%;
}
}

div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
-webkit-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 {
  -webkit-animation-name: rainbow;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: alternate;
}
Taste the rainbow!
caniuse.com: animations

Transitions

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

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
#box {
  -webkit-transition: margin-left 1s ease-in-out;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
caniuse.com: css-transitions

Transforms

Hover over me:

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}

#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}
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.

Pre-Processors

Without a Pre-processor

#header {
  width: 500px;
}

#header .logo {
  color: #F5D867;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}

#header .logo a {
  color: #FFD980;
}

#header .logo a span {
  background-color: #F5D867;
}
   

...Not the optimal syntax.

With a Pre-processor

styles.sass:

@mainColor: #99cc00;

#header {
  .logo {
    color: lighten(@mainColor, 20%);
   @include border-radius (3px);
  }
}

➜ styles.css:

#header .logo {
  color: #F5D867;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

Common features

  • variables
  • nesting
  • mix-ins
  • inheritance
  • color functions
  • vendor prefixes.

Popular Pre-processors

  • SaSS with Compass
    Biggest community of users
  • Less
    Basis for Twitter Bootstrap
    Can be run in the browser
  • Stylus
    Punctuation free

Pre-processors comparison

Another option: The Autoprefixer Post-Processor