101010.pl

Ana Tudor 🐯I turn 13 on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> today, so after my most hearted demos (<a href="https://mastodon.social/@anatudor/114499264888606204" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.social/@anatudor/114499264888606204</a>)... here are 13 of MY personal faves!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">https://codepen.io/thebabydino/pen/WNGPjLx</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> transforms for the <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a>, CSS variables for the dynamic shading.The how 😼 <a href="https://www.youtube.com/watch?v=_CV364uqP3U" rel="nofollow noopener" translate="no" target="_blank">https://www.youtube.com/watch?v=_CV364uqP3U</a><a href="https://mastodon.social/tags/css3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3d</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTransform</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯11! of my demos throughout the first <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> trending pages!<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/graphicEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#graphicEffect</a> <a href="https://mastodon.social/tags/textEffects" class="mention hashtag" rel="nofollow noopener" target="_blank">#textEffects</a> <a href="https://mastodon.social/tags/texture" class="mention hashtag" rel="nofollow noopener" target="_blank">#texture</a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3D</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Ana Tudor 🐯4⃣ Pure CSS sphere of randomly positioned, non-intersecting spheres <a href="https://codepen.io/thebabydino/pen/LYXJPEb" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LYXJPEb</a>Uses the spherical distribution tactic described here <a href="https://mastodon.social/@anatudor/110745736820689528" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.social/@anatudor/110745736820689528</a> and then makes sure no two spheres intersect. Also: pure CSS 3D shading!<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/pureCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#pureCSS</a> <a href="https://mastodon.social/tags/css3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3d</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/sphere" class="mention hashtag" rel="nofollow noopener" target="_blank">#sphere</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#maths</a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#geometry</a> <a href="https://mastodon.social/tags/3dGeometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#3dGeometry</a> <a href="https://mastodon.social/tags/noJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#noJS</a> <a href="https://mastodon.social/tags/shading" class="mention hashtag" rel="nofollow noopener" target="_blank">#shading</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯3⃣ Pure CSS morphing polyhedra: dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron <a href="https://codepen.io/thebabydino/pen/gOjGyby" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/gOjGyby</a>Positions & makes faces morph using CSS transforms. Which depend on CSS vars to keep code compact <a href="https://css-tricks.com/logical-operations-with-css-variables/" rel="nofollow noopener" translate="no" target="_blank">https://css-tricks.com/logical-operations-with-css-variables/</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/pureCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#pureCSS</a> <a href="https://mastodon.social/tags/noJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#noJS</a> <a href="https://mastodon.social/tags/booleanLogic" class="mention hashtag" rel="nofollow noopener" target="_blank">#booleanLogic</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/css3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3d</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/polyhedra" class="mention hashtag" rel="nofollow noopener" target="_blank">#polyhedra</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#maths</a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#geometry</a> <a href="https://mastodon.social/tags/3dGeometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#3dGeometry</a> <a href="https://mastodon.social/tags/mathematics" class="mention hashtag" rel="nofollow noopener" target="_blank">#mathematics</a> <a href="https://mastodon.social/tags/platonicSolids" class="mention hashtag" rel="nofollow noopener" target="_blank">#platonicSolids</a> <a href="https://mastodon.social/tags/Archimedean" class="mention hashtag" rel="nofollow noopener" target="_blank">#Archimedean</a>

Ana Tudor 🐯8⃣ 496 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> 3D toggle with only input[type=checkbox] + label <a href="https://codepen.io/thebabydino/pen/ajpqYW" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/ajpqYW</a>(awfully hacky, but cool-looking result... which nowadays I'd probably try to get with an SVG filter 🤔)<a href="https://mastodon.social/tags/3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#3d</a> <a href="https://mastodon.social/tags/toggle" class="mention hashtag" rel="nofollow noopener" target="_blank">#toggle</a> <a href="https://mastodon.social/tags/checkbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#checkbox</a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3D</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>

Ana Tudor 🐯4⃣ 736 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> Möbius 6hedrons <a href="https://codepen.io/thebabydino/pen/mJojKd" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/mJojKd</a>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">https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/</a>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">https://css-tricks.com/simplifying-css-cubes-custom-properties/</a> as well as by using CSS trigonometric functions.<a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#css3D</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/looping" class="mention hashtag" rel="nofollow noopener" target="_blank">#looping</a> <a href="https://mastodon.social/tags/animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#animation</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Recent searches

Search options

Administered by:

Server stats:

#css3d