Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Emotion through CSS
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Tammie Lister
September 23, 2015
Design
4
1.3k
Emotion through CSS
CSS Conf EU
Tammie Lister
September 23, 2015
Tweet
Share
More Decks by Tammie Lister
See All by Tammie Lister
Growing the WordPress design system
tammielis
1
1.1k
CSS in the editor
tammielis
0
340
Global styles the story so far
tammielis
1
860
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.4k
Being Brave
tammielis
2
1.7k
Lessons from growing design in the open
tammielis
0
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
830
Opportunity of Open Source
tammielis
0
680
Other Decks in Design
See All in Design
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
570
Franks Myth
gfht1
1
410
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
130
TWCP#21 UXデザインと哲学のはなし
shinn
0
270
2026年、デザイナーはなにに賭ける?
0b1tk
0
470
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
180
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
4
670
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
9
3k
デザインを信じていますか
sekiguchiy
1
940
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
PRO
0
160
kintone_aroma
kintone
0
1.3k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
3.1k
Featured
See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
110
Product Roadmaps are Hard
iamctodd
PRO
55
12k
For a Future-Friendly Web
brad_frost
182
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
200
The Curious Case for Waylosing
cassininazir
0
230
Designing Powerful Visuals for Engaging Learning
tmiket
0
230
エンジニアに許された特別な時間の終わり
watany
106
230k
BBQ
matthewcrist
89
10k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Transcript
EMOTION THROUGH CSS
None
None
None
None
None
www.aldebaran.com/en/a-robots/who-is-pepper
www.parorobots.com
Carlos López Molina
None
None
None
None
Flickr: danielito311
Sympho on Wikipedia
h p://the12principles.tumblr.com/
ANTICIPATION
TIMING
EXAGGERATION
APPEAL
Kristina Alexanderson
Catena Alma Reklam Bilisim Sanayi Ve Ticaret A.S.
Monument Valley ustwo
UP Coffee Aliphcom, Inc.
Flappy Bird
Peter Klein codepen.io/pmk/pen/ByXOOq/
species-in-pieces.com/
www.toyota-insidedreams.com/dreamcar-collection/
BEYOND THE SHOWCASE
Slack
Codepen
Codepen
Natalya codepen.io/tallys/pen/MwxXbW
EMOTIONAL BUTTONS codepen.io/collection/DNqkZE
TEST CONDITIONS
HAPPY
None
None
None
codepen.io/karmatosed/pen/avvbpj
ANGRY
None
None
codepen.io/karmatosed/pen/vNNZYb
SAD
None
None
codepen.io/karmatosed/pen/EVVXdO
THE TESTS
HAPPY BUTTON : 5 rushed, excited or anxious too
ANGRY BUTTON : 5 annoyed
SAD BUTTON : 5 stoned and sleepy, reluctant, bored
Happy and angry… “Reminds me of my kid”
THAT’S CUTE BUT…
INVISIBLE ANIMATION
SOME MORE EXPERIMENTS
COUGHING BUTTONS
codepen.io/karmatosed/pen/meeNoM
ZEN INPUTS
codepen.io/karmatosed/pen/QjyLLJ
FEEDBACK
None
Tammie Lister @karmatosed THANKS Slides: speakerdeck.com/tammielis/emotion-through-css