Illustration with CSS

HELLO!

@lynnandtonic

CSS ILLUSTRATION

• DRAWING PICTURES IN CSS

• DRAWING PICTURES IN CSS • DRAWING PICTURES …IN GENERAL

• ART

• ART • TECHNIQUES

• ART • TECHNIQUES • WHY ARE WE DOING THIS?

• ART • TECHNIQUES • WHY ARE WE DOING THIS? • SVG

CSS OPERA LOGO - DAVID DESANDRO

SIMPSONS IN CSS - CHRIS PATTLE

AVENGERS IN CSS - MARIO S. MASELLI

SPECIES IN PIECES - BRYAN JAMES

CSS LEGO EMMETT - RACHEL BULL

CSS MIXTAPE - TOM HAZLEDINE

CSS ZARA PICKEN ILLUSTRATION - ROSH JUTHERFORD

codepen.io

WHEN WOULD I EVER USE THIS?

INTERMEDIA

PURPOSEFUL STUDY & PRACTICE OF YOUR MEDIUM

UNDERSTAND & STRETCH

CSS IS A WEB DESIGNER’S MEDIUM

PURPOSEFUL STUDY & PRACTICE

A SINGLE DIV a.singlediv.com

LIMITED TOOLKIT

CONSTRAINTS

LIMITED RESOURCES

<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

49 <div>s

10 <div>s

3 <div>s

<div class="icon icon-‐battery"></div> 1

ONE DIV NO EXCEPTIONS

NO ADDING BLACK PAINT

<div class="camera"></div> 1

<div class="battery"></div> 1

<div class="mickey-‐hat"></div> 1

<div class="mushroom"></div> <div class="warp-‐pipe"></div> 1 2

<div class="tardis"></div> <div class="hobbit-‐door"></div> 1 2

<div class="breakfast"></div> <div class="marshmallow"></div> 1 2

<div class="button"></div> <div class="label"></div> 1 2

CSS IS BADASS

TECHNIQUES

SHAPES

RECTANGLES CIRCLES TRIANGLES

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

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

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

.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

.trapezoid { width: 50px; border-‐bottom: 50px
solid red; border-‐left: 50px solid transparent; border-‐right: 50px solid transparent; } 1 2 3 4 5 6

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

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

BEYOND SHAPES

BOX SHADOWS GRADIENTS

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

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

100px 0 0 yellow, 180px 0 0 blue; } 1 2 3 4 5

100px 0 0 yellow, 180px 0 0 blue, 280px 0 0 -‐20px grey; } 1 2 3 4 5 6

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

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

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

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

PSEUDO ELEMENTS

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

DRAWING

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

FORM HUE VALUE

.button { background-‐image: linear-‐gradient(to bottom,
#eee, #ccc); box-‐shadow: 5px 0 5px rgba(0,0,0,.4); } 1 2 3 4 5

EXAMPLES

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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

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

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

<div class="button"></div> 1

MULTIPLES

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

.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

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

.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

BACKGROUND LAYERS

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

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

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

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

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

github.com/lynnandtonic/a-single-div

WHEN WOULD I EVER USE THIS?

IS THIS PRACTICAL?

NOT REALLY

PERFORMANCE

BROWSER SUPPORT

THE CASCADE CAN BE FRAGILE

AND YET…

COMPS ARE DRAWINGS OF WEBSITES

STRETCH

DO MORE WITH LESS

CSS IS AWESOME

WE TYPE WORDS INTO A TEXT EDITOR

ART COMES OUT THE OTHER SIDE

THANK YOU @lynnandtonic

Illustration with CSS

Illustration with CSS

More Decks by Lynn Fisher

Other Decks in Technology

Featured

Transcript