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

Emotion through CSS

Avatar for Tammie Lister Tammie Lister
September 23, 2015
Design
4
1.3k

Emotion through CSS

CSS Conf EU

Avatar for Tammie Lister

Tammie Lister

September 23, 2015
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
Avatar for Tammie Lister tammielis
1
1.1k
CSS in the editor
Avatar for Tammie Lister tammielis
0
340
Global styles the story so far
Avatar for Tammie Lister tammielis
1
850
Dropped stitches and tangled yarn - a call to simplify WordPress
Avatar for Tammie Lister tammielis
1
1.3k
Being Brave
Avatar for Tammie Lister tammielis
2
1.7k
Lessons from growing design in the open
Avatar for Tammie Lister tammielis
0
1.1k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
820
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
670

Other Decks in Design

See All in Design
The Spring Festival
Avatar for Jisun jisun
0
140
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.6k
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
380
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
200
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
170
Treasure_Hunting
Avatar for Sol Metts solmetts
0
180
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
390
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
880
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう！
Avatar for コネクリ connecre
1
200
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
240
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
370
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
110

Featured

See All Featured
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
140
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
33
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
37
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
33
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
54
49k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
450
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k

Transcript

  1. EMOTION THROUGH CSS

  2. None
  3. None
  4. None
  5. None
  6. None

  7. www.aldebaran.com/en/a-robots/who-is-pepper

  8. www.parorobots.com

  9. Carlos López Molina

  10. None
  11. None
  12. None
  13. None

  14. Flickr: danielito311

  15. Sympho on Wikipedia

  16. h p://the12principles.tumblr.com/

  17. ANTICIPATION

  18. TIMING

  19. EXAGGERATION

  20. APPEAL

  21. Kristina Alexanderson

  22. Catena Alma Reklam Bilisim 
 Sanayi Ve Ticaret A.S.

  23. Monument Valley ustwo

  24. UP Coffee Aliphcom, Inc.

  25. Flappy Bird

  26. Peter Klein codepen.io/pmk/pen/ByXOOq/

  27. species-in-pieces.com/

  28. www.toyota-insidedreams.com/dreamcar-collection/

  29. BEYOND THE SHOWCASE

  30. Slack

  31. Codepen

  32. Codepen

  33. Natalya codepen.io/tallys/pen/MwxXbW

  34. EMOTIONAL BUTTONS codepen.io/collection/DNqkZE

  35. TEST CONDITIONS

  36. HAPPY

  37. None
  38. None
  39. None

  40. codepen.io/karmatosed/pen/avvbpj

  41. ANGRY

  42. None
  43. None

  44. codepen.io/karmatosed/pen/vNNZYb

  45. SAD

  46. None
  47. None

  48. codepen.io/karmatosed/pen/EVVXdO

  49. THE TESTS

  50. HAPPY BUTTON : 5 rushed, excited or anxious too

  51. ANGRY BUTTON : 5 annoyed

  52. SAD BUTTON : 5 stoned and sleepy, reluctant, bored

  53. Happy and angry… “Reminds me of my kid”

  54. THAT’S CUTE BUT…

  55. INVISIBLE ANIMATION

  56. SOME MORE EXPERIMENTS

  57. COUGHING BUTTONS

  58. codepen.io/karmatosed/pen/meeNoM

  59. ZEN INPUTS

  60. codepen.io/karmatosed/pen/QjyLLJ

  61. FEEDBACK

  62. None

  63. Tammie Lister @karmatosed THANKS Slides: speakerdeck.com/tammielis/emotion-through-css