Lmst

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

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

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.

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

#noSVG

Client Info