Part 5: CSS3
Making it snow
(in San Francisco)
without JavaScript
(or clouds)

CSS3 Features Displaying now?

CSS3 Selectors
linear gradients
opacity
RGBA colors
border-radius
transforms
transitions
animations

Opacity is from CSS2

The simplest Linear Gradient

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

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

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

prefix with -webkit-, -moz-, -ms- & -o-

More Complex Linear Gradient

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%);

-webkit- | -moz- | -ms- || -o-

transparent = rgba(0,0,0,0) not rgba(255,255,255,0)

Gradients

background: -webkit-linear-gradient(
  90deg, 
  #E468E8 0%,
  #E169FF 33%,
  #4FBFF7 66%,
  #2C4299 100%);

             
 Angle
             
 First stop
 Second stop

background: radial-gradient(4% 12%,
 circle
 farthest-side,
 #4697AB, 
 #F7F9FA,
 #C344C7 40%);

 Circle  Ellipse
 L/R
 T/B
 colorstop

Gradients

Tips on Gradient

vendor-prefix ‘linear-gradient’ and ‘radial-gradient’
keyword ‘transparent’ = rgba(0,0,0,0) so fades 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

Chrome 3*
Chrome 10
Safari 4*
Safari 5.1
Firefox 3.6
Opera 11.1
Internet Explorer 10

Prefixed -webkit-, -moz-, -ms-, -o-

tranforms

translate
```
transform: translate(-80px, 200px);
```
rotate
```
transform: rotate(15deg);
```
scale
```
transform: scale(1.5, 2);
```
skew
```
transform: skewX(-8deg);
```

multiple transforms

transform: translate(-80px, 200px) 
  rotate(-15deg) scale(2, 1.5) skewX(8deg);

Transforms used

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

Chrome
Safari
Firefox 3.5
Opera 10.5
IE 9
all with vendor prefix

transforms

Vendor prefix all of 'em

Take advantage of transform-origin

Multiple values are SPACE separated (no commas)

3D transforms are hardware accelerated

Play with Westciv's Transform Tool

Matrix is another syntax

More about transforms

transitions

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

Chrome
Safari
Firefox 4
Opera 10.5
IE 10
all with vendor prefix

transitions

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;
}

Animation Essentials

@keyframes
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-delay
animation-fill-mode
animation (shorthand)

Keyframes

@keyframes falling {

    from {
      top: -40px;
    }

    to {
      top: 1000px;
    }
}

Keyframes

@keyframes falling {

    0% {
      top: -40px;
    }

    100% {
      top: 1000px;
    }

}

Don't forget the %

Don't forget the 100%

Don't quote the animation name

Granular animation control

@keyframes falling {

    0% {
      top: -40px;
    }
    
    10% {
      top: 400px;
    }
    
    90% {
      top: 560px;
    }

    100% {
      top: 1000px;
    }

}

Animating multiple properties

@keyframes fallingAndDimming {

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

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

}

Animating CSS Transforms

@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- | -moz- | -ms-

with ‘transform-origin’

@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;
    -moz-transform-origin: left -20px;
    }

-webkit- | -moz- | -ms-

base CSS

.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%;
  transform-origin: left -20px;
}

-webkit- | -moz- | -ms-

animation name and duration

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

-webkit- | -moz- | -ms-

‘animation-timing-function’

.snowflake { 
   …
  transform-origin: left -20px;
  animation-name: falling; 
  animation-duration: 3s;
  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- | -moz- | -ms-

‘animation-iteration-count’

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

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

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

-webkit- | -moz- | -ms-

‘animation-delay’

.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- | -moz- | -ms-

‘animation-direction’

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

Two possible values: normal | alternate;

animation-direction: alternate;

-webkit- | -moz- | -ms-

‘animation’ (shorthand)

.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 {
  ...
  animation: falling 3s ease-in-out 2s infinite;
}

-webkit- | -moz- | -ms-

‘animation-fill-mode’

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;
 animation-fill-mode: forwards;
}

. . . or . . .-webkit- | -moz- | -ms-

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

‘animation-play-state’

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

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

Thank you

Estelle Weyl

www.standardista.com

@estellevw