Mastouille

0 message0 participant0 message aujourd’hui

Ana Tudor 🐯I made a little thing on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> :pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scroll</a> controlled swipe transition <a href="https://codepen.io/thebabydino/pen/azObZOe" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/azObZOe</a>Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.Inspiration <a href="https://x.com/avanderpotte/status/1923382432784412771" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://x.com/avanderpotte/status/1923382432784412771</a> (via <a href="https://mastodon.social/@codrops" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codrops</a> motion highlights roundup) cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMask</a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#conicGradient</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#maths</a> <a href="https://mastodon.social/tags/scrollEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scrollEffect</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Because I saw a <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...Here's a super simple modern <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> grid + clip-path + mathematical functions responsive version with no breakpoints <a href="https://codepen.io/thebabydino/pen/QwWQqeR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QwWQqeR</a><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipPath</a> <a href="https://mastodon.social/tags/hexagon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hexagon</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#containerQueryUnits</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯We make the background-size fit an integer number of times within the viewport width and height.We need length division for that, so we use the tan(atan2()) hack by <a href="https://front-end.social/@JaneOri" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@JaneOri</a>. Then, we set box dimensions/ margins to be multiples of background-size <a href="https://www.reddit.com/r/css/comments/1gp4cq0/comment/lwqkyrd/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1gp4cq0/comment/lwqkyrd/</a>Really cool thing is it works well on zoom, see it on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/ZEgwBqL" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/ZEgwBqL</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Maths</a> <a href="https://mastodon.social/tags/mathematics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mathematics</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPattern</a> <a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#pattern</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssHack" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssHack</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a>/ fun fact: same aspect ratio is also what we need for a regular hexagon because that can made up of only equilateral triangles!We just need more points for the clip-path (6 for a hexagon vs. 3 for a triangle).<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#trigonometry</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#maths</a> <a href="https://mastodon.social/tags/mathematics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mathematics</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/hexagon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hexagon</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> Want to create a triangle with all edges equal in 4 simple <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> declarations?Such a triangle also has all vertex angles equal = (sum of angles in a triangle)/3 = 180°/3 = 60°👉 <a href="https://en.wikipedia.org/wiki/Sum_of_angles_of_a_triangle" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://en.wikipedia.org/wiki/Sum_of_angles_of_a_triangle</a>Knowing its edge length a, its height is a·sin(60°).Aspect ratio of the box a/(a·sin(60°)) = 1/sin(60°)<a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/Maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Maths</a> <a href="https://mastodon.social/tags/Mahematics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mahematics</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#trigonometry</a> <a href="https://mastodon.social/tags/triangle" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#triangle</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Ana Tudor 🐯A little pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> 3D demo I made on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> last year: torus knot out of neon tiles <a href="https://codepen.io/thebabydino/pen/poqmrNg" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/poqmrNg</a>I saw this <a href="https://vis.social/@beesandbombs" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@beesandbombs</a> .gif <a href="https://x.com/beesandbombs/status/1497594041164185608" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://x.com/beesandbombs/status/1497594041164185608</a> and got the idea I could CSS something like it, but then I never got to posting it publicly...<a href="https://mastodon.social/tags/torusknot" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#torusknot</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3D</a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#geometry</a> <a href="https://mastodon.social/tags/topology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#topology</a> <a href="https://mastodon.social/tags/knotTheory" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#knotTheory</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#maths</a> <a href="https://mastodon.social/tags/mathematics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mathematics</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTransforms</a>

Ana Tudor 🐯Pure CSS gravity button <a href="https://codepen.io/thebabydino/pen/bGzeQrv?editors=0100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/bGzeQrv?editors=0100</a>With the option to see the animation in slow motion.Saw a challenge (<a href="https://twitter.com/avstorm/status/1719302047311212913" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://twitter.com/avstorm/status/1719302047311212913</a>) and, oh, well...Needs support for animating custom properties registered via `@property`, so that's no Firefox for now.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/codingChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codingChallenge</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#maths</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a>

Recherches récentes

Options de recherche

Administré par :

Statistiques du serveur :

#cssmaths