Creative CSS: Thinking in the 3rd dimension FOWD NY

76ded8131db760e741f0ecb01cb4c562?s=47 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!

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

October 08, 2013
Tweet

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 val@valhead.com @vlh Thanks FOWD!