Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></a> if you want to make an absolutely positioned pseudo cover its parent's entire `padding-box`, use `inset: 0`!</p><p>(love grid for stacking/ full coverage too, but there are differences between how the two solutions work and there are cases when absolute positioning is still preferable)</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/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</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/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>
eupolicy.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This Mastodon server is a friendly and respectful discussion space for people working in areas related to EU policy. When you request to create an account, please tell us something about you.
Administered by:
Server stats:
216active users
eupolicy.social: About · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.1
#tinyCSStip
0 posts · 0 participants · 0 posts today
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></a></p><p>Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`, which was given as a hex or keyword value?</p><p>No need to convert to rgb() or hsl() anymore!</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/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> Dev <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</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> Want your page background to contain an integer number of dots?</p><p>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. 🥳</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/RwXvryZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/RwX</span><span class="invisible">vryZ</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/pattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>pattern</span></a> <a href="https://mastodon.social/tags/gradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gradient</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/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</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/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 href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></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">#<span>CodePen</span></a> already. Here's the how behind it.</p><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/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</span></a> effect in 3 declarations:</p><p>✨ background layering a pattern and a map<br>✨ blend mode multiplication of the two layers<br>✨ contrast bump up to push all greys to either black or white</p><p><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/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTricks</span></a> <a href="https://mastodon.social/tags/cssTip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTip</span></a> <a href="https://mastodon.social/tags/cssTips" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTips</span></a> <a href="https://mastodon.social/tags/tipsAndTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tipsAndTricks</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/wedDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wedDev</span></a> <a href="https://mastodon.social/tags/webDevelpment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelpment</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> (<a href="https://mastodon.social/tags/gotcha" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gotcha</span></a>)</p><p>`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"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/-webkit-text-stroke</span></a>), the shadow gets drawn *under* the stroke.</p><p>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"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1113</span><span class="invisible">25570560270740</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/shadow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>shadow</span></a> <a href="https://mastodon.social/tags/cssShadow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssShadow</span></a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffect</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/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>
TrendingLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload