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. 1.
  2. 2.
  3. 3.
  4. 4.
  5. 11.

    • DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL

    • ART • TECHNIQUES • WHY ARE WE DOING THIS?
  6. 12.

    • DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL

    • ART • TECHNIQUES • WHY ARE WE DOING THIS? • SVG
  7. 30.
  8. 31.
  9. 32.
  10. 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  
  11. 52.
  12. 54.

    .rectangle  {      width:  80px;      height:  50px;

         background:  red;   }  1    2    3    4    5
  13. 55.

    .circle  {      width:  50px;      height:  50px;

         background:  red;      border-­‐radius:  50%;   }  1    2    3    4    5    6
  14. 56.

    .triangle  {      border-­‐bottom:  50px  solid  red;    

     border-­‐left:  50px  solid  transparent;      border-­‐right:  50px  solid  transparent;   }  1    2    3    4    5
  15. 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
  16. 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
  17. 64.

    .circle  {      box-­‐shadow:  10px  10px  10px  black,  

                               100px  0  0  yellow;   }  1    2    3    4
  18. 65.

    .circle  {      box-­‐shadow:  10px  10px  10px  black,  

                               100px  0  0  yellow,                              180px  0  0  blue;   }  1    2    3    4    5
  19. 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
  20. 67.

    .cylinder  {      background-­‐image:  linear-­‐gradient(to  right,      

                                       grey,  white,  grey,  black);   }  1    2    3    4    5
  21. 68.

    .stripes  {      background-­‐image:  repeating-­‐linear-­‐gradient(        

                                     to  right,                                          red,  red  20px,                                          grey  20px,  grey  40px);   }  1    2    3    4    5    6
  22. 69.

    .multi  {      background-­‐image:  linear-­‐gradient(to  bottom,      

                                       red,  blue);   }  1    2    3    4
  23. 70.

    .multi  {      background-­‐image:  linear-­‐gradient(to  right,      

                                       transparent,  black),                                          linear-­‐gradient(to  bottom,                                          red,  blue);   }  1    2    3    4    5    6
  24. 72.

    div::before  {      background:  yellow;   }   div::after

     {      background:  blue;   }  1    2    3    4    5    6
  25. 73.

    div::before  {      background:  yellow;   }   div::after

     {      background:  blue;   }  1    2    3    4    5    6
  26. 74.
  27. 75.
  28. 76.
  29. 78.
  30. 79.
  31. 80.
  32. 81.
  33. 82.
  34. 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
  35. 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
  36. 85.
  37. 88.

       box-­‐shadow:  inset  0  -­‐15px  10px  #45b3e0,      

                           0  7px  10px  black(.3);  4    5
  38. 89.

       box-­‐shadow:  inset  0  -­‐10px  10px  black(.3),      

                           inset  0  -­‐15px  10px  #45b3e0,                              0  7px  10px  black(.3);  4    5    6
  39. 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
  40. 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
  41. 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
  42. 93.

    .button::before  {      border-­‐radius:  50%;      border-­‐top:  1px

     solid  black(.6);      border-­‐bottom:  1px  solid  white(.6);   }  1    2    3    4    5
  43. 95.

       box-­‐shadow:  0  2px  5px  5px  skyblue,      

                           0  10px  5px  5px  white(.6);  5    6
  44. 96.

       box-­‐shadow:  0  -­‐14px  10px  5px  #45b3e0,      

                           0  2px  5px  5px  skyblue,                              0  10px  5px  5px  white(.6);  5    6    7
  45. 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
  46. 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
  47. 99.

       background-­‐image:  radial-­‐gradient(circle  at            

                                 38px  38px,  #333  10px,                                          transparent  10px); 10   11   12
  48. 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
  49. 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
  50. 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
  51. 104.
  52. 105.
  53. 106.
  54. 107.
  55. 108.
  56. 109.
  57. 110.
  58. 111.
  59. 112.
  60. 113.
  61. 114.
  62. 115.
  63. 116.
  64. 117.
  65. 118.
  66. 119.
  67. 120.
  68. 121.
  69. 123.
  70. 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
  71. 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
  72. 129.
  73. 130.
  74. 132.

       background-­‐image:  linear-­‐gradient(to  bottom…),            

                                         linear-­‐gradient(to  bottom…);  1    2
  75. 133.

       background-­‐image:  linear-­‐gradient(to  right…),            

                                 linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2    3
  76. 134.

       background-­‐image:  linear-­‐gradient(to  right…),            

                                   linear-­‐gradient(to  right…),                                          linear-­‐gradient(to  bottom…),                                                  linear-­‐gradient(to  bottom…);  1    2    3    4
  77. 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
  78. 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
  79. 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
  80. 141.
  81. 142.

    SVG

  82. 143.
  83. 147.
  84. 150.