Shakedown Social

0 posts0 participants0 posts today

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.<a href="https://codepen.io/thebabydino/pen/MYWXoZW" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MYWXoZW</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#transform</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Know how border-image & border-radius don't play nice together?(interactive <a href="https://codepen.io/thebabydino/pen/jxZyed" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jxZyed</a>)<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!clip-path: inset(0 round $r)<a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo: <a href="https://codepen.io/thebabydino/pen/qBELJGY?editors=1100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qBELJGY?editors=1100</a>(and yes, this is a tip I first shared on twitter over half a decade ago <a href="https://x.com/anatudor/status/1219916121341644807" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://x.com/anatudor/status/1219916121341644807</a> )<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipPath</a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssClipPath</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/borderImage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderImage</a> <a href="https://mastodon.social/tags/borderRadius" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderRadius</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> You may have seen some of my demos using this on <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> already. Here's the how behind it.Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#halftone</a> effect in 3 declarations:✨ background layering a pattern and a map ✨ blend mode multiplication of the two layers ✨ contrast bump up to push all greys to either black or white<a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/cssTip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTip</a> <a href="https://mastodon.social/tags/cssTips" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTips</a> <a href="https://mastodon.social/tags/tipsAndTricks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tipsAndTricks</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/wedDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#wedDev</a> <a href="https://mastodon.social/tags/webDevelpment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelpment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> (<a href="https://mastodon.social/tags/gotcha" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gotcha</a>)`text-shadow` is drawn relative to original unstroked text. So if you set a `text-shadow` and also a thicker text stroke (supported cross-browser for years now with the `-webkit-` prefix <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke</a>), the shadow gets drawn *under* the stroke.To get a visible shadow relative to the stroked text, use `filter: drop-shadow()` <a href="https://mastodon.social/@anatudor/111325570560270740" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/111325570560270740</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/shadow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadow</a> <a href="https://mastodon.social/tags/cssShadow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssShadow</a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a>Want to get a progressive grayscale()/ saturate() filter effect, from 0% to normal?Blend with a gradient from *anything with saturation 0%* to transparent using the color blend mode!<a href="https://codepen.io/thebabydino/pen/rNQbEEg" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/rNQbEEg</a>No duplication + masking necessary for this effect!Last image shows the original image without the gradual effect saturation for comparison.May also have a grayscale split <a href="https://twitter.com/anatudor/status/1351781587889889283" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://twitter.com/anatudor/status/1351781587889889283</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> Do you still use `position: absolute` to stack elements, for example when coding paralax effects?It's 2023! While there are still legitimate use cases for absolute positioning, CSS grid is the better solution in most cases. Way more compact & easier to understand.👇<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Recent searches

Search options

Administered by:

Server stats:

#tinyCSStip