Ana Tudor 🐯<p>5️⃣ 850 ♥️ No SVG, no image fluid slider <a href="https://codepen.io/thebabydino/pen/qByGqOm" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBy</span><span class="invisible">GqOm</span></a></p><p><a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a> used only for<br>a) feature support detection<br>b) updating slider value in --val</p><p>Uses only<br>1 × input[type=range] for actual slider<br>1 × output for current value display<br>1 × datalist for ruler</p><p>One of my best sliders on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span>. </p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/slider" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>slider</span></a> <a href="https://mastodon.social/tags/rangeInput" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>rangeInput</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssMask</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</span></a></p>
Recent searches
No recent searches
Search options
Only available when logged in.
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:
218active users
eupolicy.social: About · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.3.6
#cssgrid
0 posts · 0 participants · 0 posts today
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 noreferrer" 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 noreferrer" target="_blank">#<span>CSS</span></a> infinite scroll gallery <a href="https://codepen.io/thebabydino/pen/XJrYqGb" rel="nofollow noopener noreferrer" 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 & 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 noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scrollAnimation</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssTransforms</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssWish</span></a> That we could have a zero count for the number of columns in `repeat()`.</p><p>That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:</p><p>```<br>repeat(var(--k), var(--w)) <br>calc(2*var(--w)<br>repeat(calc(var(--n) - var(--k) - 1), var(--w))<br>```</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a></p>
Ana Tudor 🐯<p>Because I saw a <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span> demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...</p><p>Here's a super simple modern <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></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"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QwW</span><span class="invisible">QqeR</span></a></p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/hexagon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hexagon</span></a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssMaths</span></a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>containerQueryUnits</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>Someone asked how to get such an offset grid for any number of items, so here's my take on it <a href="https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1ixn</span><span class="invisible">jjr/comment/menz0yk/</span></a> - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
LavX News<p>Revolutionizing UI Development with CSS Grid Implementation</p><p>The latest CSS Grid implementation offers developers a powerful tool for creating responsive and flexible layouts in both graphical user interfaces (GUIs) and text user interfaces (TUIs). With feature...</p><p><a href="https://news.lavx.hu/article/revolutionizing-ui-development-with-css-grid-implementation" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">news.lavx.hu/article/revolutio</span><span class="invisible">nizing-ui-development-with-css-grid-implementation</span></a></p><p><a href="https://mastodon.cloud/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>news</span></a> <a href="https://mastodon.cloud/tags/tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tech</span></a> <a href="https://mastodon.cloud/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSGrid</span></a> <a href="https://mastodon.cloud/tags/UIFrameworks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UIFrameworks</span></a> <a href="https://mastodon.cloud/tags/Nim" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Nim</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techniques</span></a><br>Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” <a href="https://ilo.im/161t0f" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/161t0f</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssNesting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssNesting</span></a> <a href="https://mastodon.social/tags/ContainerQueries" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ContainerQueries</span></a> <a href="https://mastodon.social/tags/LogicalProperties" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LogicalProperties</span></a> <a href="https://mastodon.social/tags/ResponsiveDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ResponsiveDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Fun" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Fun</span></a><br>CSS lessons for your parking fails · Proper car positioning may be easier than you think <a href="https://ilo.im/161t84" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/161t84</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Positioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Positioning</span></a> <a href="https://mastodon.social/tags/Spacing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Spacing</span></a> <a href="https://mastodon.social/tags/CssFloat" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssFloat</span></a> <a href="https://mastodon.social/tags/CssTransform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssTransform</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</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 noreferrer" 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 noreferrer" target="_blank">@<span>codepen</span></a></span> <br><a href="https://codepen.io/thebabydino/pen/XJrYqGb" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">@<span>bramus</span></a></span> </p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scrollAnimation</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssTransforms</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSSsnippet" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tinyCSSsnippet</span></a> I've been shocked 🙀 to learn has been slept on:</p><p>```<br>.container { display: grid }<br>.stacked-item { grid-area: 1/ 1 }<br>```</p><p>I use it all the time to stack elements.</p><p>Stack faces of polyhedra before positioning them in 3D. Stack images. Stack 🥧 slices <a href="https://codepen.io/thebabydino/pen/XWvKjJJ" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XWv</span><span class="invisible">KjJJ</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>geometry</span></a></p>
Ana Tudor 🐯<p>Saw <a href="https://www.youtube.com/watch?v=An3QMWg3m1c" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/watch?v=An3QMWg3m1c</span><span class="invisible"></span></a> linked last evening & gave the challenge a quick go myself.</p><p>My approach was a mostly <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).</p><p>While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span>: <a href="https://codepen.io/thebabydino/pen/jENaPjd" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/jEN</span><span class="invisible">aPjd</span></a></p><p><a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssSubgrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssSubgrid</span></a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssMaths</span></a> <a href="https://mastodon.social/tags/Maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Maths</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssVariables</span></a></p>
zeldman<p>CSS Grid Generator:</p><p>“Set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.” <span class="h-card" translate="no"><a href="https://hachyderm.io/@sarah_edo" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sarah_edo</span></a></span> </p><p><a href="https://cssgrid-generator.netlify.app/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">cssgrid-generator.netlify.app/</span><span class="invisible"></span></a> <a href="https://front-end.social/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSGrid</span></a> <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://front-end.social/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>layout</span></a> <a href="https://front-end.social/tags/tools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tools</span></a> <a href="https://front-end.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>design</span></a> <a href="https://front-end.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a></p>
Marcus Jaschen<p>Wochenrückblick, Ausgabe 51 (2024-30).</p><p>Diesmal mit</p><p>🌍 Mein regelmäßiger Browserwechsel und wie Safari es mir schwer macht, zu Firefox zurückzukehren</p><p>📏 der unvernünftige Kauf eines Mitutoyo Digitalmessschiebers</p><p>🔡 Inclusive Sans, einem spannenden Ansatz für eine Schriftart</p><p>▦ Übersichtlicher Blick in alle Ecken von CSS Grid</p><p>💨 Sturmschäden</p><p>🔪 Kyocera: mal nicht als Kopierer oder Drucker, sondern in der Küche 😲</p><p>🍎 Die Apps mit „Q“</p><p>🔊 Techno</p><p><a href="https://digitalcourage.social/tags/Firefox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Firefox</span></a> <a href="https://digitalcourage.social/tags/Vivaldi" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Vivaldi</span></a> <a href="https://digitalcourage.social/tags/Safari" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Safari</span></a> <a href="https://digitalcourage.social/tags/Mitutoyo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Mitutoyo</span></a> <a href="https://digitalcourage.social/tags/Werkstatt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Werkstatt</span></a> <a href="https://digitalcourage.social/tags/InclusiveSans" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>InclusiveSans</span></a> <a href="https://digitalcourage.social/tags/Font" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Font</span></a> <a href="https://digitalcourage.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://digitalcourage.social/tags/Grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Grid</span></a> <a href="https://digitalcourage.social/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSGrid</span></a> <a href="https://digitalcourage.social/tags/Sturm" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Sturm</span></a> <a href="https://digitalcourage.social/tags/Kyocera" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kyocera</span></a> <a href="https://digitalcourage.social/tags/macOS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>macOS</span></a> <a href="https://digitalcourage.social/tags/QuickTime" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>QuickTime</span></a> <a href="https://digitalcourage.social/tags/QMK" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>QMK</span></a> <a href="https://digitalcourage.social/tags/QGIS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>QGIS</span></a> <a href="https://digitalcourage.social/tags/Techno" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techno</span></a></p><p><a href="https://www.marcusjaschen.de/blog/2024/2024-30/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">marcusjaschen.de/blog/2024/202</span><span class="invisible">4-30/</span></a></p>
Ana Tudor 🐯<p>2⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout <a href="https://codepen.io/thebabydino/full/QWopRMK" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/QW</span><span class="invisible">opRMK</span></a></p><p>An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels.</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filterEffect</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>containerQuery</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Tommi 🤯<p>Hey <span class="h-card" translate="no"><a href="https://front-end.social/@piccalilli" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>piccalilli</span></a></span>!</p><p>I found <a href="https://buildexcellentwebsit.es" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">buildexcellentwebsit.es</span><span class="invisible"></span></a> extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s <a href="https://pan.rent/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a>, after many years of mess.</p><p>I used the awesome <a href="https://utopia.fyi" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">utopia.fyi</span><span class="invisible"></span></a> to generate the <code>var</code>s, (actually, I am using <a href="https://www.npmjs.com/package/utopia-core-scss" rel="nofollow noopener noreferrer" target="_blank">the SCSS library</a>).</p><p>Unfortunately, though, I find the massive use of all those <code>calc()</code> and <code>clamp()</code> functions to be quite heavy in terms of performance… <a href="https://pan.rent/tags/Lighthouse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Lighthouse</span></a> gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags (😳) even if it’s super simple and built with pure <a href="https://pan.rent/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> and CSS!</p><p>Do you have any ideas or suggestions? 🤔</p><p>Thank you so much for all the interesting things you share! ❤️🚀</p><p>(The current unstable development version of my website is at <code>https://dev.tommi.space/</code>, I am using the homepage as reference)</p><p>Cc: <span class="h-card" translate="no"><a href="https://fosstodon.org/@j98" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>j98</span></a></span> + <span class="h-card" translate="no"><a href="https://mastodon.social/@trys" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>trys</span></a></span></p><p><a href="https://pan.rent/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a> <a href="https://pan.rent/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://pan.rent/tags/browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>browser</span></a> <a href="https://pan.rent/tags/BuildExcellentWebsites" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BuildExcellentWebsites</span></a> <a href="https://pan.rent/tags/PersonalWebsite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PersonalWebsite</span></a> <a href="https://pan.rent/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSGrid</span></a> <a href="https://pan.rent/tags/PageSpeed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PageSpeed</span></a></p>
ExploreLive 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