@anatudor Well, I have a solution, but it only works in Chrome, and that is because Iβve just learned about the @property rule.
The other thing I learned about for this solution was `background-blend-mode`, which I am super excited about.
Curious about your thoughts on attempt 2:
How would you code this with the following constraints:
β
pure CSS
β οΈ under 10 declarations
β οΈ 1 element
β no pseudos
β no JS
β οΈ no SVG, no images in general save for at most 2 CSS gradients
So here's a little #cssChallenge2022: how would you #css this pattern?
β οΈ 1 HTML element
β no pseudos
β οΈ pure CSS
β no JS
β no SVG
β οΈ no images in general save for CSS gradients
β¨ acute (top) rhombus angle is 76Β°
β¨ rhombus width is 5em
β¨ light gold is #fd8
PS - If you're a $5+ patron on Patreon, know I've already posted the solution there π π€«
Bonus, this is also what helps solve a recent challenge (this one https://mastodon.social/@anatudor/109404963501056367): instead of a sharp gradient transition between transparent and grey, have a smooth one in order to progressively desaturate the top layer going from top (vibrant) to bottom (completely desaturated).
Live demos:
π« https://codepen.io/thebabydino/pen/yLEjjWE
How would you pure CSS background like the ones below? Vibrant at the top, desaturated at the bottom?
Constraints:
β οΈ 1 element per background, no pseudos
β no JS
β οΈ no SVG, no images save for at most 2 CSS gradients
Note they're not as dark/ light everywhere at the bottom (where fully desaturated). πΌ
Hex for the first two:
π¨ 54478c,2c699a,048ba8,0db39e,16db93,83e377,b9e769,efea5a,f1c453,f29e4c
π¨ 001219,005f73,0a9396,94d2bd,e9d8a6,ee9b00,ca6702,bb3e03,ae2012,9b2226
Philip Zastrow
Ana Tudor π―