home.social

Search

208 results for “coderanch”

  1. CodePen @codepen ·

    The CSS Harvest continues!
    This week, we're building custom select elements with `appearance: base-select; `
    codepen.io/challenges/2025/nov
    Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  2. CodePen @codepen ·

    The November is a CSS Harvest 🌾
    This month, we're working with new CSS features, starting with CSS shape() and corner-shape

    codepen.io/challenges/2025/nov

    Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  3. CodePen @codepen ·

    It's the final week of the Halloween !
    Let's have some fun 🎃

    codepen.io/challenges/2025/oct

    Thanks @Redisinc for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  4. CodePen @codepen ·

    Our Halloween continues!
    This week is all about Halloween Tricks 👻

    codepen.io/challenges/2025/oct

    Thanks @Redisinc for sponsoring! srv.buysellads.com/ads/long/x/

    #codepenchallenge
  5. CodePen @codepen ·

    The Halloween continues!
    This week, it's time to put on the Halloween Masks

    codepen.io/challenges/2025/oct

    Thanks @Redisinc for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  6. CodePen @codepen ·

    The October is on!
    It's Halloween Time 🎃
    codepen.io/challenges/2025/oct

    Thanks @Redisinc for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  7. CodePen @codepen ·

    It's the final week of the September
    This week, let's spin the color wheel!

    codepen.io/challenges/2025/sep

    Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  8. CodePen @codepen ·

    Week three of the September is on
    This week, let's go monochrome!

    codepen.io/challenges/2025/sep

    Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  9. Joe Crawford @[email protected] ·

    Futzed with the "Monochrome" #CodePenChallenge codepen.io/artlung/full/MYaNGra

    #codepenchallenge
  10. CodePen @codepen ·

    New week, new !
    This week, we're blending & mixing colors 🎨

    codepen.io/challenges/2025/sep

    Thanks @MongoDB for sponsoring! srv.buysellads.com/ads/long/x/

    #codepenchallenge
  11. CodePen @codepen ·

    It's the final week of the August !
    Let's play with light & shadow ❍

    codepen.io/challenges/2025/aug

    Thanks @pluralsight for sponsoring srv.buysellads.com/ads/long/x/

    #codepenchallenge
  12. CodePen @codepen ·

    It's week 3 of the August !
    This week is all about reflection🪞

    codepen.io/challenges/2025/aug

    Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  13. Thea @[email protected] ·

    Shadow challenge complete! ✨
    Used data-text with CSS attr() for the shadows. No need to copy text everywhere in HTML, much cleaner this way 👩🏻‍💻 😊
    #CodePenChallenge #cpc-shadow #CSS
    codepen.io/HighFlyer/pen/JoYOv

    #codepenchallenge #cpc #css
  14. CodePen @codepen ·

    The August continues!
    This week, we move into the shadows ❍

    codepen.io/challenges/2025/aug

    Thanks @pluralsight for sponsoring! srv.buysellads.com/ads/long/x/

    #codepenchallenge
  15. Thea @[email protected] ·

    New #CodePenChallenge entry: Aurora Button with gradient tracking shine 👩🏻‍💻

    - Interactive tracking that follows your cursor ✅
    - Multi-layered shine effects with glass morphism✅
    #cpc-shine
    codepen.io/HighFlyer/full/NPGj

    #codepenchallenge #cpc
  16. CodePen @codepen ·

    The August is on!
    This month is all about light & shadow
    It time to shine 💡
    codepen.io/challenges/2025/aug

    #codepenchallenge
  17. CodePen @codepen ·

    It's the final week of the July !
    This week, it's time to freestyle 🛹

    codepen.io/challenges/2025/jul

    Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/

    #codepenchallenge
  18. Ana Tudor 🐯 @[email protected] ·

    No text duplication single div 3D + stroke effects (double stroke, gradient stroke or stroke with shadow) - it's all in the magic 🪄 of SVG filters!

    Live on @codepen:

    ✨ codepen.io/thebabydino/pen/OJG
    ✨ codepen.io/thebabydino/pen/bGJ
    ✨ codepen.io/thebabydino/pen/YzM
    ✨ codepen.io/thebabydino/pen/bGy

    #CodePenChallenge #CodePen #SVG #filter #svgFilter #dropShadow #CSS #cssFilter #cssGradient #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment #3d #extrusion

    #codepenchallenge #codepen #svg #filter #svgfilter #dropshadow
  19. Ana Tudor 🐯 @[email protected] ·

    No text duplication double neon with some SVG filter magic 🪄 (if you look closely, it's not just a white outline with a glow)

    @codepen demo: codepen.io/thebabydino/full/OJ

    #CodePenChallenge #SVG #filter #svgFilter #dropShadow #CSS #cssFilter #cssGradient #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment

    #codepenchallenge #svg #filter #svgfilter #dropshadow #css
  20. Ana Tudor 🐯 @[email protected] ·

    No text duplication layered 3D effect with SVG filter magic 🪄

    Live on @codepen :

    🍭 codepen.io/thebabydino/pen/LYv
    🍭 codepen.io/thebabydino/pen/vYM

    #CodePenChallenge

    In Bucharest, there used to be a cake shop called Candy Cat (logo 🐈 below). More recently, there's a candy 🍬 store (last image).

    #CodePen #SVG #filter #svgFilter #dropShadow #CSS #cssFilter #cssGradient #cssMask #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment #halftone #3d

    #codepenchallenge #codepen #svg #filter #svgfilter #dropshadow
  21. Ana Tudor 🐯 @[email protected] ·

    3D + multilayer + other effects (halftone, inner shadow) with no text duplication, just some SVG filter magic 🪄

    Live on @codepen:

    ✨ codepen.io/thebabydino/pen/abM
    ✨ codepen.io/thebabydino/pen/PoL
    ✨ codepen.io/thebabydino/pen/LYv
    ✨ codepen.io/thebabydino/pen/Pog

    #CodePenChallenge #CodePen #SVG #filter #svgFilter #dropShadow #CSS #cssFilter #cssGradient #cssMask #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment #halftone #3d

    #codepenchallenge #codepen #svg #filter #svgfilter #dropshadow
  22. Ana Tudor 🐯 @[email protected] ·

    Multi layers with no text duplication. Just the magic 🪄 of SVG filters. Live on @codepen:

    ✨ codepen.io/thebabydino/pen/PoV
    ✨ codepen.io/thebabydino/pen/XWO
    ✨ codepen.io/thebabydino/pen/WNm
    ✨ codepen.io/thebabydino/pen/rNb

    #CodePenChallenge #CodePen #SVG #filter #svgFilter #dropShadow #CSS #cssFilter #cssGradient #cssMask #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment

    #codepenchallenge #codepen #svg #filter #svgfilter #dropshadow
  23. Ana Tudor 🐯 @[email protected] ·

    You might think all it takes here is `background-clip: text`, `text-stroke` and `text-shadow`.

    Except it doesn't work! `text-shadow` gets drawn on top of the polka dots/ hash lines background in this case!

    SVG filter magic 🪄 to the rescue!

    Here's the solution on @codepen codepen.io/thebabydino/pen/QWP

    #CodePenChallenge #CodePen #SVG #filter #svgFilter #dropShadow #CSS #cssFilter #cssGradient #cssMask #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment

    #codepenchallenge #codepen #svg #filter #svgfilter #dropshadow
  24. Ana Tudor 🐯 @[email protected] ·

    A few more *no text duplication* slice/ offset demos on @codepen with SVG filter magic 🪄✨🐈 for this week's #CodePenChallenge

    ✨ codepen.io/thebabydino/pen/vYb
    ✨ codepen.io/thebabydino/pen/YzM
    ✨ codepen.io/thebabydino/pen/ZEZ
    ✨ codepen.io/thebabydino/pen/NWm

    #CodePen #SVG #filter #svgFilter #dropShadow #CSS #cssFilter #cssGradient #cssMask #text #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment

    #codepenchallenge #codepen #svg #filter #svgfilter #dropshadow
  25. Ana Tudor 🐯 @[email protected] ·

    There's also the option of duotone images... and by the way, the palette can be animated (even if leaving the palette animation to randomness makes the result look more like monochrome at times).

    Anyway, here's the demo on @codepen codepen.io/thebabydino/pen/Rwd

    #CodePenChallenge #CodePen #svg #filter #svgFilter #blendMode #blending #css #code #coding #frontend #web #webDev #dev #monochrome #webDevelopment

    #codepenchallenge #codepen #svg #filter #svgfilter #blendmode
  26. Ana Tudor 🐯 @[email protected] ·

    Somehow forgot to post this @codepen demo codepen.io/thebabydino/pen/dyE, which fits both most recent #CodePenChallenge weeks.

    It's a version of this demo by @bramus scroll-driven-animations.style, but relying on CSS 3D (transforms) instead of `z-index` for z-axis order.

    #CSS #3d #transform #maths #cssTransition #scroll #scrollEffect #scrollAnimation #code #coding #frontend #cssVariables #web #webDev #dev #webDevelopment

    #codepenchallenge #css #3d #transform #maths #csstransition
  27. Ana Tudor 🐯 @[email protected] ·

    If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: codepen.io/thebabydino/pen/rNq

    Also an entry for this week's #CodePenChallenge (scroll snapping).

    #scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

    #codepenchallenge #scroll #scrollanimation #scrolleffect #diagonal #angled
  28. Ana Tudor 🐯 @[email protected] ·

    My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

    Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo codepen.io/thebabydino/full/gO

    See description for support info.

    #scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

    #codepenchallenge #scroll #scrollanimation #purecss #css #smoothscroll
  29. J M Berntson @[email protected] ·

    @coderanger While I would have liked some sort of manual save function, I did like that #Dustborn just tells you on the pause screen how long it's been since it last autosaved.

    #dustborn
  30. Ana Tudor 🐯 @[email protected] ·

    Another pure CSS & SVG thing I made on @codepen last week for the #CodePenChallenge: codepen.io/thebabydino/pen/yLW

    Idea from codepen.io/gabrielcojea/pen/GR but using no JS for scroll-triggered transitions and no text duplication for the dynamic headline-image intersection.

    cc @bramus

    #CodePen #CSS #scroll #SVG #filter #svgFilter #scrollAnimation #scrollEffect #textEffect #code #coding #frontend #web #webDev #dev #webDevelopment

    #codepenchallenge #codepen #css #scroll #svg #filter
Next page