#csschallenge2025 — Public Fediverse posts

#cssChallenge2025

How would you code this (pad non-square image to square with blurred version of itself) using:

✳️ a single `img` elem, no wrappers/ pseudos
✳️ at most 4 #CSS declarations (without the grid layout)
✳️ an #SVG `filter`

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

#cssChallenge2025

How would you get this result?The sections have unknown heights, impossible to predict how tall each will be and on narrow screens, we first have the top ones one under another and then the bottom ones one under another.

#CSS #code #coding #frontend #cssGrid #web #dev #webDev #webDevelopment

#cssChallenge2025 You have a `section` with a `p` on the left & an `img` on the right. How do you make the `img` height always be determined by the `p` with the tiniest bit of CSS? 😼

No changing the HTML structure in any way, no pseudos, no background declarations, no JS. Just a tiny bit of #CSS.

Starter code https://codepen.io/pen?template=47a14eee592810d124441bbf117f4f01

#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

#CSS #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment