Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
donphan.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This generalist Mastodon server welcomes enthusiasts of the Pokémon franchise, to talk about it or anything else. Join the federation!

Administered by:

Server stats:

129
active users

donphan.social: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.2+glitch.donphan.social

#clippath

1 post1 participant0 posts today
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>How do you get a zoom effect on an `img`? So that you still have the right click `img` menu and also don't need any extra element?</p><p>Here's how 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/BaGYPPV" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/BaG</span><span class="invisible">YPPV</span></a></p><p>Prompted by coming across a demo that gets the effect with a `div` wrapped in an `overflow: hidden` parent.</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/clip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>clip</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/cssClipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssClipPath</span></a> <a href="https://mastodon.social/tags/zoom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>zoom</span></a> <a href="https://mastodon.social/tags/zoomEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>zoomEffect</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></p>
pablolarah<p>🔴🟢The Magic of Clip Path<br>by Emil Kowalski<br>@emilkowalski_ <br><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/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> </p><p><a href="https://emilkowal.ski/ui/the-magic-of-clip-path" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">emilkowal.ski/ui/the-magic-of-</span><span class="invisible">clip-path</span></a></p>
pablolarah<p>🥭 Animating clip paths on scroll with @property in CSS<br>by Brecht De Ruyte @utilitybend <br><a href="https://mastodon.social/tags/animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>animation</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/scroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scroll</span></a> <a href="https://mastodon.social/tags/propertyCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>propertyCSS</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/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> </p><p><a href="https://utilitybend.com/blog/animating-clip-paths-on-scroll-with-at-property-in-css" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">utilitybend.com/blog/animating</span><span class="invisible">-clip-paths-on-scroll-with-at-property-in-css</span></a></p>
pablolarah<p>🟣🔴 How to Create Stunning Slanted Containers with CSS <br>by <span class="h-card" translate="no"><a href="https://mastodon.social/@zoranjambor" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>zoranjambor</span></a></span><br> at @CSSWeekly<br> </p><p>A detailed, in-depth guide to creating slanted card components using CSS clip-path &amp; shape-outside properties. <br><a href="https://mastodon.social/tags/container" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>container</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/card" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>card</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/clippath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>clippath</span></a> </p><p><a href="https://www.youtube.com/watch?v=emP8tWHtpwk" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">youtube.com/watch?v=emP8tWHtpw</span><span class="invisible">k</span></a></p>
SearchLive feeds
About