CSS3 Trick and Treat

Disney HTML5 Summit

Hello CSS3
  • -webkit-mask
  • -webkit-transition
  • -webkit-animation
  • -webkit-transform: translate3d, rotate3d
Selectors
  • nth-child
  • attribute matching
Button with Borders and Gradients
  • background: gradient
  • box-shadow
  • border-radius
Simple Transition
  • -webkit-transition
  • -webkit-transform: translate3d
Pane Navigation
  • background: gradient
  • border-radius
  • -webkit-transform: translate3d
  • -webkit-transition
Word Wheel
  • -webkit-perspective
  • -webkit-transform: translate, rotate
Fill Text
  • @font-face
  • -webkit-text-fill-color: transparent
  • -webkit-background-clip: text
Page Flip
  • -webkit-perspective
  • -webkit-transform: translateX, rotateY
  • -webkit-animation
Tile-based Map
  • -webkit-perspective
  • -webkit-transform: translate3d
Border Image
  • border-image
CSS Spinner spin.js Github
  • -webkit-animation
CSS Masks Surfin' Safari
  • background: gradient
  • mask-image
More resources