Ana Tudor 🐯<p>2️⃣ `feColorMatrix`: swap channels ☆ interactive demo, adaptive layout - 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> <a href="https://codepen.io/thebabydino/full/QWopRMK" rel="nofollow noopener" 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. Another very special one.</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/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/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.social/tags/interactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>interactive</span></a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</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/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> <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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> </p><p>Behind the demo <a href="https://mastodon.social/@anatudor/112242678457752295" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1122</span><span class="invisible">42678457752295</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:
216active users
eupolicy.social: About · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.1
#cssgrid
0 posts · 0 participants · 0 posts today
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>Safe align your content · The CSS ‘safe’ keyword is worth knowing <a href="https://ilo.im/164jgu" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/164jgu</span><span class="invisible"></span></a></p><p>_____<br><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/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Container" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Container</span></a> <a href="https://mastodon.social/tags/Alignment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Alignment</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/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</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/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssFlexbox</span></a></p>
Ana Tudor 🐯<p>If a grid has `n` columns, it has `n - 1` gaps in between them. Enjoy this interactive <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 illustrating the concept: <a href="https://codepen.io/thebabydino/pen/LEVqOpZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEV</span><span class="invisible">qOpZ</span></a></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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</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/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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>5️⃣ 850 ♥️ No SVG, no image fluid slider <a href="https://codepen.io/thebabydino/pen/qByGqOm" rel="nofollow noopener" 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" 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" target="_blank">@<span>codepen</span></a></span>. </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/slider" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>slider</span></a> <a href="https://mastodon.social/tags/rangeInput" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rangeInput</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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</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/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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMask</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">#<span>CSS</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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</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/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSSsnippet" class="mention hashtag" rel="nofollow noopener" 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" 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" target="_blank">#<span>CSS</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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</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/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</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/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</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/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>geometry</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" 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" 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> <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/responsive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filterEffect</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/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/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>containerQuery</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">@<span>piccalilli</span></a></span>!</p><p>I found <a href="https://buildexcellentwebsit.es" rel="nofollow noopener" 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" 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" 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" 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" 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" 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" 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" target="_blank">@<span>trys</span></a></span></p><p><a href="https://pan.rent/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://pan.rent/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://pan.rent/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>browser</span></a> <a href="https://pan.rent/tags/BuildExcellentWebsites" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BuildExcellentWebsites</span></a> <a href="https://pan.rent/tags/PersonalWebsite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PersonalWebsite</span></a> <a href="https://pan.rent/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSGrid</span></a> <a href="https://pan.rent/tags/PageSpeed" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PageSpeed</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