Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://mastodon.social/users/anatudor/statuses/113288582565638105">Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Friday, 11-Oct-2024 23:01:42 JST</a><a href="https://mastodon.social/@anatudor" title="anatudor@mastodon.social"><img src="https://gnusocial.jp/avatar/34507-48-20221121103813.webp" width="48" height="48" alt="Ana Tudor 🐯" style="position: absolute; left: 0; top: 0;">Ana Tudor 🐯</a><div><a href="https://mastodon.social/@anatudor/113288098559261944" rel="in-reply-to">in reply to</a><ul><li></ul></div></section><article><p>The second is a quick little thing I live-coded in Professor Mode on <a href="https://fosstodon.org/@codepen">@codepen</a> in under 15 minutes a little while back.</p><p>Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.</p><p>A little <a href="https://mastodon.social/tags/SVG" rel="tag">#SVG</a> <a href="https://mastodon.social/tags/filter" rel="tag">#filter</a> magic 🪄 slices and offsets it <a href="https://codepen.io/thebabydino/pen/RwmPZVR" rel="nofollow noreferrer">https://codepen.io/thebabydino/pen/RwmPZVR</a></p><p><a href="https://mastodon.social/tags/CSS" rel="tag">#CSS</a> <a href="https://mastodon.social/tags/cssGradient" rel="tag">#cssGradient</a> <a href="https://mastodon.social/tags/svgFilter" rel="tag">#svgFilter</a> <a href="https://mastodon.social/tags/code" rel="tag">#code</a> <a href="https://mastodon.social/tags/coding" rel="tag">#coding</a> <a href="https://mastodon.social/tags/frontend" rel="tag">#frontend</a> <a href="https://mastodon.social/tags/web" rel="tag">#web</a> <a href="https://mastodon.social/tags/dev" rel="tag">#dev</a> <a href="https://mastodon.social/tags/webDev" rel="tag">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" rel="tag">#webDevelopment</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/3811012#notice-7455031">In conversation</a><time datetime="2024-10-11T23:01:42+09:00" title="Friday, 11-Oct-2024 23:01:42 JST">about 5 months ago</time> <span>from <span><a href="https://mastodon.social/@anatudor/113288582565638105" rel="external" title="Sent from mastodon.social via ActivityPub">mastodon.social</a></span></span><a href="https://mastodon.social/@anatudor/113288582565638105">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/3293257">The text "disconnect" in all caps, each line sliced in the middle and top and bottom half of each line offset alternatingly left or right. DevTools open on the right to show there's no text duplication, not in the markup and not in any pseudo-content.</a></label><br><a href="https://files.mastodon.social/media_attachments/files/113/288/574/711/506/443/original/9011e5f8b298173f.png" rel="external">https://files.mastodon.social/media_attachments/files/113/288/574/711/506/443/original/9011e5f8b298173f.png</a></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/3293258">Untitled attachment</a></label><br></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Friday, 11-Oct-2024 23:01:42 JSTAna Tudor 🐯
in reply to
- CodePen
The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.
Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.
A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR
#CSS #cssGradient #svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment
In conversationabout 5 months ago from mastodon.socialpermalink
Attachments
1. The text "disconnect" in all caps, each line sliced in the middle and top and bottom half of each line offset alternatingly left or right. DevTools open on the right to show there's no text duplication, not in the markup and not in any pseudo-content.
  https://files.mastodon.social/media_attachments/files/113/288/574/711/506/443/original/9011e5f8b298173f.png
2. Untitled attachment

Public

Embed Notice

HTML Code

Corresponding Notice