Aral’s fediverse server

David BissetWhy I 🧡 the web.WebTUI is a modular <a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> library that brings the beauty of Terminal UIs to the browser. 💻<a href="https://webtui.ironclad.sh/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webtui.ironclad.sh/</a><a href="https://phpc.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

David BissetSome nice <a href="https://phpc.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> tricks. Animated "Knight Rider" bars, table of contents tweaks, and more.<a href="https://fuma-nama.vercel.app/blog/svg-art" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://fuma-nama.vercel.app/blog/svg-art</a><a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://phpc.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Ana Tudor 🐯You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on <a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@csstricks</a> <a href="https://css-tricks.com/taming-blend-modes-difference-and-exclusion/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/taming-blend-modes-difference-and-exclusion/</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/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</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/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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>

Ana Tudor 🐯And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> declarations.Live demos on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> ✳️ <a href="https://codepen.io/thebabydino/pen/mdOzLxE" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/mdOzLxE</a>✳️ <a href="https://codepen.io/thebabydino/pen/dyOVgeR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/dyOVgeR</a><a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</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/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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>

David Bisset"Default styles for h1 elements are changing"<a href="https://phpc.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://phpc.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a><a href="https://developer.mozilla.org/en-US/blog/h1-element-styles/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/blog/h1-element-styles/</a>

Ana Tudor 🐯Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.So basically, it's again just one `background` + one `background-blend-mode` property.Live demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/vYyNyER" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/vYyNyER</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/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/pattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#pattern</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</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/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</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/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPattern</a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPatterns</a> <a href="https://mastodon.social/tags/patterns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#patterns</a>

Ana Tudor 🐯And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/xxzjJXL" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/xxzjJXL</a> - only 2 CSS declarations necessary!<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</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/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 🐯A much newer <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo: smoothly connected cards <a href="https://codepen.io/thebabydino/pen/azbLBJy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/azbLBJy</a> - continuous backgrounds across all, concave roundings + drop shadows, responsivity.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</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/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</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/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/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/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePenChallenge</a>

RyeHAHAH Making some NeoBrutalist Components in CSS <a href="https://ioc.exchange/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://ioc.exchange/tags/frontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontEnd</a> <a href="https://ioc.exchange/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a>

Ana Tudor 🐯Ever want a box where the padding or content box (inner) rounding is bigger than the border-radius?You can do it with a single element, no pseudos! Here's my take on it, including the particular case where you don't want any outer rounding, but sharp corners <a href="https://www.reddit.com/r/css/comments/1jvs81s/comment/mmeibts/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jvs81s/comment/mmeibts/</a>Live demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/rNJbEqM" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/rNJbEqM</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/borderRadius" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderRadius</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/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>

Ana Tudor 🐯<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> `clip-path` or `mask` are applied after `filter`.This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.<a href="https://codepen.io/thebabydino/pen/BRROzw" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/BRROzw</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/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</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/clipping" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipping</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/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMask</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/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>

ayoNo Web Without Women 💅 Love this website which shows the important role women played on the invention of the World Wide Web :)<a href="https://nowebwithoutwomen.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://nowebwithoutwomen.com/</a><a href="https://social.ayco.io/tags/womenInTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#womenInTech</a> <a href="https://social.ayco.io/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://social.ayco.io/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯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 noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/ZYENVOQ</a>Working in Chrome 135 and Safari 18.4! 🥳🎉<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>

Ana Tudor 🐯Here's also a stepped `conic-gradient()` effect, with a grain effect applied <a href="https://cdpn.io/pvoBeZP" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://cdpn.io/pvoBeZP</a>For more on the grain effect, check out this older post <a href="https://mastodon.social/@anatudor/110394395163731287" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/110394395163731287</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/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</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/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/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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>

Ana Tudor 🐯By the way, the code is heavily commented <a href="https://codepen.io/thebabydino/pen/MYWxeew" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MYWxeew</a>So you can see how it works without JS, without wrapping individual elements into spans, just letting it wrap naturally. And without covers that wouldn't allow for an image backdrop behind the text.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</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/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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a>

Ana Tudor 🐯Same visual result in both cases, it's just that the <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> version specifies the entire RGBA value + (equidistant) stop positions for each stop, while the <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> one only specifies the alpha values for each stop. Given those are equidistant too, a `steps()` way of setting them would make sense.More stepped gradient examples on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/jOoLmBv" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jOoLmBv</a>These all use the same SVG filter.<a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</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/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/stripes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#stripes</a>

Ana Tudor 🐯If what you want isn't beveled, but scooped corners, then you can do it with a `radial-gradient()` mask. You can even add borders too!Here's a <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo illustrating this <a href="https://codepen.io/thebabydino/pen/VYwObZN" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/VYwObZN</a>Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>, no SVG.<a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMask</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/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>

Ana Tudor 🐯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 noreferrer" target="_blank">#CodePenChallenge</a> yet, but here are some older card demos:From 5+ years ago: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.See it on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/ZEGNNQz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/ZEGNNQz</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/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/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/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPattern</a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssPatterns</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a>

Ana Tudor 🐯Here's a quick responsive clover layout on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100</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/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#containerQuery</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</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/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#responsive</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</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/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

mariusIt's nice when you finish a bit of work that goes well and requires no yak shaving in order to get done.For the past week I've been struggling again with the <a href="https://metalhead.club/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> bits of <a href="https://metalhead.club/tags/ONI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ONI</a>, the single user <a href="https://metalhead.club/tags/ActivityPub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ActivityPub</a> server, when I decided to take a little break and work on something else.So today I've add support for the traversal resistant file API for the FS storage part of <a href="https://metalhead.club/tags/GoActivityPub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GoActivityPub</a>. I'm still waiting for the symlink support to be added in the next major <a href="https://metalhead.club/tags/Go" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Go</a> version, but other than that we've increased robustness a little bit despite it being designed mainly for full transparency development work and not being run in production environments.

Recent searches

Search options

Administered by:

Server stats:

#frontend

Recent searches

Search options

Administered by:

Server stats:

Frontend

#frontend