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!
   

   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. View Slide

41. ONE DIV
    NO EXCEPTIONS
    

    View Slide

42. NO ADDING
    BLACK PAINT
    

    View Slide

43. View Slide

44. View Slide

45. 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. 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