<div id="flakes">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  ...
</div>

<div class="snowman"></div>

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

:first-child

:last-child

:first-of-type

:last-of-type

:only-child

:only-of-type

:root

:empty

:not(:empty)

• W3C working specificiation
• Browser support chart
• Selectors Workshop

i:nth-of-type(5n)    {height:30px; width:30px;}
i:nth-of-type(5n+1)  {height:24px; width:24px;}
i:nth-of-type(5n+2)  {height:10px; width:10px;}...

i:nth-of-type(3n)    {animation-delay: 2.3s;}
i:nth-of-type(3n+1)  {animation-delay: 1.5s;}
i:nth-of-type(3n+2)  {animation-delay: 3.4s;}

i:nth-of-type(7n)    {opacity: 0.5;}
i:nth-of-type(7n+1)  {opacity: 0.8;}
i:nth-of-type(7n+2)  {opacity: 0.3;} ...

i:nth-of-type(11n) {animation-timing-function: ease-in-out;}
i:nth-of-type(11n+1) {animation-timing-function:ease-out;}
i:nth-of-type(11n+2) {animation-timing-function:ease;} ...
i:nth-of-type(11n+5) {animation-timing-function:
                         cubic-bezier(0.2, 0.3, 0.8, 0.9);}

input[placeholder] {
/* matches any input with a placeholder */}
input[type=email] {
/* exact match */}
abbr[title~=unicorn] {
/* matches unicorn but not unicorns */}
abbr[title|=en] {
/* matches en-us and en-uk */}
a[href^=mailto] {
/* starts with */}
a[href$=pdf]{
/* ends in */}
abbr[title*=unicorn] {
/* matches unicorn and unicorns */}

E:[att] /* have the attribute at all */

E:[att=val] /* exact */

E:[att~=val] /* val is a space separated word */

E:[att|=val] /* with a dash */

E:[att^=val] /* begins with val */

E:[att$=val]  /* ends with val */

E:[att*=val]  /* val is anywhere as a substring */
.

@media print{
  abbr[title]:after {
    content: "(" attr(title) ")";
  }
  a[href^=http]:after {
    content: "(" attr(href) ")";
  }
}

• E::before
• E::after
• E:enabled
• E:disabled
• E:checked
• input:valid
• input:invalid
• input:optional
• input:required
• ::selection
• E:target
• E:not(s)
• E > F Child
• E + F Adjacent sibling
• E ~ F sibling

.snowman:after {
  content: "";
  height: 0; width: 0;
  border: transparent solid 4px;
  border-left: orange 30px solid;
  position: absolute;
  left: 50%;
  top: 100px;
}

• Completely styleable
• Use absolute position, top: 0; bottom: 0; left: 0; right: 0; for same size
• Generated Content Tutorial
• Counters with Generated Content

background-image:
    linear-gradient(
    #3A67AB,
    #E8F6FF);

background-image:
    linear-gradient(to bottom,
    #3A67AB 0%,
    #E8F6FF 100%);

background-image:
    linear-gradient(180deg,
    #3A67AB 0%,
    #E8F6FF 100%);

prefix with -webkit- for old mobile webkits.

background-image:
  linear-gradient(180deg,
     rgba(255,255,255,0) 40%,
     #ffffff 40%,
     #ffffff 60%,
     rgba(255,255,255,0) 60%),
  linear-gradient(90deg,
     rgba(255,255,255,0) 40%,
     #ffffff 40%,
     #ffffff 60%,
     rgba(255,255,255,0) 60%),
  linear-gradient(45deg,
     rgba(255,255,255,0) 43%,
     #ffffff 43%,
     #ffffff 57%,
     rgba(255,255,255,0) 57%),
  linear-gradient(135deg,
     rgba(255,255,255,0) 43%,
     #ffffff 43%,
     #ffffff 57%,
     rgba(255,255,255,0) 57%);

• vendor-prefix ‘-webkit-’ for older mobile devices
• instead of ‘transparent’ use rgba(0,0,0,0) as it may fade to grey
• create effects with color stops at same location
• create effects by adding multiple gradients, playing with position and size
• learn from others: Lea Verou's Gradients, Estelle Weyl's Gradients, and Estelle's Flags
• Use tools: John Allsopp's tool, Damian Galarza's tool, Colorzilla
• Gradient Workshop

New Internet Explorer 10

• Used in RGBA & HSLA colors

  rgba(58, 103, 171, 0.5);
  hsla(216, 49%, 45%, 0.5);
  

• Transparent Shadows

  .trans { box-shadow: -10px 10px rgba(0,0,0,0.3);
           text-shadow: 0 21px 1px rgba(0,0,0,0.3);}

• Solid Shadows

  .solid { box-shadow: -10px 10px #999;
           text-shadow: 0 21px 1px #999;}

Border on slides, code & showflakes

border-radius: 0;

border-radius: 20px;

border-radius: 50%;

.circle {border-radius: 50%;}

.oval { border-radius: 50%;}

.different { border-radius: 10px 30px;}

.elliptical { border-radius: 10px / 30px;}

Do NOT prefix.

• transform: translate(200px, 0)
• transform: rotate(360deg)
• transform: scale(1.5)
• transform-origin: -20px -20px

IE9 -ms-, -webkit- still needed

Order of transform functions matters: if you rotate first, your translate direction will be on the rotated axis!

Enables the transition of properties from one state to the next over a defined length of time

• transition-property: properties (or 'all') that transition
• transition-duration: s or ms it takes to transition
• transition-timing-function: bezier curve of transition
• transition-delay: s or ms before transition starts
• transition: shorthand for 4 transition properties

New in IE10,   -webkit- vendor prefix

code {
   color: #000000;
   font-size: 100%;
   background-color: rgba(255,255,255,0.4);
   transition: all 0.5s ease-in 50ms;
}
code:hover {
   color: #E2007A;
   font-size: 120%;
   background-color: rgba(255,255,255,0.8);
}

code {
   transition: color, font-size, background-color 0.5s ease-in 50ms;
}

@keyframes falling {

    from {
      top: -40px;
    }

    to {
      top: 1000px;
    }
}

Warning: Do not give your animation a property value as a name

@keyframes falling {

    0% {
      top: -40px;
    }

    100% {
      top: 1000px;
    }

}

Don't forget the %

Don't forget the 100%

Don't quote the animation name

@keyframes falling {

    0% {
      top: -40px;
    }

    10% {
      top: 400px;
    }

    90% {
      top: 560px;
    }

    100% {
      top: 1000px;
    }

}

@keyframes fallingAndDimming {

   0% {
      top: -40px;
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      top: 800px;
      opacity: 1
    }

}
	

@keyframes LeftRightWithPause {

    0%, 30%, 100% {
      transform: translateX(-80px);
    }

    50%, 80% {
      transform: translateX(40px);
    }
}

@-webkit-keyframes falling {
    0%{
      -webkit-transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(1000px);
    }
}
@keyframes falling {
    0%{
      transform: translateY(0);
    }
    100% {
      transform: translateY(1000px);
    }
}

@keyframes falling {

  0%{
    transform:
         translateY(0)
rotate(0deg)
scale(0.9, 0.9);
  }

  100% {
    transform:
         translateY(1000px)
rotate(360deg)
scale(1.1, 1.1);
  }

}

-webkit-

@-webkit-keyframes falling {
  0%{ -webkit-transform:
      translateY(0) rotate(0deg) scale(0.9, 0.9);}
  100%{ -webkit-transform:
      translateY(1000px) rotate(360deg) scale(1.1, 1.1);}
}

@keyframes falling {
  0%{ transform:
      translateY(0) rotate(0deg) scale(0.9, 0.9);}
  100%{ transform:
      translateY(1000px) rotate(360deg) scale(1.1, 1.1);}
}

@keyframes falling {

  0%{
    transform:
      translateY(0) rotate(0deg) scale(0.9, 0.9);
  }

  100%{
    transform:
      translateY(1000px) rotate(360deg) scale(1.1, 1.1);
  }
}

.snowflake {
    -webkit-transform-origin: left -20px;
    transform-origin: left -20px;
    }

-webkit- (undo)

@keyframes falling {

    0%{
      transform: translate3d(0, 0, 0)
            rotate(0deg)
            scale(0.9, 0.9);
    }

    100% {
       transform: translate3d(0, 1000px, 0)
             rotate(360deg)
             scale(1.1, 1.1);
    }

}

-webkit- (undo)

.snowflake {
  display: inline-block;
  height: 20px;
  width: 20px;
 background-image:
  linear-gradient(180deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
  linear-gradient(90deg,  rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
  linear-gradient(45deg,  rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
  linear-gradient(135deg,  rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);
  border-radius: 50%;
  -webkit-transform-origin: left -20px;
   transform-origin: left -20px;
}

-webkit-

.snowflake {
   ...
   -webkit-transform-origin: left -20px;
   -webkit-animation-name: falling; 

   transform-origin: left -20px;
   animation-name: falling; 
}

.snowflake { 
  ...
  -webkit-transform-origin: left -20px;
  -webkit-animation-name: falling;
  -webkit-animation-duration: 3s;

  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
}

.snowflake { easeease-inease-outease-in-outstep-startstep-endsteps(5, start)
   …
  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
}

ease
linear
ease-in
ease-out
ease-in-out
step-start /* same as steps(1, start) */
step-end /* same as steps(1, end) */
steps( X, start|end) /* X = # of steps + when change of value occurs */
cubic-bezier(x1, y1, x2, y2)

-webkit-

.snowflake {
   …
  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
}

‘infinte’ or number. Default is ‘1’.

-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;

-webkit-

.snowflake { 
  …
  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

-webkit-

.snowflake {
  …
  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
  animation-delay: 2s;
  -webkit-animation-direction: normal;
   animation-direction: normal;
}

Two possible values: normal | alternate;

-webkit-animation-direction: alternate;
 animation-direction: alternate;

-webkit-

.snowflake {
  …
  animation-name: falling;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
  animation-delay: 2s;
  animation-direction: normal;
}

. . . can also be written as . . .

.snowflake {
  ...
  -webkit-animation: falling 3s ease-in-out 2s infinite;
  animation: falling 3s ease-in-out 2s infinite;
}

-webkit-

values: none | forwards | backwards | both

.snowflake {
  animation-name: falling;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
  animation-delay: 5s;
  -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}

. . . or . . .-webkit-

.snowflake {
 -webkit-animation: falling 3s ease-in-out 2s 3  forwards;
 animation: falling 3s ease-in-out 2s 3  forwards;
}

.snowflake {
  animation-name: falling;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
  animation-delay: 5s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

. . . or . . .-webkit-

.snowflake {
 -webkit-animation: falling 3s ease-in-out 2s 3  backwards;
 animation: falling 3s ease-in-out 2s 3  backwards;
}

.snowflake {
  animation-name: falling;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
  animation-delay: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

. . . or . . .-webkit-

.snowflake {
 -webkit-animation: falling 3s ease-in-out 2s 3  both;
  animation: falling 3s ease-in-out 2s 3  both;
}

.box { background-color: purple;
   animation: showme 5s linear 5s 1;}

@keyframes showme {
   0% {left: 200px; background-color:blue;}
   50% {background-color:green;}
   100% {left: 600px; background-color: yellow;}
}

-webkit-animation-play-state: paused | running
 animation-play-state: paused | running

.snowflake:hover {
  -webkit-animation-play-state: paused;
   animation-play-state: paused;
  }

• animationstart
• animationend
• animationiteration

el.addEventListener( 'webkitAnimationEnd',
    function( event ) {
        console.log('Animation Ended');
    }, false );

• webkitAnimationStart
• webkitAnimationEnd
• webkitAnimationIteration

el.addEventListener( 'webkitAnimationEnd',
    function( event ) {
        el.removeClassName('newClass');
        setTimeout("el.addClassName('newClass')", 100ms)
    },
    false );