Recent searches

No recent searches

Search options

Only available when logged in.
shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.

Administered by:

Server stats:

269
active users

shakedown.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0

#codepen

0 posts0 participants0 posts today
Fractal Kitty<p>A friend showed me a leetcode problem yesterday at the Recurse Center:</p><p><a href="https://leetcode.com/problems/minimum-height-trees/description/?envType=problem-list-v2&amp;envId=rab78cw1" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">leetcode.com/problems/minimum-</span><span class="invisible">height-trees/description/?envType=problem-list-v2&amp;envId=rab78cw1</span></a></p><p>Which led me to play for a bit on paper, then drafted a rough a visual toy:</p><p><a href="https://codepen.io/fractalkitty/live/WbvJKgy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/fractalkitty/live/W</span><span class="invisible">bvJKgy</span></a></p><p>(I haven't actually done any leetcode problems because I often end up on paper and down rabbit holes)</p><p><a href="https://mathstodon.xyz/tags/recurseCenter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>recurseCenter</span></a> <a href="https://mathstodon.xyz/tags/graphtheory" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>graphtheory</span></a> <a href="https://mathstodon.xyz/tags/trees" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>trees</span></a> <a href="https://mathstodon.xyz/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> <a href="https://mathstodon.xyz/tags/leetcode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>leetcode</span></a></p>
Fractal Kitty<p>If anyone wants to make a Half-square Hilbert I made a toy to play with patterns. (fixed a bug from the first go)</p><p>I need fabric - so I plan to start maybe later this week. </p><p><a href="https://codepen.io/fractalkitty/live/pvoBwxv/edc44d4417167d59d8b2c1d9ad574109" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/fractalkitty/live/p</span><span class="invisible">voBwxv/edc44d4417167d59d8b2c1d9ad574109</span></a></p><p><a href="https://mathstodon.xyz/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> <a href="https://mathstodon.xyz/tags/p5js" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>p5js</span></a> <a href="https://mathstodon.xyz/tags/quilting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>quilting</span></a> <a href="https://mathstodon.xyz/tags/hilbertCurve" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hilbertCurve</span></a> <a href="https://mathstodon.xyz/tags/fiberArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fiberArt</span></a> <a href="https://mathstodon.xyz/tags/quilts" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>quilts</span></a> <a href="https://mathstodon.xyz/tags/mathart" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mathart</span></a></p>
GENKI<p><a href="https://social.vivaldi.net/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> は html に `lang="ja"` を設定できないのかな</p>
Florian<p>Bit of a different stream tomorrow on IC_Null: code editors. <a href="https://infosec.exchange/tags/replit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>replit</span></a>, <a href="https://infosec.exchange/tags/VSCode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>VSCode</span></a>, <a href="https://infosec.exchange/tags/CodeSpaces" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodeSpaces</span></a>, <a href="https://infosec.exchange/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> 😱 How is the <a href="https://infosec.exchange/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>accessibility</span></a> of these kinds of tools for <a href="https://infosec.exchange/tags/screenReader" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>screenReader</span></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" translate="no" target="_blank"><span class="invisible">https://</span><span class="">twitch.tv/IC_Null</span><span class="invisible"></span></a> <a href="https://infosec.exchange/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://infosec.exchange/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://infosec.exchange/tags/programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>programming</span></a> <a href="https://infosec.exchange/tags/blind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blind</span></a> <a href="https://infosec.exchange/tags/selfPromo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>selfPromo</span></a> <span class="h-card" translate="no"><a href="https://fosstodon.org/@NVAccess" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>NVAccess</span></a></span></p>
Ana Tudor 🐯<p>Double bubble! 🫧</p><p>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" target="_blank">#<span>CSS</span></a> trickery and a simple <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a>! 🪄</p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <br><a href="https://codepen.io/thebabydino/pen/NWmBmrZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/NWm</span><span class="invisible">BmrZ</span></a></p><p><a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/text" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>text</span></a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffect</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scrollAnimation</span></a></p>
Ana Tudor 🐯<p>Finally, some pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a>, single element halftone patterned cards:</p><p>✨ <a href="https://codepen.io/thebabydino/pen/QWMRWRQ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QWM</span><span class="invisible">RWRQ</span></a><br>✨ <a href="https://codepen.io/thebabydino/full/NWxBzRv" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/NW</span><span class="invisible">xBzRv</span></a></p><p><a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</span></a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filterEffect</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>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" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/wvR</span><span class="invisible">VNgv</span></a> - also an entry for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>😎</p><p>And a solution to <a href="https://mastodon.social/@anatudor/111261576456520013" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1112</span><span class="invisible">61576456520013</span></a></p><p>*not yet in Firefox stable, only in Nightly <a href="https://mastodon.social/@anatudor/112157049928865915" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1121</span><span class="invisible">57049928865915</span></a></p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/customProperty" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>customProperty</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTricks</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
Ana Tudor 🐯<p>The .jpg image map case is... special. Most of my demos use extra pseudos/ elements and `mix-blend-mode` for compatibility reasons.</p><p>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" target="_blank">#<span>halftone</span></a> solution <a href="https://codepen.io/thebabydino/pen/rNgBqNy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/rNg</span><span class="invisible">BqNy</span></a></p><p>For reference, article on `filter()` <a href="https://iamvdo.me/en/blog/advanced-css-filters#filter" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">iamvdo.me/en/blog/advanced-css</span><span class="invisible">-filters#filter</span></a></p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/safari" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>safari</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTricks</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>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" target="_blank">#<span>CodePen</span></a> demo <a href="https://codepen.io/thebabydino/pen/jOvMQMO" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/jOv</span><span class="invisible">MQMO</span></a></p><p>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" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1101</span><span class="invisible">53344888593740</span></a></p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTricks</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>Pattern part may be anything small &amp; 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" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBG</span><span class="invisible">WXNR</span></a></p><p>Map part may also be another type of gradient or even a .jpg <a href="https://codepen.io/thebabydino/pen/LYGGwrm" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LYG</span><span class="invisible">Gwrm</span></a></p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTricks</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/fontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></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" target="_blank">#<span>CodePen</span></a> already. Here's the how behind it.</p><p>Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</span></a> effect in 3 declarations:</p><p>✨ background layering a pattern and a map<br>✨ blend mode multiplication of the two layers<br>✨ contrast bump up to push all greys to either black or white</p><p><a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTricks</span></a> <a href="https://mastodon.social/tags/cssTip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTip</span></a> <a href="https://mastodon.social/tags/cssTips" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTips</span></a> <a href="https://mastodon.social/tags/tipsAndTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tipsAndTricks</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/wedDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wedDev</span></a> <a href="https://mastodon.social/tags/webDevelpment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelpment</span></a></p>
Ana Tudor 🐯<p>A while ago, I posted about mono emojis with <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> filters. <a href="https://mastodon.social/@anatudor/111617727010747501" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1116</span><span class="invisible">17727010747501</span></a></p><p>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" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a>!</p><p>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" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LYa</span><span class="invisible">mwrz</span></a></p><p>(you can pick another value for the fill using the input[type=color] and copy the SVG filter to clipboard)</p><p><a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/interactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>interactive</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Fractal Kitty<p>I did it!</p><p>31 sketches for Genuary! I focused on polar coordinates and rotational symmetries with some deviations. </p><p>On the blog: <a href="https://fractalkitty.com/2024/01/02/genuary-2024/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">fractalkitty.com/2024/01/02/ge</span><span class="invisible">nuary-2024/</span></a></p><p>On Codepen: <a href="https://codepen.io/collection/kNMJQy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/collection/kNMJQy</span><span class="invisible"></span></a></p><p><a href="https://mathstodon.xyz/tags/genuary2024" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>genuary2024</span></a> <a href="https://mathstodon.xyz/tags/genuary" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>genuary</span></a> <a href="https://mathstodon.xyz/tags/p5js" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>p5js</span></a> <a href="https://mathstodon.xyz/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> <a href="https://mathstodon.xyz/tags/creativeCoding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>creativeCoding</span></a> <a href="https://mathstodon.xyz/tags/generativeArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>generativeArt</span></a> <a href="https://mathstodon.xyz/tags/processingOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>processingOrg</span></a> <a href="https://mathstodon.xyz/tags/polarCoordinates" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>polarCoordinates</span></a> <a href="https://mathstodon.xyz/tags/mathArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mathArt</span></a></p>
GENKI<p>よくあるビフォーアフターを重ねて見るスライダー UI をサクッと実装する方法。</p><p>1. Grid で2つのイメージを重ねて表示<br>2. mask で linear-gradient を使用。直の中に CSS 変数を仕込んでおく<br>3. input[type="range"] のスタイルを調整してスライダーにする<br>4. input[type="range"]を操作するたびに CSS 変数を上書き</p><p>っていう方法で実現しててすごいスマートだった。これ何かで使いたいなー</p><p><a href="https://codepen.io/argyleink/pen/XWOaazZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/argyleink/pen/XWOaa</span><span class="invisible">zZ</span></a></p><p><a href="https://social.vivaldi.net/tags/Codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Codepen</span></a> <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://social.vivaldi.net/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://social.vivaldi.net/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a></p>
Luke Dorny<p>Okay, here's the pen for you to pick apart and use wherever. Caution, it's not production code.</p><p><a href="https://codepen.io/luxuryluke/pen/xxMZVvV" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/luxuryluke/pen/xxMZ</span><span class="invisible">VvV</span></a></p><p><a href="https://typo.social/tags/Finder" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Finder</span></a> <a href="https://typo.social/tags/MacOS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>MacOS</span></a> <a href="https://typo.social/tags/Apple" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Apple</span></a> <a href="https://typo.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://typo.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://typo.social/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> <a href="https://typo.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></a></p><p>Want to get a progressive grayscale()/ saturate() filter effect, from 0% to normal?</p><p>Blend with a gradient from *anything with saturation 0%* to transparent using the color blend mode!</p><p><a href="https://codepen.io/thebabydino/pen/rNQbEEg" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/rNQ</span><span class="invisible">bEEg</span></a></p><p>No duplication + masking necessary for this effect!</p><p>Last image shows the original image without the gradual effect saturation for comparison.</p><p>May also have a grayscale split <a href="https://twitter.com/anatudor/status/1351781587889889283" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">twitter.com/anatudor/status/13</span><span class="invisible">51781587889889283</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a></p>
Ana Tudor 🐯<p>Forget CSS, people don't even know HTML.</p><p>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" target="_blank">#<span>CodePenChallenge</span></a>: <a href="https://codepen.io/challenges/2023/june/2" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2023/jun</span><span class="invisible">e/2</span></a> in order to get a better idea of how people want such a control to look and work.</p><p>And here are some numbers: 😭</p><p><a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a> <a href="https://mastodon.social/tags/webPerf" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webPerf</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
Ana Tudor 🐯<p>Some metallic buttons:</p><p>✨ <a href="https://codepen.io/thebabydino/pen/VeBoXx" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/VeB</span><span class="invisible">oXx</span></a></p><p>✨ <a href="https://codepen.io/thebabydino/pen/QyVGeq" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QyV</span><span class="invisible">Geq</span></a></p><p>✨ <a href="https://codepen.io/thebabydino/pen/GBOKgV" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/GBO</span><span class="invisible">KgV</span></a></p><p>✨ <a href="https://codepen.io/thebabydino/pen/VeGgXR" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/VeG</span><span class="invisible">gXR</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/button" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>button</span></a> <a href="https://mastodon.social/tags/buttons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>buttons</span></a> <a href="https://mastodon.social/tags/control" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>control</span></a> <a href="https://mastodon.social/tags/controls" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>controls</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/metallic" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>metallic</span></a></p>
Ana Tudor 🐯<p>Responsive buttons with <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> vars<br><a href="https://codepen.io/thebabydino/pen/qyVyKb" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qyV</span><span class="invisible">yKb</span></a></p><p>Glass buttons<br>#1 <a href="https://codepen.io/thebabydino/pen/QBOKPy" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QBO</span><span class="invisible">KPy</span></a></p><p>#2 <a href="https://codepen.io/thebabydino/pen/jpaZBy" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/jpa</span><span class="invisible">ZBy</span></a></p><p>Flat buttons <br><a href="https://codepen.io/thebabydino/pen/porLEXy" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/por</span><span class="invisible">LEXy</span></a></p><p><a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/button" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>button</span></a> <a href="https://mastodon.social/tags/buttons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>buttons</span></a> <a href="https://mastodon.social/tags/control" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>control</span></a> <a href="https://mastodon.social/tags/controls" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>controls</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>Would have loved to do something for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>, but the past weeks have had too many tech (both hardware &amp; 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" target="_blank">#<span>CodePen</span></a>: </p><p>Soft <a href="https://mastodon.social/tags/buttons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>buttons</span></a> <a href="https://codepen.io/thebabydino/pen/dLLxdj" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/dLL</span><span class="invisible">xdj</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/button" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>button</span></a> <a href="https://mastodon.social/tags/control" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>control</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
TrendingLive feeds
About