Retro 3D 🍫🦋 effect on @codepen: https://codepen.io/thebabydino/pen/bGybXVj

No text duplication whatsoever, no long shadow list, no funky fonts, no JS, no images other than CSS gradients. Extrusion is all #SVG #filter magic 🪄✨ - as illustrated by the recording below including the DevTools panel.

#svgFilter #textEffects #textEffect #extrude #extrusion #code #coding #frontend #CSS #web #dev #webDev #webDevelopment #cssGradient

Options for fading an element's background image:

a - if the backdrop behind the element is solid

b - if the backdrop behind the element is another image

Another 2 in 1 #CSS demo on @codepen https://codepen.io/thebabydino/pen/NPxxQxq

#cssGradient #mask #code #frontend #web #dev #webDevelopment #webDev #coding

Avatar border effect. Single `img` element (so no pseudos), minimal #CSS. Real transparency between actual image and border.

Live on @codepen https://codepen.io/thebabydino/pen/RwKyzKQ

#code #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #frontend

Remake of an old, old @codepen animation with 2025 #CSS https://codepen.io/thebabydino/pen/jOZPZL

Now using `conic-gradient()` + `mask` instead of an SVG segments ring image. CSS `grid` for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more, check it out! 🐱

Original code preserved in Pen description for web history.

#conicGradient #cssGradient #code #coding #frontend #cssGrid #cssLayout #web #dev #webDev #webDevelopment #containerQueries

Ubuntu was assaulting me with some errors I couldn't figure out, so I uninstalled and installed some stuff again and some settings got lost.

So I got hit with an abomination produced by Search Assist when I looked up my article to reference it in the description of a CodePen demo.

#CSS #AI #code #coding #frontend #cssGradient #halftone #imageEffect #web #dev #webDev #webDevelopment #cssPattern #aiSlop

A fun simple little pure #CSS demo on @codepen: bubbles pattern https://codepen.io/thebabydino/pen/dyeZVNO

#cssGradient #cssMask #cssPattern #cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment

#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

RE: https://mastodon.social/@anatudor/115328348926022550

Also, if you could test this in actual Safari and let me know if you see the same Firefox issue (horizontal lines at certain levels of browser zoom), I'd be really grateful 🙏

https://codepen.io/thebabydino/full/WbroEva

Boosts appreciated if you cannot test yourself.

#SVG #filter #SVGFilter #cssGradient #web #dev #webDev #webDevelopment #code #coding #frontend

According to MDN, Safari supports hue interpolation method.

https://developer.mozilla.org/en-US/docs/Web/CSS/hue-interpolation-method

Does it really? Or why doesn't it work for me when I test via Epiphany?

If you can test in actual Safari, please let me know if the MDN examples work for you. If you can't, boosts welcome.

Thanks!

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

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

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