Shakedown Social

Fractal KittyIf anyone wants to make a Half-square Hilbert I made a toy to play with patterns. (fixed a bug from the first go)I need fabric - so I plan to start maybe later this week. <a href="https://codepen.io/fractalkitty/live/pvoBwxv/edc44d4417167d59d8b2c1d9ad574109" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/fractalkitty/live/pvoBwxv/edc44d4417167d59d8b2c1d9ad574109</a><a href="https://mathstodon.xyz/tags/codepen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codepen</a> <a href="https://mathstodon.xyz/tags/p5js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#p5js</a> <a href="https://mathstodon.xyz/tags/quilting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#quilting</a> <a href="https://mathstodon.xyz/tags/hilbertCurve" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hilbertCurve</a> <a href="https://mathstodon.xyz/tags/fiberArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fiberArt</a> <a href="https://mathstodon.xyz/tags/quilts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#quilts</a> <a href="https://mathstodon.xyz/tags/mathart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mathart</a>

GENKI<a href="https://social.vivaldi.net/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> は html に `lang="ja"` を設定できないのかな

FlorianBit of a different stream tomorrow on IC_Null: code editors. <a href="https://infosec.exchange/tags/replit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#replit</a>, <a href="https://infosec.exchange/tags/VSCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#VSCode</a>, <a href="https://infosec.exchange/tags/CodeSpaces" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodeSpaces</a>, <a href="https://infosec.exchange/tags/codepen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codepen</a> 😱 How is the <a href="https://infosec.exchange/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> of these kinds of tools for <a href="https://infosec.exchange/tags/screenReader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#screenReader</a> users? Where's the pain points? Why are they happening, and why are they pain points? Do these tools help this target audience be more productive, like they do for most, or not? Come see tomorrow at 4 PM EST, 10 PM CEST at <a href="https://twitch.tv/IC_Null" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://twitch.tv/IC_Null</a> <a href="https://infosec.exchange/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://infosec.exchange/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://infosec.exchange/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://infosec.exchange/tags/blind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blind</a> <a href="https://infosec.exchange/tags/selfPromo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#selfPromo</a> <a href="https://fosstodon.org/@NVAccess" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@NVAccess</a>

Ana Tudor 🐯Double bubble! 🫧On scroll text bubble up effect with 1 div, no text duplication, no JS - just a little bit of <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> trickery and a simple <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a>! 🪄Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/NWmBmrZ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/NWmBmrZ</a><a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/text" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#text</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scrollAnimation</a>

Ana Tudor 🐯Finally, some pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>, single element halftone patterned cards:✨ <a href="https://codepen.io/thebabydino/pen/QWMRWRQ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QWMRWRQ</a> ✨ <a href="https://codepen.io/thebabydino/full/NWxBzRv" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/full/NWxBzRv</a><a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filterEffect</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Animating a custom property* that the gradients used for the effect depend on can also produce cool effects, like in <a href="https://codepen.io/thebabydino/pen/wvRVNgv" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/wvRVNgv</a> - also an entry for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a>😎And a solution to <a href="https://mastodon.social/@anatudor/111261576456520013" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/111261576456520013</a>*not yet in Firefox stable, only in Nightly <a href="https://mastodon.social/@anatudor/112157049928865915" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/112157049928865915</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/customProperty" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customProperty</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a>

Ana Tudor 🐯The .jpg image map case is... special. Most of my demos use extra pseudos/ elements and `mix-blend-mode` for compatibility reasons.But Safari, only browser to support `filter()` (*not* `filter`!) allows for the no extra pseudo/ element <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> solution <a href="https://codepen.io/thebabydino/pen/rNgBqNy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/rNgBqNy</a>For reference, article on `filter()` <a href="https://iamvdo.me/en/blog/advanced-css-filters#filter" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://iamvdo.me/en/blog/advanced-css-filters#filter</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/safari" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#safari</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯A `linear-gradient()` pattern coupled with a `linear-gradient()` map is what's behind this retro wave <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> demo <a href="https://codepen.io/thebabydino/pen/jOvMQMO" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jOvMQMO</a>And animating the map's `background-position` is how we get this progressive close/ open blinds effect <a href="https://mastodon.social/@anatudor/110153344888593740" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/110153344888593740</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Pattern part may be anything small & repeating. We may also use thin blurry stripes - linear-gradient, rays - repeating-conic-gradient, rings - repeating-radial-gradient <a href="https://codepen.io/thebabydino/pen/qBGWXNR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qBGWXNR</a>Map part may also be another type of gradient or even a .jpg <a href="https://codepen.io/thebabydino/pen/LYGGwrm" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LYGGwrm</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/fontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> You may have seen some of my demos using this on <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> already. Here's the how behind it.Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> effect in 3 declarations:✨ background layering a pattern and a map ✨ blend mode multiplication of the two layers ✨ contrast bump up to push all greys to either black or white<a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/cssTip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTip</a> <a href="https://mastodon.social/tags/cssTips" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTips</a> <a href="https://mastodon.social/tags/tipsAndTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tipsAndTricks</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/wedDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#wedDev</a> <a href="https://mastodon.social/tags/webDevelpment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelpment</a>

Ana Tudor 🐯A while ago, I posted about mono emojis with <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> filters. <a href="https://mastodon.social/@anatudor/111617727010747501" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/111617727010747501</a>It was... quite complicated, but there's a better way - with a simple <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a>!If you're a patron on Patreon, you may have already seen the interactive demo... now it's public for everyone <a href="https://codepen.io/thebabydino/pen/LYamwrz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LYamwrz</a>(you can pick another value for the fill using the input[type=color] and copy the SVG filter to clipboard)<a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/interactive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#interactive</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Fractal KittyI did it!31 sketches for Genuary! I focused on polar coordinates and rotational symmetries with some deviations. On the blog: <a href="https://fractalkitty.com/2024/01/02/genuary-2024/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://fractalkitty.com/2024/01/02/genuary-2024/</a>On Codepen: <a href="https://codepen.io/collection/kNMJQy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/collection/kNMJQy</a><a href="https://mathstodon.xyz/tags/genuary2024" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#genuary2024</a> <a href="https://mathstodon.xyz/tags/genuary" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#genuary</a> <a href="https://mathstodon.xyz/tags/p5js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#p5js</a> <a href="https://mathstodon.xyz/tags/codepen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codepen</a> <a href="https://mathstodon.xyz/tags/creativeCoding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#creativeCoding</a> <a href="https://mathstodon.xyz/tags/generativeArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#generativeArt</a> <a href="https://mathstodon.xyz/tags/processingOrg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#processingOrg</a> <a href="https://mathstodon.xyz/tags/polarCoordinates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#polarCoordinates</a> <a href="https://mathstodon.xyz/tags/mathArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mathArt</a>

GENKIよくあるビフォーアフターを重ねて見るスライダー UI をサクッと実装する方法。1. Grid で2つのイメージを重ねて表示 2. mask で linear-gradient を使用。直の中に CSS 変数を仕込んでおく 3. input[type="range"] のスタイルを調整してスライダーにする 4. input[type="range"]を操作するたびに CSS 変数を上書きっていう方法で実現しててすごいスマートだった。これ何かで使いたいなー<a href="https://codepen.io/argyleink/pen/XWOaazZ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/argyleink/pen/XWOaazZ</a><a href="https://social.vivaldi.net/tags/Codepen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Codepen</a> <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://social.vivaldi.net/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://social.vivaldi.net/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UI</a>

Luke DornyOkay, here's the pen for you to pick apart and use wherever. Caution, it's not production code.<a href="https://codepen.io/luxuryluke/pen/xxMZVvV" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/luxuryluke/pen/xxMZVvV</a><a href="https://typo.social/tags/Finder" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Finder</a> <a href="https://typo.social/tags/MacOS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#MacOS</a> <a href="https://typo.social/tags/Apple" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Apple</a> <a href="https://typo.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://typo.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://typo.social/tags/codepen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codepen</a> <a href="https://typo.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UIDesign</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a>Want to get a progressive grayscale()/ saturate() filter effect, from 0% to normal?Blend with a gradient from *anything with saturation 0%* to transparent using the color blend mode!<a href="https://codepen.io/thebabydino/pen/rNQbEEg" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/rNQbEEg</a>No duplication + masking necessary for this effect!Last image shows the original image without the gradual effect saturation for comparison.May also have a grayscale split <a href="https://twitter.com/anatudor/status/1351781587889889283" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://twitter.com/anatudor/status/1351781587889889283</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a>

Ana Tudor 🐯Forget CSS, people don't even know HTML.Here's why I'm saying this: I've looked through demos made for last week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a>: <a href="https://codepen.io/challenges/2023/june/2" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/challenges/2023/june/2</a> in order to get a better idea of how people want such a control to look and work.And here are some numbers: 😭<a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://mastodon.social/tags/webPerf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webPerf</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a>

Ana Tudor 🐯Some metallic buttons:✨ <a href="https://codepen.io/thebabydino/pen/VeBoXx" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/VeBoXx</a>✨ <a href="https://codepen.io/thebabydino/pen/QyVGeq" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/QyVGeq</a>✨ <a href="https://codepen.io/thebabydino/pen/GBOKgV" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/GBOKgV</a>✨ <a href="https://codepen.io/thebabydino/pen/VeGgXR" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/VeGgXR</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/button" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#button</a> <a href="https://mastodon.social/tags/buttons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#buttons</a> <a href="https://mastodon.social/tags/control" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#control</a> <a href="https://mastodon.social/tags/controls" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#controls</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/metallic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#metallic</a>

Ana Tudor 🐯Responsive buttons with <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> vars <a href="https://codepen.io/thebabydino/pen/qyVyKb" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/qyVyKb</a>Glass buttons #1 <a href="https://codepen.io/thebabydino/pen/QBOKPy" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/QBOKPy</a>#2 <a href="https://codepen.io/thebabydino/pen/jpaZBy" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/jpaZBy</a>Flat buttons <a href="https://codepen.io/thebabydino/pen/porLEXy" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/porLEXy</a><a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/button" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#button</a> <a href="https://mastodon.social/tags/buttons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#buttons</a> <a href="https://mastodon.social/tags/control" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#control</a> <a href="https://mastodon.social/tags/controls" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#controls</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Would have loved to do something for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a>, but the past weeks have had too many tech (both hardware & software) and non-tech problems eating out of my time, so all I have is a bunch of older button demos I made on <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a>: Soft <a href="https://mastodon.social/tags/buttons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#buttons</a> <a href="https://codepen.io/thebabydino/pen/dLLxdj" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/thebabydino/pen/dLLxdj</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/button" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#button</a> <a href="https://mastodon.social/tags/control" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#control</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Mia (web luddite)I wrote an explainer for <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> Container Style Queries::oddbird: <a href="https://css.oddbird.net/rwd/style/explainer/" rel="nofollow noopener noreferrer" target="_blank">https://css.oddbird.net/rwd/style/explainer/</a>There's already a (limited) prototype in Chromium (:chrome:/:edge:) 107+ with the 'Experimental Web Platform Features' flag enabled.I'm collecting demos on <a href="https://front-end.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a>::codepen: <a href="https://codepen.io/collection/NqaPkL" rel="nofollow noopener noreferrer" target="_blank">https://codepen.io/collection/NqaPkL</a>```css @container style(--btn-theme: mia) { /* theme styles */ } ```

Recent searches

Search options

Administered by:

Server stats:

#codepen