A presentation at Vienna Calling by Michelle Barker
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
A lightning talk on how I built the Zig-Zag gradient lab: a Codepen experiment with CSS gradients, custom properties and a little bit of Javascript.
for free. You
can too.