Recent searches

No recent searches

Search options

Only available when logged in.
toad.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Mastodon server operated by David Troy, a tech pioneer and investigative journalist addressing threats to democracy. Thoughtful participation and discussion welcome.

Administered by:

Server stats:

227
active users

toad.social: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.1

#codepenchallenge

1 post1 participant0 posts today
CodePen<p>This week's <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> is all about Slideshows. (Use tag `cpc-slideshow`)</p><p><a href="https://codepen.io/challenges/2025/july/3" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/jul</span><span class="invisible">y/3</span></a></p><p>Might be a good time to look at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/CSS_overflow/CSS_carousels</span></a> (but it is all Chrome-only so far, so only if you're exploring.) We've got other ideas and resources on the page.</p>
CodePen<p>Week 2 of the July <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> starts now!<br>This week, we're building slide interactions 🛝</p><p><a href="https://codepen.io/challenges/2025/july/2" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/jul</span><span class="invisible">y/2</span></a> </p><p>Thanks @MongoDB for sponsoring! <a href="https://srv.buysellads.com/ads/long/x/TFMQPYSVTTTTTTFV73MNETTTTTTGMJSQ2TTTTTTTTTLNCBTTTTTTTRDHZQTU52P3F36DEWPIF67NBWS35JEWVJ4YVQ6T" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">srv.buysellads.com/ads/long/x/</span><span class="invisible">TFMQPYSVTTTTTTFV73MNETTTTTTGMJSQ2TTTTTTTTTLNCBTTTTTTTRDHZQTU52P3F36DEWPIF67NBWS35JEWVJ4YVQ6T</span></a></p>
Pumaparded<p><a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>: Spirals</p><p><a href="https://codepen.io/TomHinton/pen/LEVMqqN" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/TomHinton/pen/LEVMq</span><span class="invisible">qN</span></a></p>
CodePen<p>It's the final week of the Shapes &amp; Lines <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>!<br>This week, we're going into a spiral 🌀<br><a href="https://codepen.io/challenges/2025/june/4" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/jun</span><span class="invisible">e/4</span></a> <br>Thanks @mondaydotcom for sponsoring: <a href="https://srv.buysellads.com/ads/long/x/T62T5PSVTTTTTTDNZVJNETTTTTTZCOJ32TTTTTTTO4SLNBTTTTTTTEBZ5M4CP7SE5Q4M5II6Z3JWKI4ZP73H45Q7CJCT" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">srv.buysellads.com/ads/long/x/</span><span class="invisible">T62T5PSVTTTTTTDNZVJNETTTTTTZCOJ32TTTTTTTO4SLNBTTTTTTTEBZ5M4CP7SE5Q4M5II6Z3JWKI4ZP73H45Q7CJCT</span></a></p>
Ana Tudor 🐯<p>A little something 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>: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> icosphere of spheres <a href="https://codepen.io/thebabydino/pen/poYRGmV" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/poY</span><span class="invisible">RGmV</span></a></p><p>Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.</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/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</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/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>geometry</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/mathematics" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mathematics</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/recursion" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>recursion</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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</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/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/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>transform</span></a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css3D</span></a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a></p>
CodePen<p>The "Shapes &amp; Lines" <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> continues!<br>This week, we're making spheres 🔮<br><a href="https://codepen.io/challenges/2025/june/3" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/jun</span><span class="invisible">e/3</span></a> <br>Thanks @mondaydotcom for sponsoring: <a href="https://srv.buysellads.com/ads/long/x/T62T5PSVTTTTTTDNZVJNETTTTTTZCOJ32TTTTTTTO4SLNBTTTTTTTEBZ5M4CP7SE5Q4M5II6Z3JWKI4ZP73H45Q7CJCT" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">srv.buysellads.com/ads/long/x/</span><span class="invisible">T62T5PSVTTTTTTDNZVJNETTTTTTZCOJ32TTTTTTTO4SLNBTTTTTTTEBZ5M4CP7SE5Q4M5II6Z3JWKI4ZP73H45Q7CJCT</span></a></p>
CodePen<p>The Shapes &amp; Lines <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> continues!<br>This week is all about squiggles 〰️<br><a href="https://codepen.io/challenges/2025/june/2" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/jun</span><span class="invisible">e/2</span></a> <br>Thanks @mondaydotcom for sponsoring! <br><a href="https://srv.buysellads.com/ads/long/x/T62T5PSVTTTTTTDNZVJNETTTTTTZCOJ32TTTTTTTO4SLNBTTTTTTTEBZ5M4CP7SE5Q4M5II6Z3JWKI4ZP73H45Q7CJCT" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">srv.buysellads.com/ads/long/x/</span><span class="invisible">T62T5PSVTTTTTTDNZVJNETTTTTTZCOJ32TTTTTTTO4SLNBTTTTTTTEBZ5M4CP7SE5Q4M5II6Z3JWKI4ZP73H45Q7CJCT</span></a></p>
Ana Tudor 🐯<p>Another little thing I made for this week's "sweet treats" <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> challenge: low poly 🍎 <a href="https://codepen.io/thebabydino/pen/raVadaZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/raV</span><span class="invisible">adaZ</span></a></p><p>100% handcoded with ❤️</p><p>Hey, I have a sweet tooth...<br>¯\_(ツ)_/¯</p><p><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/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> <a href="https://mastodon.social/tags/lowPoly" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>lowPoly</span></a> <a href="https://mastodon.social/tags/fruit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fruit</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/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/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></p>
CodePen<p>It's the final week of the May <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>!<br>This week, it's time for sweet treats 🍦<br><a href="https://codepen.io/challenges/2025/may/4" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/may</span><span class="invisible">/4</span></a> <br>Thanks @Pluralsight for sponsoring: <a href="https://srv.buysellads.com/ads/long/x/T6RT43IVTTTTTTDZGVFCETTTTTTTC4YK2TTTTTTTB4YEKBTTTTTTTALZKMVFWKBFQ7V6PNZWKHVCOIPYQ7DI6YIWG33E" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">srv.buysellads.com/ads/long/x/</span><span class="invisible">T6RT43IVTTTTTTDZGVFCETTTTTTTC4YK2TTTTTTTB4YEKBTTTTTTTALZKMVFWKBFQ7V6PNZWKHVCOIPYQ7DI6YIWG33E</span></a></p>
CodePen<p>It’s week three of our Food <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>!<br>This week, we’re serving up an alphabet soup 🥣<br><a href="https://codepen.io/challenges/2025/may/3" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/may</span><span class="invisible">/3</span></a> <br>Thanks @Pluralsight for sponsoring: <a href="https://srv.buysellads.com/ads/long/x/T6RT43IVTTTTTTDZGVFCETTTTTTTC4YK2TTTTTTTB4YEKBTTTTTTTALZKMVFWKBFQ7V6PNZWKHVCOIPYQ7DI6YIWG33E" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">srv.buysellads.com/ads/long/x/</span><span class="invisible">T6RT43IVTTTTTTDZGVFCETTTTTTTC4YK2TTTTTTTB4YEKBTTTTTTTALZKMVFWKBFQ7V6PNZWKHVCOIPYQ7DI6YIWG33E</span></a></p>
CodePen<p>The May <a href="https://fosstodon.org/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> continues!<br>This week, we're serving up Toasts &amp; Snackbars <br><a href="https://codepen.io/challenges/2025/may/2" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2025/may</span><span class="invisible">/2</span></a> <br>Thanks @Pluralsight for sponsoring: <a href="https://srv.buysellads.com/ads/long/x/T6RT43IVTTTTTTDZGVFCETTTTTTTC4YK2TTTTTTTB4YEKBTTTTTTTALZKMVFWKBFQ7V6PNZWKHVCOIPYQ7DI6YIWG33E" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">srv.buysellads.com/ads/long/x/</span><span class="invisible">T6RT43IVTTTTTTDZGVFCETTTTTTTC4YK2TTTTTTTB4YEKBTTTTTTTALZKMVFWKBFQ7V6PNZWKHVCOIPYQ7DI6YIWG33E</span></a></p>
Ana Tudor 🐯<p>Haven't had it in me to do anything for the past week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>, so here's a demo from earlier this year that fits: <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> infinite scroll gallery <a href="https://codepen.io/thebabydino/pen/XJrYqGb" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XJr</span><span class="invisible">YqGb</span></a></p><p>One of my most hearted demos ever &amp; my only one to get over 1000 ❤️ without being in the most hearted of previous year.</p><p><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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scrollAnimation</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransforms</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/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/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>I made a thing: scroll-driven, almost pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> infinite circular gallery rotation - check it out 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/XJrYqGb" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XJr</span><span class="invisible">YqGb</span></a></p><p>Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.</p><p>Made with 🖤 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>cc <span class="h-card" translate="no"><a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>bramus</span></a></span> </p><p><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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scrollAnimation</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransforms</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/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/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>Here's a fun <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> layered text effect 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> <a href="https://codepen.io/thebabydino/pen/vYMdzVy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/vYM</span><span class="invisible">dzVy</span></a></p><p>No text duplication whatsoever, no text-shadow, no JS, no images save for CSS gradients.</p><p>All done with <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> gradients, transforms &amp; <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> magic! 🪄</p><p>Also an entry for this week's <br><a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a>. </p><p><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/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffects</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/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffect</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/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/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></p>
Ana Tudor 🐯<p>Come as you are¹ 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> <a href="https://codepen.io/thebabydino/pen/yLwaNQr" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/yLw</span><span class="invisible">aNQr</span></a></p><p>No text duplication whatsoever, no text-shadow, no images save for <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> gradients, no JS, just <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> magic.</p><p>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>¹but fully clothed</p><p><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/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffects</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/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffect</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/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/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></p>
Ana Tudor 🐯<p>Another <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> text demo for this 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/thebabydino/pen/pomoEzQ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/pom</span><span class="invisible">oEzQ</span></a></p><p>No JS, no text duplication whatsoever, no text-shadow. <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> magic 🪄 creates the 3D effect, the letter face pattern (in combination with with CSS gradients), the double outline (combined with text-stroke).</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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> <br><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/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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>A 🆒 no JS, no text duplication, no shadows <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> text effect I made 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> for the 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/thebabydino/pen/yLmxePV" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/yLm</span><span class="invisible">xePV</span></a></p><p>Just a bit of <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> magic!🪄</p><p><a href="https://mastodon.social/tags/Pug" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Pug</span></a> code generating the SVG filter is ~1KB and the CSS is half of that (20 declarations including prettifying and layout).</p><p>Also: did anyone else have trouble with uploading videos here? This is just a 5 second 500KB vid... 😿 </p><p><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/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/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/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/noJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>noJS</span></a> <a href="https://mastodon.social/tags/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffects</span></a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffect</span></a></p>
Ana Tudor 🐯<p>A fun little text layers fanning out when hovering demo 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>: <a href="https://codepen.io/thebabydino/pen/GRaZpbe" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/GRa</span><span class="invisible">Zpbe</span></a></p><p>No text duplication whatsoever, no JS, no images save for CSS gradients.</p><p>A bit of <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> magic 🪄 creates the <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> text peeling effect.</p><p>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><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/hover" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hover</span></a> <a href="https://mastodon.social/tags/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffects</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/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/gradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gradient</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/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>Here's a chromatic aberration <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> demo for this week's layered text <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> <a href="https://codepen.io/thebabydino/pen/QWXjvGj" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QWX</span><span class="invisible">jvGj</span></a></p><p>✨no text duplication whatsoever</p><p>✨no long lists of values - text is tiled with... the magic 🪄 of the `feTile` <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> primitive</p><p>✨very little code - you can see it *all* in the screenshot 👇</p><p><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/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffects</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/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/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/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></p>
Ana Tudor 🐯<p>Btw, I've made over 150 Pens tagged with text-effects - you can find them here <a href="https://codepen.io/thebabydino/pens/tags/?selected_tag=text-effects" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pens/ta</span><span class="invisible">gs/?selected_tag=text-effects</span></a></p><p>Most of these don't involve text duplication (not in the markup, not in pseudos), long lists of values (like for text-shadow) or splitting the text in individual chars.</p><p>Because this month's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> is about text effects <a href="https://codepen.io/challenges/2024/november/1" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/challenges/2024/nov</span><span class="invisible">ember/1</span></a></p><p><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/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffects</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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/gradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gradient</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/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</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/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></p>
TrendingLive feeds
About