Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mamot.fr is one of the many independent Mastodon servers you can use to participate in the fediverse.
Mamot.fr est un serveur Mastodon francophone, géré par La Quadrature du Net.

Administered by:

Server stats:

3.5K
active users

mamot.fr: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.4

#cssvariables

0 posts0 participants0 posts today
Ana Tudor 🐯<p>Flip card on hover, flip back on hover out...</p><p>... but on touchscreens, flip it on click and then flip it back on second click!</p><p>A mostly <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> solution, using <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>3D</span></a> transforms, variables, grid, pointer MQ + a little bit of <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a>.</p><p>Because somebody asked how to do it <a href="https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1jm0</span><span class="invisible">a7v/comment/mk7zmd5/</span></a></p><p>Live demo 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/MYWPeer" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/MYW</span><span class="invisible">Peer</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/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css3D</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/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/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></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>No JS <a href="https://mastodon.social/tags/fluid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fluid</span></a> animation. The animation is created in <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a>, where I'm animating the values of two custom properties back and forth. `feTurbulence` creates the background, `feDisplacement` map uses the CSS-animated input to make it move.</p><p>My take on this question <a href="https://www.reddit.com/r/webdev/comments/1izlhkw/comment/mfedw8s/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/webdev/comments/1</span><span class="invisible">izlhkw/comment/mfedw8s/</span></a></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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</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/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</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/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/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/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssVariables</span></a></p>
Ana Tudor 🐯<p>My most popular demo of 2024. By far. My second most hearted <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 ever.</p><p><a href="https://codepen.io/thebabydino/pen/WNVPdJg" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/WNV</span><span class="invisible">PdJg</span></a></p><p>Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a>, single div, very little code overall; and that's even including layout, prettifying &amp; animation styles. Oh, heavily commented too.</p><p><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/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssVariables</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/dv" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dv</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/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</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/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/glow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>glow</span></a></p>
Ana Tudor 🐯<p>I haven't used style queries much, but just gave them a spin and got an idea (that I've just tested &amp; works) about how we can have ranges in style queries right now. 🥳</p><p>That is, red background if --k &lt;= 20, orange background if 20 &lt; --k &lt;= 40 and so on...</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/styleQueries" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>styleQueries</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/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/containerQueries" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>containerQueries</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>
pablolarah<p>🥤 Pure CSS Mixin for Displaying Values of Custom Properties<br>by Roman Komarov <span class="h-card" translate="no"><a href="https://front-end.social/@kizu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>kizu</span></a></span> <br><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/CSSCounters" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSCounters</span></a> <a href="https://mastodon.social/tags/CSSLayers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSLayers</span></a> <a href="https://mastodon.social/tags/Experiment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Experiment</span></a> <a href="https://mastodon.social/tags/Practical" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Practical</span></a> <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/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a> <a href="https://mastodon.social/tags/CSSMixin" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSMixin</span></a> </p><p><a href="https://kizu.dev/preview-mixin/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kizu.dev/preview-mixin/</span><span class="invisible"></span></a></p>
Ana Tudor 🐯<p>Here's a little thing I made for the 1st <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CodePenChallenge</span></a> of '25: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> tilt &amp; zoom grid on scroll!</p><p>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> </p><p><a href="https://codepen.io/thebabydino/pen/jENzprY" 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">zprY</span></a></p><p>Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.</p><p>Chromium only.</p><p><a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scroll</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/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssVariables</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/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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <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/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/webDEvelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDEvelopment</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></p>
Ana Tudor 🐯<p>Made this loader <a href="https://codepen.io/thebabydino/pen/BayGjrq" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Bay</span><span class="invisible">Gjrq</span></a> half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.</p><p>As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</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/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/mask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>mask</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> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>conicGradient</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/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssAnimation</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 &amp; 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 &amp; 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>
Andy P<p>applying a flexible <a href="https://mastodon.art/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> z-index stack fixed a lot of messy legacy layering issues for me. There might be better ways, but this is very readable when applied, some examples:</p><p>.is-sticky {<br> position: sticky;<br> z-index: var(--above-page-z);<br>}</p><p>.notification {<br> z-index: var(--alert-z);<br>}</p><p><a href="https://mastodon.art/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a> <a href="https://mastodon.art/tags/CssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssVariables</span></a> <a href="https://mastodon.art/tags/zindex" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>zindex</span></a></p>
GENKI<p><a href="https://social.vivaldi.net/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TailwindCSS</span></a> の設定が <a href="https://social.vivaldi.net/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a> ではなく <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> からできるようになるらしい。<br><a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenProps</span></a> とかで見慣れた <a href="https://social.vivaldi.net/tags/CSS%E5%A4%89%E6%95%B0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS変数</span></a> <a href="https://social.vivaldi.net/tags/CSSVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSSVariables</span></a> で設定を上書きするスタイル。</p><p><a href="https://tailwindcss.com/docs/v4-beta#css-first-configuration" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">tailwindcss.com/docs/v4-beta#c</span><span class="invisible">ss-first-configuration</span></a></p>
Kir4ik52 :blobfoxnerd:<p>Neohtop — это Htop на стероидах</p><p>Приложение позволяет мониторить процессы в реальном времени, отслеживать использование CPU и памяти, а также обладает современным интерфейсом с темным и светлым режимами. </p><p>Пользователи могут искать процессы по различным критериям, фиксировать важные процессы и управлять ими, включая завершение. </p><p>Статистика системы обновляется автоматически, а сортировка доступна по любому столбцу.</p><p>Для разработки используется SvelteKit и TypeScript на фронтенде, Rust и Tauri на бэкенде, а также CSS Variables для стилизации и FontAwesome для иконок.</p><p>src: <a href="https://github.com/Abdenasser/neohtop" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">github.com/Abdenasser/neohtop</span><span class="invisible"></span></a></p><p><a href="https://mastodon.ml/tags/blacktriangle" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blacktriangle</span></a> <a href="https://mastodon.ml/tags/github" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>github</span></a> <a href="https://mastodon.ml/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>opensource</span></a> <a href="https://mastodon.ml/tags/htop" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htop</span></a> <a href="https://mastodon.ml/tags/top" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>top</span></a> <a href="https://mastodon.ml/tags/typescript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>typescript</span></a> <a href="https://mastodon.ml/tags/rust" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>rust</span></a> <a href="https://mastodon.ml/tags/sveltekit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>sveltekit</span></a> <a href="https://mastodon.ml/tags/tauri" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tauri</span></a> <a href="https://mastodon.ml/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.ml/tags/cssvariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssvariables</span></a> <a href="https://mastodon.ml/tags/fontawesome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fontawesome</span></a></p>
Ana Tudor 🐯<p>Another <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> remake: this hover effect menu <a href="https://codepen.io/thebabydino/pen/DZpgaZ" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/DZp</span><span class="invisible">gaZ</span></a></p><p>Using flexbox instead of floats and CSS variables &amp; mathematical functions so that on hover we have a simple transition and not the abomination that is keyframes at 49.999% and 50%.</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/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>flexbox</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> <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/trigonometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>trigonometry</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/Mathematics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Mathematics</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>Another super old <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 I redid with modern <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> is this yummy menu <a href="https://codepen.io/thebabydino/pen/AoxZQq" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Aox</span><span class="invisible">ZQq</span></a></p><p>CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!</p><p><a href="https://mastodon.social/tags/gridLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gridLayout</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/clipping" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>clipping</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/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/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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</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></p>
Ana Tudor 🐯<p>Updated 10+ year old SO answer on how to position items for a circular menu <a href="https://stackoverflow.com/a/15185180/1397351" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">stackoverflow.com/a/15185180/1</span><span class="invisible">397351</span></a></p><p>Because <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> got better in the meanwhile. This remake uses CSS grid instead of absolute positioning, CSS vars to reduce the code and CSS trigonometry for improved maintainability.</p><p><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 <a href="https://codepen.io/thebabydino/pen/nLNRYx" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/nLN</span><span class="invisible">RYx</span></a></p><p><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/trigonometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>trigonometry</span></a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>geometry</span></a> <a href="https://mastodon.social/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grid</span></a> <a href="https://mastodon.social/tags/gridLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gridLayout</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/menu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>menu</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/cod" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cod</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>Here's another little something from forever ago that I've recently updated 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 circular menu! </p><p><a href="https://codepen.io/thebabydino/pen/nKzaPQ" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/nKz</span><span class="invisible">aPQ</span></a></p><p>The code was really outdated, so I redid it to use CSS variables, trigonometry, grid, clip-path, SVG filters for the inner shadow &amp; grain.</p><p>Hope you like it!</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/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssVariables</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/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</span></a> <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/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/gridLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gridLayout</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/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</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/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/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssMaths</span></a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>trigonometry</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/geometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>geometry</span></a></p>
ExploreLive feeds
About