Get the latest tech news

An Introduction to CSS-Doodle

ss-doodle Yuan Chuan How it begins <div class="grid"> <div class="cell"> <div class="cell"> <div class="cell"> <div class="cell"> <!-- ... --> </div> <style> .cell:nth-child(1) { /* ...

@grid: 6x3 / 50vw auto; --mode: @pl( normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, plus-darker, plus-lighter ); background: @doodle( @grid: 3x1; mix-blend-mode: @p(--mode); border-radius: 50%; background: @pn(red, blue, yellow); @size: 40%; @place: @plot(r: .25); ); @content: @p(--mode); font-size: .5em; place-content: end center; @grid: 1 / 320px 2em; :doodle { height: 5.1em; } @content: @cycle.m5.n; font-size: .75em; word-break: break-all; width: 7ch; justify-self: start; @grid: 1 / 75vh; background: @m100( conic-gradient( from @pd(±15, ±30, ±45, ±60, ±90)deg, @m100(red, blue, yellow) ) @pl(0%, 100%) 100% / 1500% 1500% no-repeat ); background-blend-mode: difference; filter: invert(1) hue-rotate(220deg);

Get the Android app