masto.es es uno de los varios servidores independientes de Mastodon que puedes usar para participar en el fediverso.
Bienvenidos a masto.es, el mayor servidor de Mastodon para hispanohablantes de temática general.

Administrado por:

Estadísticas del servidor:

1,8 K
usuarios activos

#blendmode

0 publicaciones0 participantes0 publicaciones hoy
Ana Tudor 🐯<p>Because this <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> demo just got hearted and I've never shared it here before <a href="https://codepen.io/thebabydino/pen/VwmQQwJ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Vwm</span><span class="invisible">QQwJ</span></a></p><p>The concept behind the XOR is something I explained in this <br><span class="h-card" translate="no"><a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>csstricks</span></a></span> article <a href="https://css-tricks.com/taming-blend-modes-difference-and-exclusion/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/taming-blend-mo</span><span class="invisible">des-difference-and-exclusion/</span></a></p><p>(should probably redo it with view transitions)</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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/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/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on <span class="h-card" translate="no"><a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>csstricks</span></a></span> <a href="https://css-tricks.com/taming-blend-modes-difference-and-exclusion/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/taming-blend-mo</span><span class="invisible">des-difference-and-exclusion/</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</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/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</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></p>
Ana Tudor 🐯<p>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" target="_blank">#<span>CSS</span></a> declarations.</p><p>Live demos 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> </p><p>✳️ <a href="https://codepen.io/thebabydino/pen/mdOzLxE" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/mdO</span><span class="invisible">zLxE</span></a></p><p>✳️ <a href="https://codepen.io/thebabydino/pen/dyOVgeR" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/dyO</span><span class="invisible">VgeR</span></a></p><p><a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</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/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</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></p>
Ana Tudor 🐯<p>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.</p><p>So basically, it's again just one `background` + one `background-blend-mode` property.</p><p>Live demo 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> <br><a href="https://codepen.io/thebabydino/pen/vYyNyER" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/vYy</span><span class="invisible">NyER</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</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/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</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/cssPattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPattern</span></a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssPatterns</span></a> <a href="https://mastodon.social/tags/patterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>patterns</span></a></p>
Ana Tudor 🐯<p>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.</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/xxzjJXL" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/xxz</span><span class="invisible">jJXL</span></a> - only 2 CSS declarations necessary!</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/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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>By the way, the code is heavily commented <a href="https://codepen.io/thebabydino/pen/MYWxeew" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/MYW</span><span class="invisible">xeew</span></a></p><p>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.</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/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a></p>
Ana Tudor 🐯<p>If we have an inline `span` inside a `p` &amp; we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.</p><p>How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?</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/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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/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/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/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a></p>
Ana Tudor 🐯<p>Hi, mastodon 🦣 I have a new article out!</p><p>A Deep Dive into the Inline Background Overlap Problem: <a href="https://frontendmasters.com/blog/overlapping-inline-backgrounds/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/overl</span><span class="invisible">apping-inline-backgrounds/</span></a></p><p>How do you get the below result (semi-transparent background on inline span) with large padding &amp; no overlap?</p><p>Answer in article, but think a bit about it first. 😼</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/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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/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/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/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a></p>
Ana Tudor 🐯<p>Oh, Firefox, why are you doing this? 😭 🪲</p><p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1951653" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">bugzilla.mozilla.org/show_bug.</span><span class="invisible">cgi?id=1951653</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/bug" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>bug</span></a></p>
Ana Tudor 🐯<p>Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 1 div halftone-masked background card <a href="https://codepen.io/thebabydino/pen/GRNKqRv" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/GRN</span><span class="invisible">KqRv</span></a> 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>. </p><p>Made this 4 years ago - can you guess how before checking the code?</p><p>Doesn't work in Firefox due to an old bug 🪲 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1481498" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">bugzilla.mozilla.org/show_bug.</span><span class="invisible">cgi?id=1481498</span></a> not even related to the halftone mask, but caused by the duo text on the right. </p><p><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/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/cssfFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssfFilter</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/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a></p>
Ana Tudor 🐯<p>By the way, this is my second article for Frontend Masters. </p><p>My first was a few months ago and it was about creating dynamic split effects (image, text, page) without any content duplication whatsoever <a href="https://frontendmasters.com/blog/split-effects-with-no-content-duplication/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/split</span><span class="invisible">-effects-with-no-content-duplication/</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/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</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/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</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/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</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/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a></p>
Ana Tudor 🐯<p>I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 <a href="https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/pure-</span><span class="invisible">css-halftone-effect-in-3-declarations/</span></a></p><p>This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.</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/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</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/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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 little <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> demo I made some years back: <a href="https://mastodon.social/tags/duotone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>duotone</span></a> a B&amp;W image using 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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> (and very little code in total) <a href="https://codepen.io/thebabydino/pen/MWbdbrm" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/MWb</span><span class="invisible">dbrm</span></a></p><p>With a comparison slider between the two blend modes that may be used for the effect and a picker for duotone palette base. </p><p>Created for my Taming Blend Modes <a href="https://mastodon.social/tags/CSSTricks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSTricks</span></a> article <a href="https://css-tricks.com/taming-blend-modes-difference-and-exclusion/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/taming-blend-mo</span><span class="invisible">des-difference-and-exclusion/</span></a></p><p><a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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/webDevelpment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelpment</span></a> <a href="https://mastodon.social/tags/interactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>interactive</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/slider" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>slider</span></a> <a href="https://mastodon.social/tags/comparison" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>comparison</span></a> <a href="https://mastodon.social/tags/comparisonSlider" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>comparisonSlider</span></a></p>
Ana Tudor 🐯<p>Another request, mastodon 🦣</p><p>If you can test in Safari, can you let me know what the second (moving) line looks like for you?</p><p><a href="https://codepen.io/thebabydino/pen/JjgdLQL?editors=1100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Jjg</span><span class="invisible">dLQL?editors=1100</span></a></p><p>Cyan like expected/ Chrome/ Firefox? Lime like what I'm seeing with Epiphany?</p><p>Boosts appreciated if you cannot test. Thanks! 🙏</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransforms</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</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/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a></p>
Ana Tudor 🐯<p>If you can test in actual Safari, could you let me know how this looks for you?</p><p><a href="https://codepen.io/thebabydino/pen/YzoobYd" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Yzo</span><span class="invisible">obYd</span></a></p><p>Like in the first screenshot or like in the second?</p><p>Thanks! 🙏</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/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/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/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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a></p>
Ana Tudor 🐯<p>Saw some familiar demos among those trending 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> 🙃</p><p>✨blended layers</p><p>✨slice &amp; offset</p><p>✨here is real magic 🪄 </p><p>✨dizzy 3D</p><p>✨no matrix gooey effect</p><p>✨realistic grainy shadows</p><p>✨slice</p><p>✨split text effect</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <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/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</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></p>
Ana Tudor 🐯<p>If you like split effects, I've collected a bunch of them with no content duplication in this post <a href="https://frontendmasters.com/blog/split-effects-with-no-content-duplication/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/split</span><span class="invisible">-effects-with-no-content-duplication/</span></a></p><p>Note that the recordings were made on an old laptop and they suffer from compression. The live demos look better. </p><p>Enjoy!</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <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/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</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> <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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>No text duplication, no JS, no images save for CSS gradients, no long lists of values for anything (like text-shadow).</p><p>Just plain text + CSS gradients + blending + the magic of <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> filters for extrusion + texture 🪄✨</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/gONbppb" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/gON</span><span class="invisible">bppb</span></a></p><p><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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</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/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/noise" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>noise</span></a> <a href="https://mastodon.social/tags/extrusion" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>extrusion</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/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>textEffect</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>Offset &amp; XOR frame - another one of my faves 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/RwoBREa" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Rwo</span><span class="invisible">BREa</span></a></p><p>Made a few years back for my Taming Blend Modes article <a href="https://css-tricks.com/taming-blend-modes-difference-and-exclusion/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/taming-blend-mo</span><span class="invisible">des-difference-and-exclusion/</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/blend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blend</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</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/xor" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>xor</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/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>6⃣ 688 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 1 div card patterns (no SVG, no images other than CSS gradients) <a href="https://codepen.io/thebabydino/pen/NWxBzRv" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/NWx</span><span class="invisible">BzRv</span></a></p><p>A variation on the pure CSS halftone technique <a href="https://mastodon.social/@anatudor/112401133442879091" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1124</span><span class="invisible">01133442879091</span></a></p><p><a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>halftone</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/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a> <a href="https://mastodon.social/tags/fliter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fliter</span></a> <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/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/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>