Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creative CSS: Thinking in the 3rd dimension FOWD NY

Val Head
October 08, 2013

Creative CSS: Thinking in the 3rd dimension FOWD NY

Talking CSS animations, transitions and transforms. How you can use them and where they can have the most impact in our work!

Val Head

October 08, 2013
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. FOWD NYC 2013! Val Head / @vlh Thinking in the

    3rd Dimension Creative CSS:
  2. FOWD NYC 2013! Val Head / @vlh Thinking in the

    3rd Dimension Creative CSS:
  3. Transitions! Transforms! Animations!

  4. (not an actual word, thank goodness!) Transitformanations

  5. None
  6. Blame the spec, not yourself Transitformanations:

  7. Making 3D Happen With CSS Helpful Places To Add Motion

    & Effects Making Progressive Enhancement Your BFF
  8. 2 The basics of getting 3D with CSS One, Two,

    Three, D!
  9. None
  10. None
  11. None
  12. x y

  13. None
  14. None
  15. None
  16. Getting A Little Perspective

  17. None
  18. 3 Less basic. More punch. The “card flip”

  19. None
  20. None
  21. None
  22. Easing

  23. Keys To Making 3D Happen Perspective - set some! backface-visibility:

    hidden; EW, we don’t want to see the back of you! transform-style: perserve-3d; Keep child elements 3D as well, please.
  24. 4 Using animation for good and good times Adding Animations

  25. aka opportunities Moments of Change

  26. Hiding/Revealing Content

  27. None
  28. None
  29. None
  30. None
  31. Cues & Clues

  32. None
  33. None
  34. an animation is worth 5000 words? Demonstrate

  35. None
  36. Also, books

  37. None
  38. None
  39. None
  40. Instant sophistication through fun! Surprise & Delight

  41. None
  42. None
  43. Hide/reveal content Illustrate and demonstrate Reveal cues and clues Surprise

    & Delight
  44. 6 Progressive Enhancement FTW! Old Browsers, Problem Children, and Total

    Fakers
  45. http://caniuse.com/

  46. http://caniuse.com/

  47. None
  48. None
  49. None
  50. The nerve! Browsers sometimes lie

  51. None
  52. None
  53. 5 Like peanut butter and jelly CSS and JavaScript

  54. Manipulating Transitions

  55. None
  56. None
  57. None
  58. The very best CSS + JS trick you could learn!

    Add/remove class with JS
  59. Transitformanations Today

  60. Fancy tricks and CSS of the future Looking Ahead

  61. http://tridiv.com/

  62. http://codepen.io/valhead [email protected] @vlh Thanks FOWD!