CSS3 GOOD TIMES

Hanrui Gao ·
http://www.flickr.com/photos/55701839@N04/5656954717/

Agenda

NONE

The Evolution of HTML5

http://www.flickr.com/photos/shawnfuller/92531065/

Gradient

2008 -
-webkit-gradient( <type> , <point> [, <radius>]?, <point> [, <radius>]? 
                  [, <color-stop>]* )
2011 -
linear-gradient( [ [ [ <angle> | [top | bottom] || [left | right] ],]?
                 <color-stop>[, <color-stop>]+);
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]?
                 <stop>, <stop>[, <stop>]* )
Future
linear-gradient( [ [ <angle> | to <side-or-corner> ,]?
                 <color-stop> [, <color-stop>]+ )
radial-gradient( [ [ <shape> || <size> ] [ at <position> ]? , |
                 at <position>,]? <color-stop> [ , <color-stop> ]+ )
Recommanded reading: CSS3 Patterns Gallery, BonBon Buttons, Metal Buttons

Flex Box

Chrome 4 - Now
display: -webkit-box;
display: box;
Chrome 17 - Chrome 20
display: -webkit-flexbox;
display: flexbox;
Chrome 21
display: -webkit-flex;
display: flex;

Regions & Exclusions


CSS Functions

calc()
width: -webkit-calc(200px - 100);
width: -webkit-calc(2 * 50%);
width: -webkit-calc(200px / 2);
color: hsl(-webkit-calc(120), -webkit-calc(75%), 0.5);
background-position: -webkit-calc(50% + 5px) center;
min()
width: -webkit-min(150px, 100px, 200px);
width: -webkit-min(90px + 50px, 100px);
width: -webkit-min(100px, 100%);  /* where 100% is 200px; */
max()
width: -webkit-max(150px, 100px, 200px);
width: -webkit-max(200px - 50px, 100px);
width: -webkit-max(100px, 100%);  /* where 100% is 200px; */

Cross Fade

background-image: -webkit-cross-fade(url(first.png), url(second.png), 50%);
@-webkit-keyframes fading {
  0% {
    background-image: -webkit-cross-fade(url(first.png), url(second.png), 0%);
  }
  100% {
    background-image: -webkit-cross-fade(url(first.png), url(second.png), 100%);
  }
}

-webkit-animation: fading 3s infinite;

CSS Filter Effects

GPU Accelerated Compositing

Signals that can trigger a new compositing layer
  • Layer has 3D or perspective transform CSS properties
  • Layer is used by <video> element using accelerated video decoding
  • Layer is used by a <canvas> element with a 3D context or accelerated 2D context
  • Layer is used for a composited plugin
  • Layer uses a CSS animation for its opacity or uses an animated webkit transform
  • Layer uses accelerated CSS filters
  • Layer has a descendant that is a compositing layer
  • Layer has a sibling with a lower z-index which has a compositing layer

Q & A

HTML5