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!

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
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!
12. x y
16. Getting A Little Perspective
18. 3 Less basic. More punch. The “card flip”
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
31. Cues & Clues
34. an animation is worth 5000 words? Demonstrate
36. Also, books
40. Instant sophistication through fun! Surprise & Delight
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/
50. The nerve! Browsers sometimes lie
53. 5 Like peanut butter and jelly CSS and JavaScript
54. Manipulating Transitions
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!