Social 📸 Photography

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> We can have boolean logic in container queries!And this works cross-browser!Live test on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/QwbNNpz" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QwbNNpz</a>More info on MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@container#logical_keywords_in_container_queries" rel="nofollow noopener" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/@container#logical_keywords_in_container_queries</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#containerQuery</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" 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" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MYWXoZW</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" 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" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jxZyed</a>)<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">@codepen</a> demo: <a href="https://codepen.io/thebabydino/pen/qBELJGY?editors=1100" rel="nofollow noopener" 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" translate="no" target="_blank">https://x.com/anatudor/status/1219916121341644807</a> )<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#clipPath</a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssClipPath</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/borderImage" class="mention hashtag" rel="nofollow noopener" target="_blank">#borderImage</a> <a href="https://mastodon.social/tags/borderRadius" class="mention hashtag" rel="nofollow noopener" target="_blank">#borderRadius</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> Want your page background to contain an integer number of dots?Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 🥳Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/RwXvryZ" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/RwXvryZ</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#pattern</a> <a href="https://mastodon.social/tags/gradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#gradient</a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssPattern</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> Want to create a triangle with all edges equal in 4 simple <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> declarations?Such a triangle also has all vertex angles equal = (sum of angles in a triangle)/3 = 180°/3 = 60°👉 <a href="https://en.wikipedia.org/wiki/Sum_of_angles_of_a_triangle" rel="nofollow noopener" translate="no" target="_blank">https://en.wikipedia.org/wiki/Sum_of_angles_of_a_triangle</a>Knowing its edge length a, its height is a·sin(60°).Aspect ratio of the box a/(a·sin(60°)) = 1/sin(60°)<a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/Maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#Maths</a> <a href="https://mastodon.social/tags/Mahematics" class="mention hashtag" rel="nofollow noopener" target="_blank">#Mahematics</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#trigonometry</a> <a href="https://mastodon.social/tags/triangle" class="mention hashtag" rel="nofollow noopener" target="_blank">#triangle</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" 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" 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" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/cssTip" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTip</a> <a href="https://mastodon.social/tags/cssTips" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTips</a> <a href="https://mastodon.social/tags/tipsAndTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#tipsAndTricks</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/wedDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#wedDev</a> <a href="https://mastodon.social/tags/webDevelpment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelpment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> (<a href="https://mastodon.social/tags/gotcha" class="mention hashtag" rel="nofollow noopener" 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" 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" translate="no" target="_blank">https://mastodon.social/@anatudor/111325570560270740</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/shadow" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadow</a> <a href="https://mastodon.social/tags/cssShadow" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssShadow</a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#typography</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> Setting `line-height: 1cap` to a `div` is not a magic solution to get numbers/ text in all caps aligned to the top/ bottom of the `content-box`.The results sadly still depend on the font. 😿 <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#typography</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> One thing that has always annoyed me about `:empty` is that it doesn't work for elements that have text content, but no element children.`:has()` fixes this problem.`:not(:has(*))` selects elements that don't have element children, even if they have text content.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> If you make an element a container, a `position: absolute` child is going to be positioned relative to it, which can be very problematic if you were counting on positioning it relative to another ancestor.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Basic <a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a>.💡So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/cssTip" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTip</a> <a href="https://mastodon.social/tags/cssTips" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTips</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTricks</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/cssBasics" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssBasics</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> Want mono emojis of various hues? Use CSS filters! 🐾 ✨brightness(0) ⇒ black emoji ✨invert(x%) ⇒ hsl(0, 0%, x%) ✨sepia(1) ⇒ pretty desaturated, lighter or darker yellow depending on x% (hue≅40) ✨hue-rotate(a) ⇒ move around hue wheel by a ✨saturate(v), v>1On <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePen</a> <a href="https://codepen.io/thebabydino/pen/PoQEqxg" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/PoQEqxg</a>A little trick I've been using for a few years. 😼 <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/emoji" class="mention hashtag" rel="nofollow noopener" target="_blank">#emoji</a> <a href="https://mastodon.social/tags/mono" class="mention hashtag" rel="nofollow noopener" target="_blank">#mono</a> <a href="https://mastodon.social/tags/icon" class="mention hashtag" rel="nofollow noopener" target="_blank">#icon</a> <a href="https://mastodon.social/tags/emojis" class="mention hashtag" rel="nofollow noopener" target="_blank">#emojis</a> <a href="https://mastodon.social/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#icons</a> <a href="https://mastodon.social/tags/emojicons" class="mention hashtag" rel="nofollow noopener" target="_blank">#emojicons</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTricks</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a> ... for the future! Set color to black or white depending on the contrast with background!Chrome 🪲 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1274133" rel="nofollow noopener" translate="no" target="_blank">https://bugs.chromium.org/p/chromium/issues/detail?id=1274133</a> Firefox 🪲 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1701488" rel="nofollow noopener" translate="no" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=1701488</a>Idea💡 I got when I saw the Pen here <a href="https://twitter.com/madsstoumann/status/1692814882062672373" rel="nofollow noopener" translate="no" target="_blank">https://twitter.com/madsstoumann/status/1692814882062672373</a> was setting color values for each panel individually.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/CSSvariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSvariables</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a>You can use pure CSS `pow()` to easily switch in between layouts based ton the viewport aspect-ratio. 😎<a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePen</a> demo <a href="https://codepen.io/thebabydino/pen/XWoJWwR" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XWoJWwR</a>The `grid-template-columns` property gets set only once! We only set an exponent `--exp` for each aspect ratio. 😼 <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/CSSvariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSvariables</a> <a href="https://mastodon.social/tags/CSSgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSgrid</a> <a href="https://mastodon.social/tags/CSSlayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSlayout</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">#css</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#tinyCSStip</a>Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`?Use `color-mix()`!Cross-browser, btw. 😼<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Recent searches

Search options

Administered by:

Server stats:

#tinyCSStip