Estelle Weyl · Standardista.com · @estellevw ·Press key to advance. ·Press 2 for notes.

http://estelle.github.com/snow/

CSS3
Making it snow
without JavaScript
(or clouds)

Me

Estelle Weyl

www.standardista.com

@estellevw

@standardista

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook

The code:

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

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

CSS3 Features Showing Now

  • CSS3 Selectors
  • linear gradients
  • opacity
  • border-radius
  • transforms
  • transitions
  • animations

Opacity is from CSS2

CSS3 Features for the Snowman

  • radial gradients
  • background-size
  • generated content
  • pseudo-element
  • RGBA colors

Structural Selectors

: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)

Structural Selectors

li:first-child,
li:last-child {
  font-weight: bold;
}
li:nth-child(even) {
  background-color: #CCC;
}
li:nth-child(3) {
  color: #CCC;
}
li:first-of-type,
li:last-of-type{
  text-decoration:line-through;
}
li:nth-of-type(odd) {
  background-color: #FFF;
}
li:nth-of-type(4n) {
  color: #E2007A;
}
li:nth-of-type(3n-1) {
  text-align: right;
}

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7
  8. Item 8
  9. Item 9
  10. Item 10
  11. Play Time

Snowflake pseudo-Randomness

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

Attribute Selectors

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

More CSS3 Selectors

  • 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

Generated Content

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

Selectors & counting

Try it out

Play Time

Try it out

The simplest Linear Gradient

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.

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

Gradients

background: linear-gradient(
90deg,
#E468E8 0%,
#E169FF 33%,
#4FBFF7 66%,
#2C4299 100%);
             
 Angle
             
 First stop
 Second stop
background: radial-gradient(circle at 4% 12%,
#4697AB,
#F7F9FA,
#C344C7 40%);
  
  

 Left/Right
 Top/Bottom
 colorstop 

Pattern Library

Try it out

Tips on Gradient

New Internet Explorer 10

Opacity

opacity: 1;
opacity: 0.75;
opacity: 0.5;
opacity: 0.25;
opacity: 0;

AlphaTransparency

color: rgba(0, 0, 0, 1);
background-color: rgba(58, 103, 171, 1);
color: rgba(0, 0, 0, 0.75);
background-color: rgba(58, 103, 171, 0.75);
color: rgba(0, 0, 0, 0.5;
background-color: rgba(58, 103, 171, 0.5);
color: rgba(0, 0, 0, 0.25);
background-color: rgba(58, 103, 171, 0.25);
color: rgba(0, 0, 0, 0)
background-color: rgba(58, 103, 171, 0);

HSLA

color:hsla(
   328, 	 H 
blah
100%, S
44%, L
1.00 A
);
HSLA Colors

AlphaTransparency Tips

  • 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-radius

Border on slides, code & showflakes

border-radius: 0;
border-radius: 20px;
border-radius: 50%;

border-radius

.circle {border-radius: 50%;}
.oval { border-radius: 50%;}
.different { border-radius: 10px 30px;}
.elliptical { border-radius: 10px / 30px;}

Do NOT prefix.

Transforms used

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

IE9 -ms-, -webkit- still needed

Transform Order

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

translateX(200px)
rotate(135deg)

transforms

  • Vendor prefix -webkit- & -ms- (for IE9)
  • 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
  • Deep dive into Transitions, Transforms and Animation
  • 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

    New in IE10,   -webkit- 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;
    }

    animations

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

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

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

    Duplicate Keyframes

    @keyframes LeftRightWithPause {
    
        0%, 30%, 100% {
          transform: translateX(-80px);
        }
    
        50%, 80% {
          transform: translateX(40px);
        }
    }

    Keyframe vendor prefixing

    @-webkit-keyframes falling {
        0%{
          -webkit-transform: translateY(0);
        }
        100% {
          -webkit-transform: translateY(1000px);
        }
    }
    @keyframes falling {
        0%{
          transform: translateY(0);
        }
        100% {
          transform: translateY(1000px);
        }
    }
    
    no -ms- needed as animation not in IE9

    Animating CSS Transforms

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

    Vendor Prefixing

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

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

    -webkit- (undo)

    Hardware Acceleration

    @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)

    But nothing is animated yet!

    We've only declared the keyframes

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

    -webkit-

    ‘animation-name’

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

    ‘animation-duration’

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

    ‘animation-timing-function’

    .snowflake { 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-

    Animation Timing Function: step()

    Try it out

    ‘animation-iteration-count’

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

    ‘animation-delay’

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

    ‘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;
      -webkit-animation-direction: normal;
       animation-direction: normal;
    }

    Two possible values: normal | alternate;

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

    -webkit-

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

    -webkit-

    What happens at animation end?

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

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

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

    Animation Fill Mode (again)

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

    Can you stop an animation?

    ‘animation-play-state’

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

    What happens at animation end?

    • animationstart
    • animationend
    • animationiteration
    el.addEventListener( 'webkitAnimationEnd',
        function( event ) {
            console.log('Animation Ended');
        }, false );
    
    • webkitAnimationStart
    • webkitAnimationEnd
    • webkitAnimationIteration

    Starting next animation at end of previous

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

    Thanks

    Estelle Weyl

    www.standardista.com

    @estellevw

    @standardista

    HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook