Building the Zig-Zag Gradient Lab

A presentation at Vienna Calling in July 2020 in by Michelle Barker

Slide 1

Slide 1

Building the Zig-Zag Gradient Lab @MicheBarks

Slide 2

Slide 2

codepen.io

Slide 3

Slide 3

Slide 4

Slide 4

background: linear-gradient(45deg, darkorchid 50%, turquoise 50%); codepen.io/michellebarker/pen/dyGgLoR

Slide 5

Slide 5

background: linear-gradient(45deg, darkorchid 50%, turquoise 50%); background-size: 5rem 5rem; codepen.io/michellebarker/pen/OJMBGyo

Slide 6

Slide 6

background: radial-gradient(darkorchid 40%, turquoise 40%); background-size: 5rem 5rem; codepen.io/michellebarker/pen/RwreORM

Slide 7

Slide 7

background: radial-gradient(darkorchid 30% … background-size: 20rem 20rem, 5rem 5rem, 10rem 10rem, 10rem 10rem; codepen.io/michellebarker/pen/wvMYZdN

Slide 8

Slide 8

background: repeating-linear-gradient(45deg, darkorchid, darkorchid 40px, turquoise 40px, turquoise 80px, chartreuse 80px, chartreuse 120px); codepen.io/michellebarker/pen/YzwJMOj

Slide 9

Slide 9

background: repeating-radial-gradient(circle at center, darkorchid, darkorchid 40px, turquoise 40px, turquoise 80px, chartreuse 80px, chartreuse 120px); codepen.io/michellebarker/pen/eYJPoxg

Slide 10

Slide 10

background: repeating-radial-gradient(circle at center,… background-size: 220px 220px; codepen.io/michellebarker/pen/YzwJMMJ

Slide 11

Slide 11

codepen.io/michellebarker/pen/ExPdJqb

Slide 12

Slide 12

Procrastination codepen.io/michellebarker/pen/ExPdJqb

Slide 13

Slide 13

background: repeating-linear-gradient(45deg, darkorchid, darkorchid 40px, turquoise 40px, turquoise 80px, chartreuse 80px, chartreuse 120px); background-size: 100px 100%;

Slide 14

Slide 14

background: repeating-linear-gradient(-45deg, darkorchid, darkorchid 40px, turquoise 40px, turquoise 80px, chartreuse 80px, chartreuse 120px); background-size: 100px 100%;

Slide 15

Slide 15

mask-image: repeating-linear-gradient(to right, black 100px, black 200px, transparent 200px, transparent 300px);

Slide 16

Slide 16

mask-image: repeating-linear-gradient(to right, black 100px, black 200px, transparent 200px, transparent 300px);

Slide 17

Slide 17

Slide 18

Slide 18

leaverou.github.io/css3patterns

Slide 19

Slide 19

background: repeating-linear-gradient(45deg, darkorchid, darkorchid 40px, turquoise 40px, turquoise 80px, chartreuse 80px, chartreuse 120px); background-size: 100px 100%;

Slide 20

Slide 20

Custom Properties —t: 40px; —w: 100px; background: repeating-linear-gradient(45deg, darkorchid, darkorchid var(—t), turquoise var(—t), turquoise calc(var(—t) * 2), chartreuse calc(var(—t) * 2), chartreuse calc(var(—t) * 3)); background-size: var(—w) 100%;

Slide 21

Slide 21

Custom Properties —t: 40px; —w: 100px; background: repeating-linear-gradient(45deg, darkorchid, darkorchid var(—t), turquoise var(—t), turquoise calc(var(—t) * 2), chartreuse calc(var(—t) * 2), chartreuse calc(var(—t) * 3)); background-size: var(—w) 100%;

Slide 22

Slide 22

Custom Properties —t: 20px; —w: 120px; background: repeating-linear-gradient(45deg, darkorchid, darkorchid var(—t), turquoise var(—t), turquoise calc(var(—t) * 2), chartreuse calc(var(—t) * 2), chartreuse calc(var(—t) * 3)); background-size: var(—w) 100%;

Slide 23

Slide 23

Custom Properties —t: 40px; —w: 40px; background: repeating-linear-gradient(45deg, darkorchid, darkorchid var(—t), turquoise var(—t), turquoise calc(var(—t) * 2), chartreuse calc(var(—t) * 2), chartreuse calc(var(—t) * 3)); background-size: var(—w) 100%;

Slide 24

Slide 24

Custom Properties —t: 40px; —w: 40px; —angle: 40deg; background: repeating-linear-gradient( var(—angle), darkorchid, darkorchid var(-t), turquoise var(—t), turquoise calc(var(—t) * 2), chartreuse calc(var(—t) * 2), chartreuse calc(var(—t) * 3)); background-size: var(—w) 100%;

Slide 25

Slide 25

Custom Properties —t: 40px; —w: 40px; —angle: 120deg; background: repeating-linear-gradient( var(—angle), darkorchid, darkorchid var(-t), turquoise var(—t), turquoise calc(var(—t) * 2), chartreuse calc(var(—t) * 2), chartreuse calc(var(—t) * 3)); background-size: var(—w) 100%;

Slide 26

Slide 26

codepen.io/michellebarker/pen/abdKLLz

Slide 27

Slide 27

✨ Houdini ✨ …a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine —MDN

Slide 28

Slide 28

transition: —angle 200ms, —t 200ms, —w 200ms;

Slide 29

Slide 29

ishoudinireadyyet.com

Slide 30

Slide 30

codepen.io/michellebarker/pen/abdKLLz

Slide 31

Slide 31

Hue Saturation Lightness

Slide 32

Slide 32

—color1: hsl(var(—h1), 90%, 50%);

Slide 33

Slide 33

—h1: 0deg;

Slide 34

Slide 34

—h1: 0deg; —h2: calc(var(—h1) + calc(180deg - 30deg)) —h3: calc(var(—h1) + calc(180deg + 30deg))

Slide 35

Slide 35

Slide 36

Slide 36

localStorage localStorage.setItem(‘angle’, ‘45’)

Slide 37

Slide 37

localStorage localStorage.getItem(‘angle’)

Slide 38

Slide 38

codepen.io/michellebarker/pen/abdKLLz

Slide 39

Slide 39

CSS { In Real Life } css-irl.info @MicheBarks / @CSSInRealLife