Mastodawn

Ana Tudor 🐯May 14, 2024

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

✨ https://codepen.io/thebabydino/pen/mdmVjaV
✨ https://codepen.io/thebabydino/pen/abWdaGO
✨ https://codepen.io/thebabydino/pen/NWjxaVG

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

Animated flower pattern

...

Ana Tudor 🐯Apr 29, 2024

Pure CSS text effect https://codepen.io/thebabydino/details/XWQQRWG

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

Pure CSS text effect (no Firefox)

No text duplication, no JS, no images save for CSS gradients, no SVG whatsoever. Under 20 CSS declarations, including layout, prettifying, `@media` que...

Ana Tudor 🐯Dec 30, 2023

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

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

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

No SVG, no image, CSS-only fluid slider with input[type=range]

Almost pure CSS. No SVG, no images in general save for CSS gradients. All the JS does is help with feature support testing and updating the slider valu...