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

Illustration with CSS

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.

Lynn Fisher

December 05, 2015
Tweet

More Decks by Lynn Fisher

Other Decks in Technology

Transcript

  1. HELLO!

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. @lynnandtonic

    View Slide

  6. CSS
    ILLUSTRATION

    View Slide

  7. • DRAWING PICTURES IN CSS

    View Slide

  8. • DRAWING PICTURES IN CSS
    • DRAWING PICTURES …IN GENERAL

    View Slide

  9. • DRAWING PICTURES IN CSS
    • DRAWING PICTURES …IN GENERAL
    • ART

    View Slide

  10. • DRAWING PICTURES IN CSS
    • DRAWING PICTURES …IN GENERAL
    • ART
    • TECHNIQUES

    View Slide

  11. • DRAWING PICTURES IN CSS
    • DRAWING PICTURES …IN GENERAL
    • ART
    • TECHNIQUES
    • WHY ARE WE DOING THIS?

    View Slide

  12. • DRAWING PICTURES IN CSS
    • DRAWING PICTURES …IN GENERAL
    • ART
    • TECHNIQUES
    • WHY ARE WE DOING THIS?
    • SVG

    View Slide

  13. CSS OPERA LOGO - DAVID DESANDRO

    View Slide

  14. CSS OPERA LOGO - DAVID DESANDRO

    View Slide

  15. SIMPSONS IN CSS - CHRIS PATTLE

    View Slide

  16. AVENGERS IN CSS - MARIO S. MASELLI

    View Slide

  17. SPECIES IN PIECES - BRYAN JAMES

    View Slide

  18. CSS LEGO EMMETT - RACHEL BULL

    View Slide

  19. CSS MIXTAPE - TOM HAZLEDINE

    View Slide

  20. CSS ZARA PICKEN ILLUSTRATION - ROSH JUTHERFORD

    View Slide

  21. codepen.io

    View Slide

  22. WHEN WOULD
    I EVER USE THIS?

    View Slide

  23. INTERMEDIA

    View Slide

  24. PURPOSEFUL
    STUDY & PRACTICE
    OF YOUR MEDIUM

    View Slide

  25. UNDERSTAND
    & STRETCH

    View Slide

  26. UNDERSTAND
    & STRETCH

    View Slide

  27. CSS IS A
    WEB DESIGNER’S
    MEDIUM

    View Slide

  28. PURPOSEFUL
    STUDY & PRACTICE

    View Slide

  29. A SINGLE DIV
    a.singlediv.com

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. LIMITED TOOLKIT

    View Slide

  34. CONSTRAINTS

    View Slide

  35. LIMITED RESOURCES

    View Slide

  36.  
         
             
             
             
             
             
             
             
             
             
             
             
             
             
             
     1  
     2  
     3  
     4  
     5  
     6  
     7  
     8  
     9  
    10  
    11  
    12  
    13  
    14  
    15  
    16  

    View Slide

  37. 49  s

    View Slide

  38. 10  s

    View Slide

  39.  3  s

    View Slide


  40.  1

    View Slide

  41. ONE DIV
    NO EXCEPTIONS

    View Slide

  42. NO ADDING
    BLACK PAINT

    View Slide


  43.  1

    View Slide


  44.  1

    View Slide


  45.  1

    View Slide

  46.  

     1  
     2

    View Slide

  47.  

     1  
     2

    View Slide

  48.  

     1  
     2

    View Slide

  49.  

     1  
     2

    View Slide

  50. CSS IS BADASS

    View Slide

  51. TECHNIQUES

    View Slide

  52. SHAPES

    View Slide

  53. RECTANGLES
    CIRCLES
    TRIANGLES

    View Slide

  54. .rectangle  {  
       width:  80px;  
       height:  50px;  
       background:  red;  
    }
     1  
     2  
     3  
     4  
     5

    View Slide

  55. .circle  {  
       width:  50px;  
       height:  50px;  
       background:  red;  
       border-­‐radius:  50%;  
    }
     1  
     2  
     3  
     4  
     5  
     6

    View Slide

  56. .triangle  {  
       border-­‐bottom:  50px  solid  red;  
       border-­‐left:  50px  solid  transparent;  
       border-­‐right:  50px  solid  transparent;  
    }
     1  
     2  
     3  
     4  
     5

    View Slide

  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

    View Slide

  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

    View Slide

  59. .dunno  {  
       border-­‐radius:  150px  /  70px;  
    }
     1  
     2  
     3

    View Slide

  60. .dunno  {  
       border-­‐top-­‐left-­‐radius:  150px  50px;  
       border-­‐top-­‐right-­‐radius:  100px;  
    }
     1  
     2  
     3  
     4

    View Slide

  61. BEYOND
    SHAPES

    View Slide

  62. BOX SHADOWS
    GRADIENTS

    View Slide

  63. .circle  {  
       box-­‐shadow:  10px  10px  10px  black;  
    }
     1  
     2  
     3

    View Slide

  64. .circle  {  
       box-­‐shadow:  10px  10px  10px  black,  
                               100px  0  0  yellow;  
    }
     1  
     2  
     3  
     4

    View Slide

  65. .circle  {  
       box-­‐shadow:  10px  10px  10px  black,  
                               100px  0  0  yellow,  
                               180px  0  0  blue;  
    }
     1  
     2  
     3  
     4  
     5

    View Slide

  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

    View Slide

  67. .cylinder  {  
       background-­‐image:  linear-­‐gradient(to  right,  
                                           grey,  white,  grey,  black);  
    }
     1  
     2  
     3  
     4  
     5

    View Slide

  68. .stripes  {  
       background-­‐image:  repeating-­‐linear-­‐gradient(  
                                           to  right,  
                                           red,  red  20px,  
                                           grey  20px,  grey  40px);  
    }
     1  
     2  
     3  
     4  
     5  
     6

    View Slide

  69. .multi  {  
       background-­‐image:  linear-­‐gradient(to  bottom,  
                                           red,  blue);  
    }
     1  
     2  
     3  
     4

    View Slide

  70. .multi  {  
       background-­‐image:  linear-­‐gradient(to  right,  
                                           transparent,  black),  
                                           linear-­‐gradient(to  bottom,  
                                           red,  blue);  
    }
     1  
     2  
     3  
     4  
     5  
     6

    View Slide

  71. PSEUDO ELEMENTS

    View Slide

  72. div::before  {  
       background:  yellow;  
    }  
    div::after  {  
       background:  blue;  
    }
     1  
     2  
     3  
     4  
     5  
     6

    View Slide

  73. div::before  {  
       background:  yellow;  
    }  
    div::after  {  
       background:  blue;  
    }
     1  
     2  
     3  
     4  
     5  
     6

    View Slide

  74. DRAWING

    View Slide

  75. #@$%!

    View Slide

  76. EDGAR DEGAS
    “Drawing is not the same as form;
    it is a way of seeing form.”

    View Slide

  77. FORM
    HUE
    VALUE

    View Slide

  78. SHAPE

    View Slide

  79. COLOR

    View Slide

  80. LIGHT

    View Slide

  81. View Slide

  82. LIGHT

    View Slide

  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

    View Slide

  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

    View Slide

  85. EXAMPLES

    View Slide

  86. .button  {  
       background:  skyblue;  
       border-­‐radius:  50%;  
    }
     1  
     2  
     3  
     4

    View Slide

  87.    box-­‐shadow:  0  7px  10px  black(.3);
     4

    View Slide

  88.    box-­‐shadow:  inset  0  -­‐15px  10px  #45b3e0,  
                               0  7px  10px  black(.3);
     4  
     5

    View Slide

  89.    box-­‐shadow:  inset  0  -­‐10px  10px  black(.3),  
                               inset  0  -­‐15px  10px  #45b3e0,  
                               0  7px  10px  black(.3);
     4  
     5  
     6

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  93. .button::before  {  
       border-­‐radius:  50%;  
       border-­‐top:  1px  solid  black(.6);  
       border-­‐bottom:  1px  solid  white(.6);  
    }
     1  
     2  
     3  
     4  
     5

    View Slide

  94.    box-­‐shadow:  0  10px  5px  5px  white(.6);
     5

    View Slide

  95.    box-­‐shadow:  0  2px  5px  5px  skyblue,  
                               0  10px  5px  5px  white(.6);
     5  
     6

    View Slide

  96.    box-­‐shadow:  0  -­‐14px  10px  5px  #45b3e0,  
                               0  2px  5px  5px  skyblue,  
                               0  10px  5px  5px  white(.6);
     5  
     6  
     7

    View Slide

  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

    View Slide

  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

    View Slide

  99.    background-­‐image:  radial-­‐gradient(circle  at  
                                           38px  38px,  #333  10px,  
                                           transparent  10px);
    10  
    11  
    12

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  103. .button::after  {  
       transform:  rotate(45deg);  
    }  
     1  
     2  
     3

    View Slide

  104. View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. View Slide

  121. View Slide


  122.  1

    View Slide

  123. MULTIPLES

    View Slide

  124. .camera::before  {  
       background:  #444;  
    }  
     1  
     2  
     3

    View Slide

  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

    View Slide

  126. .camera::after  {  
       background:  #ccc;  
    }  
     1  
     2  
     3

    View Slide

  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

    View Slide

  128. BACKGROUND
    LAYERS

    View Slide

  129. View Slide

  130. View Slide

  131.    background-­‐image:  linear-­‐gradient(to  bottom…);  
     1

    View Slide

  132.    background-­‐image:  linear-­‐gradient(to  bottom…),          
                                           linear-­‐gradient(to  bottom…);
     1  
     2

    View Slide

  133.    background-­‐image:  linear-­‐gradient(to  right…),  
                                           linear-­‐gradient(to  bottom…),          
                                           linear-­‐gradient(to  bottom…);
     1  
     2  
     3

    View Slide

  134.    background-­‐image:  linear-­‐gradient(to  right…),    
                                           linear-­‐gradient(to  right…),  
                                           linear-­‐gradient(to  bottom…),          
                                           linear-­‐gradient(to  bottom…);
     1  
     2  
     3  
     4

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  138. github.com/lynnandtonic/a-single-div

    View Slide

  139. WHEN WOULD
    I EVER USE THIS?

    View Slide

  140. IS THIS
    PRACTICAL?

    View Slide

  141. NOT REALLY

    View Slide

  142. SVG

    View Slide

  143. TIME

    View Slide

  144. PERFORMANCE

    View Slide

  145. BROWSER SUPPORT

    View Slide

  146. THE CASCADE
    CAN BE FRAGILE

    View Slide

  147. AND YET…

    View Slide

  148. COMPS ARE
    DRAWINGS OF WEBSITES

    View Slide

  149. COMPS ARE
    DRAWINGS OF WEBSITES

    View Slide

  150. STRETCH

    View Slide

  151. DO MORE
    WITH LESS

    View Slide

  152. CSS IS AWESOME

    View Slide

  153. WE TYPE WORDS
    INTO A TEXT EDITOR

    View Slide

  154. ART COMES OUT
    THE OTHER SIDE

    View Slide

  155. THANK YOU
    @lynnandtonic

    View Slide