Building the Zig-Zag Gradient Lab

Building the Zig-Zag Gradient Lab @MicheBarks

codepen.io

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

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

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

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

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

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

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

codepen.io/michellebarker/pen/ExPdJqb

Procrastination codepen.io/michellebarker/pen/ExPdJqb

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

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

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

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

leaverou.github.io/css3patterns

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

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%;

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%;

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%;

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%;

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%;

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%;

codepen.io/michellebarker/pen/abdKLLz

✨ 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

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

ishoudinireadyyet.com

codepen.io/michellebarker/pen/abdKLLz

Hue Saturation Lightness

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

—h1: 0deg;

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

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

localStorage localStorage.getItem(‘angle’)

codepen.io/michellebarker/pen/abdKLLz

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