#noSVG

Ana Tudor 🐯anatudor
2024-04-29

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.

Shows the text "dreams" in narrow all caps on top of a leaves under blue light background. This text has a split line along the main diagonal. To the bottom left of this split line, the text is filled (white) and has no background. To the top right of this split line, the text is just stroked (white) with no fill and has a medium blue stripes horizontal background.
Ana Tudor 🐯anatudor
2023-12-30

My most hearted demo of 2023.

Uses:
✨ input#r[type='range'][list='l'] for slider
✨ output[for='r'] for value display
✨ datalist#l for ruler
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

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst