Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.

Administered by:

Server stats:

295
active users

veganism.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-alpha.5

#cssmask

0 posts0 participants0 posts today
Ana Tudor 🐯<p>1️⃣2️⃣ 486 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 1 div card backgrounds <a href="https://codepen.io/thebabydino/pen/GRRpzNX" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/GRR</span><span class="invisible">pzNX</span></a></p><p>Using mask compositing, which I explained in this <span class="h-card" translate="no"><a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>csstricks</span></a></span> article <a href="https://css-tricks.com/mask-compositing-the-crash-course/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/mask-compositin</span><span class="invisible">g-the-crash-course/</span></a></p><p>Another where I should go through the code and improve it as it can be simplified nowadays... a lot even!</p><p><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/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/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</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>Made this loader <a href="https://codepen.io/thebabydino/pen/BayGjrq" rel="nofollow noopener" 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" 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/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</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/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/mask" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mask</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> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>conicGradient</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a></p>
VegansExploreLive feeds
About