est.social

Stu RobsonICYMI 🎉 new article alert 🎉🎨 Today we look at creating multiple themes for one brand (like a personal website)📰 Creating Multiple Themes with Style Dictionary🌐 <a href="https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-10" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-10</a><a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignTokens</a> <a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystems</a>

Stu Robson🎉 new article alert 🎉🎨 Today we're looking at creating multiple themes for one brand (like a personal website)📰 Creating Multiple Themes with Style Dictionary🌐 <a href="https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-10" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-10</a><a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignTokens</a> <a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystems</a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

Ana Tudor 🐯How would you create this in such a way that its individual parts can be scaled independently, including via <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> animations/ transitions?Here's my take on it <a href="https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/</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/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</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/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/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 🐯Single `img` element squircle + inner shadow with <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> magic 🪄Check it out 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/MYgNgBa" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MYgNgBa</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/squircle" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#squircle</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/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/ebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ebDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Ana Tudor 🐯Here's another such example 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/azbLBJy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/azbLBJy</a>Concave rounding, gradient background, shape drop-shadow, responsivity... all in one demo. Also using an <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/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grid</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/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</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/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>

Stu Robson🎉 ICYMI I wrote a new article in my Design Tokens Workflow Series📰 Implementing Multi-Brand Theming with Style Dictionary🌐 <a href="https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-9" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-9</a>🙏🖤 <a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignTokens</a> <a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystems</a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

Ana Tudor 🐯Little <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo: stacked avatars <a href="https://codepen.io/thebabydino/pen/ogNQryV" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/ogNQryV</a>Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> and very little of it, just some <a href="https://mastodon.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> magic. 🪄<a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</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/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>

Stu Robson🎉 new article alert 🎉👀 In the ninth article in my design tokens workflow series we look at –📰 Implementing Multi-Brand Theming with Style Dictionary🌐 <a href="https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-9" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-9</a><a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignTokens</a> <a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystems</a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

Ana Tudor 🐯Here's a gradient background version on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> too <a href="https://codepen.io/thebabydino/pen/KwKrJGp" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/KwKrJGp</a>Shape depends on how the text content naturally wraps.<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/gooey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gooey</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 🐯To fix this, we give the assembly a tiny blur.We don't want blurry edges👇 either, so we push some of the semitransparent edge pixels to either 0 or 1, whichever is closer. To do so, we use another `feComponentTransfer` and map the [0, 1] alpha interval to [-2, 3]. Basically we're stretching the alpha interval to be 5 times bigger, keeping same midpoint (.5), then it's clamped to [0, 1].<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/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</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/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssBlur</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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a>

Ana Tudor 🐯Enter 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>!`feComponentTransfer` allows us to manipulate individual RGBA channels. In this case just the alpha (via `feFuncA`) by making all assembly pixels whose alpha is below `.5` fully transparent (alpha = 0). And all other pixels fully opaque (alpha = 1).This makes edges jagged. 💀 Maybe not so noticeable in some cases, but it often won't cut it.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssBlur</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/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</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/webDevelpment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelpment</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/goo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#goo</a> <a href="https://mastodon.social/tags/gooey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gooey</a> <a href="https://mastodon.social/tags/blobs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blobs</a> <a href="https://mastodon.social/tags/metalball" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#metalball</a>

Ana Tudor 🐯How the assembly alpha is computed is something I've detailed in 👉 <a href="https://css-tricks.com/adventures-in-css-semi-transparency-land/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/adventures-in-css-semi-transparency-land/</a>Keep in mind that where we have overlap, two corresponding pixels from the two layers may both have an alpha below .5, but their overlap can still give the assembly an alpha above .5!For example:.4 + .3 - .4*.3 = .7 - .12 = .58Both .4 and .3 are smaller than .5, but the overlap alpha .58 is bigger than .5!<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</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/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssBlur</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 🐯As you can see in the recording 👆 blurring makes the pixels around the edges semitransparent. The bigger the blur radius, the more pixels become transparent.When the particles get closer, their semitransparent areas overlap. This increases the assembly alpha there.<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/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssBlur</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 🐯What's going on here?We have particles moving around inside a `.goo` assembly. How we do that (layout, animation) doesn't matter.We blur these particles with 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> (same blur radius or not). CSS allows us to use whatever unit we need for the blur radius. rem, cqi, lh. <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</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 little spinner I made years ago on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> but never shared publicly <a href="https://codepen.io/thebabydino/pen/OJQKbKW" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/OJQKbKW</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/loader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#loader</a> <a href="https://mastodon.social/tags/spinner" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#spinner</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/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/conicGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#conicGradient</a> <a href="https://mastodon.social/tags/cssSpinner" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssSpinner</a> <a href="https://mastodon.social/tags/cssLoader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLoader</a> <a href="https://mastodon.social/tags/singleDiv" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#singleDiv</a> <a href="https://mastodon.social/tags/oneDiv" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#oneDiv</a>

Front End North📢 “Building Better Webs"In a world where over half of all internet traffic goes to Big Tech sites, the weird and wonderful web seems to be shrinking. Join <a href="https://social.gfsc.studio/@oluOnline" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@oluOnline</a> at Front End North 2025 to examine how we can take back our webs.🔗 Olu's talk → <a href="https://frontendnorth.com/speakers/olu-niyi-awosusi" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendnorth.com/speakers/olu-niyi-awosusi</a><a href="https://front-end.social/tags/FEN" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FEN</a> <a href="https://front-end.social/tags/Web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Web</a> <a href="https://front-end.social/tags/SheffieldTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SheffieldTech</a> <a href="https://front-end.social/tags/Sheffield" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Sheffield</a> <a href="https://front-end.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a>

Luke HarbyWho here knows about font files? Can anyone help me out with a glyph question? <a href="https://infosec.exchange/tags/FediverseHelp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FediverseHelp</a> <a href="https://infosec.exchange/tags/FediHelp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FediHelp</a> <a href="https://infosec.exchange/tags/fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fonts</a> <a href="https://infosec.exchange/tags/otf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#otf</a> <a href="https://infosec.exchange/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://infosec.exchange/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a>

Ana Tudor 🐯Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.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/XJWxLWV" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XJWxLWV</a>cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@bramus</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/scroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scrollAnimation</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/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/gradientText" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gradientText</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>

Kerrick Long (code)New blog post! What Books Should I Read to Learn ASP.NET Core and Blazor?<a href="https://kerrick.blog/articles/2025/24-books-asp-net-blazor-front-matter/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kerrick.blog/articles/2025/24-books-asp-net-blazor-front-matter/</a><a href="https://dotnet.social/tags/DotNET" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DotNET</a> <a href="https://dotnet.social/tags/ASPdotNET" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ASPdotNET</a> <a href="https://dotnet.social/tags/BackEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BackEnd</a> <a href="https://dotnet.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://dotnet.social/tags/Blazor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Blazor</a> <a href="https://dotnet.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://dotnet.social/tags/SPA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SPA</a> <a href="https://dotnet.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://dotnet.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://dotnet.social/tags/books" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#books</a> <a href="https://dotnet.social/tags/reading" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#reading</a>

Ana Tudor 🐯Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple 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/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> demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> doing it <a href="https://codepen.io/thebabydino/pen/KwKGrjR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/KwKGrjR</a>Heavily commented. See also <a href="https://mastodon.social/@anatudor/114185324674119212" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/114185324674119212</a> for details about some of the filter primitives.<a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</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> <a href="https://mastodon.social/tags/concave" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#concave</a>

Viimatised otsingud

Otsimisvalikud

Administraator:

Serveri statistika:

#Frontend