#csschallenge2022 — Public Fediverse posts

@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:

https://codepen.io/zastrow/pen/poZJgqY

#cssChallenge2022 #css

@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:

https://codepen.io/zastrow/pen/poZJgqY

#cssChallenge2022 #css

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

#cssChallenge2022 #css

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

#cssChallenge2022 #css

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 👀 🤫

#cssPatterns

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 👀 🤫

#cssPatterns

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

💫 https://codepen.io/thebabydino/full/xxzjJXL

#css #tinyCodingTips #CodePen #blending #cssChallenge2022

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

💫 https://codepen.io/thebabydino/full/xxzjJXL

#css #tinyCodingTips #CodePen #blending #cssChallenge2022

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

#css #cssChallenge2022

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

#css #cssChallenge2022