FOWD NYC 2013!
Val Head / @vlh
Thinking in the 3rd Dimension
Creative CSS:
Slide 2
Slide 2 text
FOWD NYC 2013!
Val Head / @vlh
Thinking in the 3rd Dimension
Creative CSS:
Slide 3
Slide 3 text
Transitions!
Transforms!
Animations!
Slide 4
Slide 4 text
(not an actual word, thank goodness!)
Transitformanations
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Blame the spec, not yourself
Transitformanations:
Slide 7
Slide 7 text
Making 3D Happen With CSS
Helpful Places To Add Motion & Effects
Making Progressive Enhancement Your BFF
Slide 8
Slide 8 text
2
The basics of getting 3D with CSS
One, Two, Three, D!
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
x
y
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Getting A Little Perspective
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
3
Less basic. More punch.
The “card flip”
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Easing
Slide 23
Slide 23 text
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.
Slide 24
Slide 24 text
4
Using animation for good and good times
Adding Animations
Slide 25
Slide 25 text
aka opportunities
Moments of Change
Slide 26
Slide 26 text
Hiding/Revealing Content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Cues & Clues
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
an animation is worth 5000 words?
Demonstrate
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Also, books
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Instant sophistication through fun!
Surprise & Delight
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Hide/reveal content
Illustrate and demonstrate
Reveal cues and clues
Surprise & Delight
Slide 44
Slide 44 text
6
Progressive Enhancement FTW!
Old Browsers,
Problem Children,
and Total Fakers
Slide 45
Slide 45 text
http://caniuse.com/
Slide 46
Slide 46 text
http://caniuse.com/
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
The nerve!
Browsers sometimes lie
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
5
Like peanut butter and jelly
CSS and JavaScript
Slide 54
Slide 54 text
Manipulating Transitions
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
The very best CSS + JS trick you could learn!
Add/remove class with JS