Illustration with CSS

You can use the CSS you already know to create beautiful illustrations in your browser. Better yet, you can achieve surprising results while still maintaining clean, semantic markup. We'll take a look at techniques for drawing with CSS, practical applications, and pushing the limits of what CSS can do.

Originally presented at CSSDay in Chandler, AZ.

Transcript

1. HELLO!
5. @lynnandtonic
6. CSS ILLUSTRATION
7. • DRAWING PICTURES IN CSS
8. • DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL
9. • DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL • ART
10. • DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL • ART • TECHNIQUES
11. • DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL • ART • TECHNIQUES • WHY ARE WE DOING THIS?
12. • DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL • ART • TECHNIQUES • WHY ARE WE DOING THIS? • SVG
13. CSS OPERA LOGO - DAVID DESANDRO
14. CSS OPERA LOGO - DAVID DESANDRO
15. SIMPSONS IN CSS - CHRIS PATTLE
16. AVENGERS IN CSS - MARIO S. MASELLI
17. SPECIES IN PIECES - BRYAN JAMES
18. CSS LEGO EMMETT - RACHEL BULL
19. CSS MIXTAPE - TOM HAZLEDINE
20. CSS ZARA PICKEN ILLUSTRATION - ROSH JUTHERFORD
21. codepen.io
22. WHEN WOULD I EVER USE THIS?
23. INTERMEDIA
24. PURPOSEFUL STUDY & PRACTICE OF YOUR MEDIUM
25. UNDERSTAND & STRETCH
26. UNDERSTAND & STRETCH
27. CSS IS A WEB DESIGNER’S MEDIUM
28. PURPOSEFUL STUDY & PRACTICE
29. A SINGLE DIV a.singlediv.com
33. LIMITED TOOLKIT
34. CONSTRAINTS
35. LIMITED RESOURCES
36. <div  id="lisa">      <div  class="head">          <div  class="no-­‐border  body  head-­‐main"></div>          <div  class="no-­‐border  body  head-­‐main2"></div>          <div  class="no-­‐border  body  head-­‐main3"></div>          <div  class="no-­‐border  hair9"></div>          <div  class="no-­‐border  hair10"></div>          <div  class="body  hair  hair1"></div>          <div  class="body  hair  hair2"></div>          <div  class="body  hair  hair3"></div>          <div  class="body  hair  hair4"></div>          <div  class="body  hair  hair5"></div>          <div  class="body  hair  hair6"></div>          <div  class="body  hair  hair7"></div>          <div  class="body  hair  hair8"></div>          <div  class="body  mouth-­‐lip2"></div>    1    2    3    4    5    6    7    8    9   10   11   12   13   14   15   16  
37. 49  <div>s
38. 10  <div>s
39.  3  <div>s
40. <div  class="icon  icon-­‐battery"></div>  1
41. ONE DIV NO EXCEPTIONS
42. NO ADDING BLACK PAINT
43. <div  class="camera"></div>  1
44. <div  class="battery"></div>  1
45. <div  class="mickey-­‐hat"></div>  1
46. <div  class="mushroom"></div>   <div  class="warp-­‐pipe"></div>  1    2
47. <div  class="tardis"></div>   <div  class="hobbit-­‐door"></div>  1    2
48. <div  class="breakfast"></div>   <div  class="marshmallow"></div>  1    2
49. <div  class="button"></div>   <div  class="label"></div>  1    2
50. CSS IS BADASS
51. TECHNIQUES
52. SHAPES
53. RECTANGLES CIRCLES TRIANGLES
54. .rectangle  {      width:  80px;      height:  50px;      background:  red;   }  1    2    3    4    5
55. .circle  {      width:  50px;      height:  50px;      background:  red;      border-­‐radius:  50%;   }  1    2    3    4    5    6
56. .triangle  {      border-­‐bottom:  50px  solid  red;      border-­‐left:  50px  solid  transparent;      border-­‐right:  50px  solid  transparent;   }  1    2    3    4    5
57. .triangle  {      border-­‐top:  20px  solid  red;      border-­‐right:  20px  solid  yellow;      border-­‐bottom:  20px  solid  green;      border-­‐left:  20px  solid  blue;   }  1    2    3    4    5    6
58. .trapezoid  {      width:  50px;      border-­‐bottom:  50px  solid  red;      border-­‐left:  50px  solid  transparent;      border-­‐right:  50px  solid  transparent;   }  1    2    3    4    5    6
59. .dunno  {      border-­‐radius:  150px  /  70px;   }  1    2    3
60. .dunno  {      border-­‐top-­‐left-­‐radius:  150px  50px;      border-­‐top-­‐right-­‐radius:  100px;   }  1    2    3    4
61. BEYOND SHAPES
62. BOX SHADOWS GRADIENTS
63. .circle  {      box-­‐shadow:  10px  10px  10px  black;   }  1    2    3
64. .circle  {      box-­‐shadow:  10px  10px  10px  black,                              100px  0  0  yellow;   }  1    2    3    4
65. .circle  {      box-­‐shadow:  10px  10px  10px  black,                              100px  0  0  yellow,                              180px  0  0  blue;   }  1    2    3    4    5
66. .circle  {      box-­‐shadow:  10px  10px  10px  black,                              100px  0  0  yellow,                              180px  0  0  blue,                              280px  0  0  -­‐20px  grey;   }  1    2    3    4    5    6
67. .cylinder  {      background-­‐image:  linear-­‐gradient(to  right,                                          grey,  white,  grey,  black);   }  1    2    3    4    5
68. .stripes  {      background-­‐image:  repeating-­‐linear-­‐gradient(                                          to  right,                                          red,  red  20px,                                          grey  20px,  grey  40px);   }  1    2    3    4    5    6
69. .multi  {      background-­‐image:  linear-­‐gradient(to  bottom,                                          red,  blue);   }  1    2    3    4
70. .multi  {      background-­‐image:  linear-­‐gradient(to  right,                                          transparent,  black),                                          linear-­‐gradient(to  bottom,                                          red,  blue);   }  1    2    3    4    5    6
71. PSEUDO ELEMENTS
72. div::before  {      background:  yellow;   }   div::after  {      background:  blue;   }  1    2    3    4    5    6
73. div::before  {      background:  yellow;   }   div::after  {      background:  blue;   }  1    2    3    4    5    6
74. DRAWING
75. #@$%!
76. EDGAR DEGAS “Drawing is not the same as form; it is a way of seeing form.”
77. FORM HUE VALUE
78. SHAPE
79. COLOR
80. LIGHT
82. LIGHT
83. .button  {      background-­‐image:  linear-­‐gradient(to  bottom,                                          #eee,  #ccc);      box-­‐shadow:  5px  0  5px  rgba(0,0,0,.4);   }  1    2    3    4    5
84. .button  {      background-­‐image:  linear-­‐gradient(to  bottom,                                          #eee,  #ccc);      box-­‐shadow:  5px  0  5px  rgba(0,0,0,.4);   }  1    2    3    4    5
85. EXAMPLES
86. .button  {      background:  skyblue;      border-­‐radius:  50%;   }  1    2    3    4
87.    box-­‐shadow:  0  7px  10px  black(.3);  4
88.    box-­‐shadow:  inset  0  -­‐15px  10px  #45b3e0,                              0  7px  10px  black(.3);  4    5
89.    box-­‐shadow:  inset  0  -­‐10px  10px  black(.3),                              inset  0  -­‐15px  10px  #45b3e0,                              0  7px  10px  black(.3);  4    5    6
90.    box-­‐shadow:  inset  0  -­‐3px  3px  white(.3),                              inset  0  -­‐10px  10px  black(.3),                              inset  0  -­‐15px  10px  #45b3e0,                              0  7px  10px  black(.3);  4    5    6    7
91.    box-­‐shadow:  inset  0  17px  5px  white(.7),                              inset  0  -­‐3px  3px  white(.3),                              inset  0  -­‐10px  10px  black(.3),                              inset  0  -­‐15px  10px  #45b3e0,                              0  7px  10px  black(.3);  4    5    6    7    8
92.    box-­‐shadow:  inset  0  5px  5px  skyblue,                              inset  0  17px  5px  white(.7),                              inset  0  -­‐3px  3px  white(.3),                              inset  0  -­‐10px  10px  black(.3),                              inset  0  -­‐15px  10px  #45b3e0,                              0  7px  10px  black(.3);  4    5    6    7    8    9
93. .button::before  {      border-­‐radius:  50%;      border-­‐top:  1px  solid  black(.6);      border-­‐bottom:  1px  solid  white(.6);   }  1    2    3    4    5
94.    box-­‐shadow:  0  10px  5px  5px  white(.6);  5
95.    box-­‐shadow:  0  2px  5px  5px  skyblue,                              0  10px  5px  5px  white(.6);  5    6
96.    box-­‐shadow:  0  -­‐14px  10px  5px  #45b3e0,                              0  2px  5px  5px  skyblue,                              0  10px  5px  5px  white(.6);  5    6    7
97.    box-­‐shadow:  3px  -­‐15px  7px  -­‐4px  black(.3),                              0  -­‐14px  10px  5px  #45b3e0,                              0  2px  5px  5px  skyblue,                              0  10px  5px  5px  white(.6);  5    6    7    8
98.    box-­‐shadow:  inset  0  20px  2px  white(.3),                              3px  -­‐15px  7px  -­‐4px  black(.3),                              0  -­‐14px  10px  5px  #45b3e0,                              0  2px  5px  5px  skyblue,                              0  10px  5px  5px  white(.6);  5    6    7    8    9
99.    background-­‐image:  radial-­‐gradient(circle  at                                          38px  38px,  #333  10px,                                          transparent  10px); 10   11   12
100.                                        38px  38px,  #333  10px,                                          transparent  10px),                                          radial-­‐gradient(circle  at                                          73px  73px,  #333  10px,                                          transparent  10px),                                          radial-­‐gradient(circle  at                                          38px  73px,  #333  10px,                                          transparent  10px); 11   12   13   14   15   16   17   18
101. .button::after  {      background-­‐image:  linear-­‐gradient(to  right,                                          transparent  35%,  navy  35%,                                          steelblue  40%,  navy  45%,                                          steelblue  50%,  navy  55%,                                          steelblue  60%,  navy  65%,                                          transparent  65%);    1    2    3    4    5    6    7
102.                                        steelblue  60%,  navy  65%,                                          transparent  65%),                                          linear-­‐gradient(to  bottom,                                          transparent  35%,  navy  35%,                                          steelblue  40%,  navy  45%,                                          steelblue  50%,  navy  55%,                                          steelblue  60%,  navy  65%,                                          transparent  65%);    5    6    7    8    9   10   11   12
103. .button::after  {      transform:  rotate(45deg);   }    1    2    3
122. <div  class="button"></div>  1
123. MULTIPLES
124. .camera::before  {      background:  #444;   }    1    2    3
125. .camera::before  {      background:  #444;      box-­‐shadow:    0  0  0  2px  #eee,                              -­‐1px  -­‐1px  1px  3px  #333,                              -­‐95px  6px  0  0  #ccc,                                30px  3px  0  12px  #ccc,                              -­‐18px  37px  0  46px  #ccc,                              -­‐96px  -­‐6px  0  -­‐6px  #555;   }    1    2    3    4    5    6    7    8
126. .camera::after  {      background:  #ccc;   }    1    2    3
127. .camera::after  {      background:  #ccc;      box-­‐shadow:    0  3px  2px  #999,                                1px  -­‐2px  0  white,                              -­‐1px  -­‐3px  2px  #555,                                0  0  0  15px  #c2c2c2,                                0  -­‐2px  0  15px  white,                                0  10px  10px  15px  black;   }    1    2    3    4    5    6    7    8
128. BACKGROUND LAYERS
131.    background-­‐image:  linear-­‐gradient(to  bottom…);    1
132.    background-­‐image:  linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2
133.    background-­‐image:  linear-­‐gradient(to  right…),                                          linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2    3
134.    background-­‐image:  linear-­‐gradient(to  right…),                                            linear-­‐gradient(to  right…),                                          linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2    3    4
135.    background-­‐image:  linear-­‐gradient(to  left…),                                            linear-­‐gradient(to  right…),                                            linear-­‐gradient(to  right…),                                          linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2    3    4    5
136.    background-­‐image:  linear-­‐gradient(to  left…),                                            linear-­‐gradient(to  right…),                                            linear-­‐gradient(to  right…),                                          linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2    3    4    5
137.    background-­‐image:  linear-­‐gradient(to  left…),                                            linear-­‐gradient(to  right…),                                            linear-­‐gradient(to  right…),                                          linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2    3    4    5
138. github.com/lynnandtonic/a-single-div
139. WHEN WOULD I EVER USE THIS?
140. IS THIS PRACTICAL?
141. NOT REALLY
142. SVG
143. TIME
144. PERFORMANCE
145. BROWSER SUPPORT
146. THE CASCADE CAN BE FRAGILE
147. AND YET…
148. COMPS ARE DRAWINGS OF WEBSITES
149. COMPS ARE DRAWINGS OF WEBSITES
150. STRETCH
151. DO MORE WITH LESS
152. CSS IS AWESOME
153. WE TYPE WORDS INTO A TEXT EDITOR
154. ART COMES OUT THE OTHER SIDE
155. THANK YOU @lynnandtonic