Illustration with CSS

D67fff74178013024d833b3eec6cf27f?s=47 Lynn Fisher
December 05, 2015

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.

D67fff74178013024d833b3eec6cf27f?s=128

Lynn Fisher

December 05, 2015
Tweet

Transcript

  1. HELLO!

  2. None
  3. None
  4. None
  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

  30. None
  31. None
  32. None
  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

  81. None
  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
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. None
  119. None
  120. None
  121. None
  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

  129. None
  130. None
  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