Conversation

Notices

1. Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Friday, 11-Oct-2024 23:00:48 JST Ana Tudor 🐯

   • CodePen

   11! of my demos throughout the first @codepen trending pages!

   #SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend

   • Aral Balkan repeated this.
   • Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Friday, 11-Oct-2024 23:00:48 JST Ana Tudor 🐯

     in reply to

     The first one is this text effect that uses absolutely no images whatsoever save for #CSS gradients.

     Some #SVG filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.

     https://codepen.io/thebabydino/pen/gONbppb

     #filter #svgFilter #texture #textEffect #textEffects #noise #cssGradient #code #coding #3D #3dText #frontend #web #dev #webDev #webDevelopment

     Aral Balkan repeated this.
   • Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Friday, 11-Oct-2024 23:01:26 JST Ana Tudor 🐯

     in reply to

     • CodePen

     The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.

     Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.

     A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR

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

     Aral Balkan repeated this.
   • Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Friday, 11-Oct-2024 23:01:58 JST Ana Tudor 🐯

     in reply to

     The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/

     It's similar to something you can find on a lot of websites with a couple extra constraints:
     ✨ no extra elements, no pseudos
     ✨ working fine on top of image background

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

   • Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 11-Oct-2024 23:02:34 JST Aral Balkan

     in reply to

     @anatudor In case I don’t say it enough, love your work :)