home.social

#nosvg — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #nosvg, aggregated by home.social.

  1. Ana Tudor 🐯 @[email protected] ·

    3 more such animated pure #CSS, no SVG, single element animated halftone patterns on #CodePen:

    ✨ codepen.io/thebabydino/pen/mdm
    ✨ codepen.io/thebabydino/pen/abW
    ✨ codepen.io/thebabydino/pen/NWj

    #halftone #cssGradient #gradient #blendMode #blending #filter #cssFilter #noSVG #code #coding #web #dev #webDev #webDevelopment

    #codepen #halftone #cssgradient #gradient #blendmode #blending
  2. Ana Tudor 🐯 @[email protected] ·

    Pure CSS text effect codepen.io/thebabydino/details

    No text duplication, no JS, no images save for CSS gradients, no SVG at all. Under 20 CSS declarations, including layout, prettifying, `@​media` queries, `@​supports` blocks, CSS variable declarations...

    No Firefox (bug 🪲 1481498 ).

    Heavily commented as well.

    #CSS #textEffect #cssGradient #blending #blendMode #code #coding #frontend #webDev #webDevelopment #bug #Safari #SafariBug #FirefoxBug #Firefox #CodePen #noJS #noSVG #mediaQuery #typography

    #css #texteffect #cssgradient #blending #blendmode #code
  3. Ana Tudor 🐯 @[email protected] ·

    My most hearted #CodePen demo of 2023.

    Uses:
    ✨ input#r[type='range'][list='l'] for slider
    ✨ output[for='r'] for value display
    ✨ datalist#l for ruler
    ✨ #CSS grid, vars, minimal JS, no SVG (really, that's just a thumb I'm dragging there)

    Range inputs can be:
    ✨ done without divs/ reinventing the wheel
    ✨ accessible
    ✨ 🆒 looking

    codepen.io/thebabydino/pen/qBy

    #css #CodePenChallenge #slider #code #coding #frontend #noSVG #JavaScript #js #webDev #webDevelopment #cssTricks #cssMaths #cssMask

    #css #codepen #codepenchallenge #slider #code #coding