Jane Ori ๐Ÿ’š CSS Runner ๐Ÿ‘ฉโ€๐Ÿ’ป

@janeori.propjockey.io

Hello World ๐Ÿ‘ฝ โœ breakpoint-system, doubledash.css, css-media-vars, augmented-ui, Space Toggles, CSS CPU Hack, css-bin-bits & more ๐ŸŽฎ CSS Sweeper, css-conways-game-of-life, CSS Breakout, etc ๐Ÿ‘ฉโ€๐Ÿ’ป Senior Software Engineer ๐Ÿ“ http://dev.to/janeori ๐Ÿ’ Art she/her

At the CSSWG there is an issue about 2D Mesh gradients. The consensus was that whatever we do, it should be PDF compatible. With the help of Gemini I found my way to โ€œCoons Patchesโ€ as the underlying mechanism. Using AIStudio, I then generated this editor: genuine-waterfall-crane.codepen.app

Screenshot of the editor.

To avoid any confusion, let's add a tooltip showing the current value. An ugly one that bounces in all directions! css-tip.com/wiggly-range... Now, the range slider is perfect, no one can say otherwise!

CSS by T. Afif@css-only.dev ยท 3mo ago

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! ใ€ฐ๏ธ css-tip.com/wiggly-range... Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection ๐Ÿ‘€ Drag the elements and see the magic ๐Ÿช„