Ana Tudor 🐯<p>I turn 13 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> today, so after my most hearted demos (<a href="https://mastodon.social/@anatudor/114499264888606204" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1144</span><span class="invisible">99264888606204</span></a>)... here are 13 of MY personal faves!</p><p>1️⃣ Pure CSS music toy - this one's a really special one for me <a href="https://codepen.io/thebabydino/pen/WNGPjLx" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/WNG</span><span class="invisible">PjLx</span></a><br><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> transforms for the <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a>, CSS variables for the dynamic shading.</p><p>The how 😼 <a href="https://www.youtube.com/watch?v=_CV364uqP3U" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/watch?v=_CV364uqP3U</span><span class="invisible"></span></a></p><p><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/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>transform</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</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/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>
eupolicy.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This Mastodon server is a friendly and respectful discussion space for people working in areas related to EU policy. When you request to create an account, please tell us something about you.
Administered by:
Server stats:
221active users
eupolicy.social: About · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.1
#csstransform
0 posts · 0 participants · 0 posts today
Ana Tudor 🐯<p>7️⃣ 749 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> Möbius 6hedrons <a href="https://codepen.io/thebabydino/pen/mJojKd" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/mJo</span><span class="invisible">jKd</span></a></p><p>The how behind I live coded it in 30 minutes <a href="https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/how-i-live-code</span><span class="invisible">d-my-most-hearted-codepen-demo/</span></a></p><p>Could be improved with CSS variables nowadays, see <a href="https://css-tricks.com/simplifying-css-cubes-custom-properties/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/simplifying-css</span><span class="invisible">-cubes-custom-properties/</span></a> as well as by using CSS trigonometric functions.</p><p><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/Maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Maths</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/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</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/trigonometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>trigonometry</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>Here's a little image gallery demo 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> <br><a href="https://codepen.io/thebabydino/pen/LEYrVaE" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEY</span><span class="invisible">rVaE</span></a></p><p>Almost pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a>. Minimal <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> for changing the index of the current image on click.</p><p>For the how ensuring the <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> rotated side images have a given 2D projection on the screen, see <a href="https://stackoverflow.com/a/75063640/1397351" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">stackoverflow.com/a/75063640/1</span><span class="invisible">397351</span></a></p><p><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/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</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/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>geometry</span></a></p>
Ana Tudor 🐯<p>3️⃣ 1044 ♥️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> gravity button <a href="https://codepen.io/thebabydino/pen/bGzeQrv" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/bGz</span><span class="invisible">eQrv</span></a> - a bit mixed about it, it was just an exercise in getting a certain result - don't use it in the wild!</p><p>My first ever <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 to get to 1K ♥️. And it got copied left and right.<br>¯\_(ツ)_/¯</p><p><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/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>I turn 13 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> in June, so here are my 13 most hearted demos:</p><p>1️⃣ 1092 ♥️ <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> infinite <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scroll</span></a> 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> - my only demo to ever get to 1K ♥️ without being in most hearted of the year first</p><p>mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)</p><p><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/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransforms</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/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</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/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</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/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</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/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</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/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>geometry</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a></p>
TrendingLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload