mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.

Server stats:

8.1K
active users

#cssclippath

0 posts0 participants0 posts today
Ana Tudor 🐯<p>Pure <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/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> chamfering sequence 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>: tetrahedron → chamfered tetrahedron → cube and back <a href="https://codepen.io/thebabydino/pen/MWVJVKE" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/MWV</span><span class="invisible">JVKE</span></a></p><p><a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>geometry</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css3D</span></a> <a href="https://mastodon.social/tags/CSSclipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSclipPath</span></a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransforms</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></p>
Ana Tudor 🐯<p>A little thing I made on @codepen.io: breathing with `shape()` <br><a href="https://codepen.io/thebabydino/pen/vEEqMWo" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/vEE</span><span class="invisible">qMWo</span></a></p><p>`shape()` is supported in Chrome 135+ and Safari 18.4+.</p><p>Firefox 126+ supports it for simple shapes (but not for this demo) when setting thelayout.css.basic-shape-shape.enabled to true in about:config.</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/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</span></a> <a href="https://mastodon.social/tags/animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>animation</span></a> <a href="https://mastodon.social/tags/cssShapes" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssShapes</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/clipping" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipping</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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it <a href="https://www.reddit.com/r/css/comments/1kcmabf/comment/mq5ck6m/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1kcm</span><span class="invisible">abf/comment/mq5ck6m/</span></a></p><p>Live 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/pen/PwwQxdb?editors=0100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Pww</span><span class="invisible">Qxdb?editors=0100</span></a></p><p>`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.</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/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</span></a> <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMaths</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></a> `clip-path` or `mask` are applied after `filter`.</p><p>This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.</p><p>We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.</p><p><a href="https://codepen.io/thebabydino/pen/BRROzw" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/BRR</span><span class="invisible">Ozw</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/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/clipping" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipping</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</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/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/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/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a></p>
Ana Tudor 🐯<p>Here's a quick breathing box demo with `clip-path: shape()` on @codepen.io: <a href="https://codepen.io/thebabydino/pen/ZYENVOQ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/ZYE</span><span class="invisible">NVOQ</span></a></p><p>Working in Chrome 135 and Safari 18.4! 🥳🎉</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/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</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/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></p>
Ana Tudor 🐯<p>I haven't had the time to do anything for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> yet, but here are some older card demos:</p><p>From 5+ years ago: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.</p><p>See it 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/pen/ZEGNNQz" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/ZEG</span><span class="invisible">NNQz</span></a></p><p><a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</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> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPattern</span></a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPatterns</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a></p>

Know how border-image & border-radius don't play nice together?

(interactive codepen.io/thebabydino/pen/jxZ)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: codepen.io/thebabydino/pen/qBE

(and yes, this is a tip I first shared on twitter over half a decade ago x.com/anatudor/status/12199161 )