Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
corteximplant.com is one of the many independent Mastodon servers you can use to participate in the fediverse.
CORTEX IMPLANT - an international cyberpunk'ish LGBTQIA+ friendly Fediverse instance for edgerunners, netrunners and cyberpunks and all who want to become one.

Administered by:

Server stats:

237
active users

corteximplant.com: AboutStatusPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-alpha.4+glitch.cortex

#code

40 posts25 participants5 posts today
doboprobodyne<p><span class="h-card" translate="no"><a href="https://circumstances.run/@davidgerard" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>davidgerard</span></a></span> </p><p>"There's still no substitute for knowing what you're doing". 🤣 ❤️ </p><p>A tremendous video! Thank you for making it.</p><p><a href="https://mathstodon.xyz/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AI</span></a> <a href="https://mathstodon.xyz/tags/LLM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>LLM</span></a> <a href="https://mathstodon.xyz/tags/vibeCoding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vibeCoding</span></a> <a href="https://mathstodon.xyz/tags/MBA" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>MBA</span></a> <a href="https://mathstodon.xyz/tags/Business" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Business</span></a> <a href="https://mathstodon.xyz/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://mathstodon.xyz/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Code</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>
Metin Seven 🎨<p>Pleasant retro demo-scene vibes… 💚</p><p><a href="https://collidingscopes.github.io/liquid-shape-distortions/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">collidingscopes.github.io/liqu</span><span class="invisible">id-shape-distortions/</span></a></p><p>💡 You can unfold a menu with controls at the top right.</p><p><a href="https://graphics.social/tags/effects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>effects</span></a> <a href="https://graphics.social/tags/FX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FX</span></a> <a href="https://graphics.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://graphics.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://graphics.social/tags/math" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>math</span></a> <a href="https://graphics.social/tags/science" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>science</span></a> <a href="https://graphics.social/tags/graphics" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>graphics</span></a> <a href="https://graphics.social/tags/CGI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CGI</span></a> <a href="https://graphics.social/tags/retro" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>retro</span></a> <a href="https://graphics.social/tags/RetroComputing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RetroComputing</span></a> <a href="https://graphics.social/tags/RetroTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RetroTech</span></a> <a href="https://graphics.social/tags/demoscene" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>demoscene</span></a> <a href="https://graphics.social/tags/commodore" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>commodore</span></a> <a href="https://graphics.social/tags/amiga" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>amiga</span></a> <a href="https://graphics.social/tags/realtime" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>realtime</span></a> <a href="https://graphics.social/tags/shader" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>shader</span></a> <a href="https://graphics.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://graphics.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a></p>
Ana Tudor 🐯<p>Ever wanted to get the number of auto-fit columns in CSS?</p><p>```<br>--u: 5em;<br>grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))<br>```</p><p>It's now possible! Using registered <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> vars, the tan division hack and container query units! Here's a little test 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/JojpBJr" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Joj</span><span class="invisible">pBJr</span></a></p><p><a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</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/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/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
.:\dGh/:.<p>You want a crazy idea? Add an "__outScope" built-in method for classes.</p><p>It will run when the scope of the variable that holds the class instance ends.</p><p>Imagine the possibilities.</p><p><a href="https://mastodon.social/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PHP</span></a> <a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programming</span></a> <a href="https://mastodon.social/tags/Software" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Software</span></a> <a href="https://mastodon.social/tags/SoftwareDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SoftwareDevelopment</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> <a href="https://mastodon.social/tags/ApplicationDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ApplicationDevelopment</span></a> <a href="https://mastodon.social/tags/AppDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AppDevelopment</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/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Code</span></a></p>
st1nger :unverified: 🏴‍☠️ :linux: :freebsd:<p><a href="https://infosec.exchange/tags/Xbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Xbox</span></a> 360 modders have discovered a new way to get homebrew apps and games running on the console. A new software-only exploit known as <a href="https://infosec.exchange/tags/BadUpdate" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BadUpdate</span></a> allows you to use a <a href="https://infosec.exchange/tags/USB" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>USB</span></a> key to hack past <a href="https://infosec.exchange/tags/Microsoft" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Microsoft</span></a> <a href="https://infosec.exchange/tags/Hypervisor" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Hypervisor</span></a> protections and run unsigned <a href="https://infosec.exchange/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> and <a href="https://infosec.exchange/tags/games" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>games</span></a> <a href="https://github.com/grimdoomer/Xbox360BadUpdate" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/grimdoomer/Xbox360B</span><span class="invisible">adUpdate</span></a></p>
Ana Tudor 🐯<p>Because I saw a <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 creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...</p><p>Here's a super simple modern <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> grid + clip-path + mathematical functions responsive version with no breakpoints <a href="https://codepen.io/thebabydino/pen/QwWQqeR" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QwW</span><span class="invisible">QqeR</span></a></p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/hexagon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hexagon</span></a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMaths</span></a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>containerQueryUnits</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/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <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>
Axel Rauschmayer<p><span class="h-card" translate="no"><a href="https://mamot.fr/@pygy" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>pygy</span></a></span> I’d like to hide implementation details, so I’d do: <a href="https://www.typescriptlang.org/play/?#code/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqCXlCzhkAXmQAGBmgxYZYQiXLIsYZSLIUKVOiZs2lKvGADUbgNymKnADSm3NxAA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqCXlCzhkAXmQAGBmgxYZYQiXLIsYZSLIUKVOiZs2lKvGADUbgNymKnADSm3NxAA</span></a></p><p>(Looking at the code right now, I realize that I should change the interface because with only .inc():void there is no way to retrieve the current counter. But that doesn’t change the basic challenge.)</p>
Harald<p><span class="h-card" translate="no"><a href="https://fosstodon.org/@rauschma" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>rauschma</span></a></span> Use a proper class instead of fumbling objects and be done. 😃 </p><p>Whether you then still want to have the factory method instead of just calling the constructor is up to you.</p><p><a href="https://www.typescriptlang.org/play/?#code/LAKALgngDgpgBASQHYGMBOMC2MlgPZpwC8cA3qHHAJaoAUAlAFxwBueVAJgDSgC+A3KBQAbAIYBncXADKYAK4AzBWQqU4KPEnFg0clPjS0ocgEbCqKdXjm4YhEgAZ6ZXqso0UDZm04qQagLgwAAsqcQA6DRswOzgAahIARkF-NVcQdNAFG30qTTgoYTlxAGZaKmZkdCwcAyZWdg4-AKpwjwYUlra6ek61VvbeviFNbWpiOCQYAHcZeSVaEqGQQuKyqmWNLTxhGHDhPABzWgAiKgmT+OpI61s0ZaA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/LAKALgngDgpgBASQHYGMBOMC2MlgPZpwC8cA3qHHAJaoAUAlAFxwBueVAJgDSgC+A3KBQAbAIYBncXADKYAK4AzBWQqU4KPEnFg0clPjS0ocgEbCqKdXjm4YhEgAZ6ZXqso0UDZm04qQagLgwAAsqcQA6DRswOzgAahIARkF-NVcQdNAFG30qTTgoYTlxAGZaKmZkdCwcAyZWdg4-AKpwjwYUlra6ek61VvbeviFNbWpiOCQYAHcZeSVaEqGQQuKyqmWNLTxhGHDhPABzWgAiKgmT+OpI61s0ZaA</span></a></p>
Axel Rauschmayer<p><span class="h-card" translate="no"><a href="https://toot.cafe/@dotproto" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>dotproto</span></a></span> Alternative: only `as any` at the end of the `return`.</p><p>But there is one significant downside: `this` now has the type `any` (line A): <a href="https://www.typescriptlang.org/play/?#code/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vQJDw4NCABXwAB2gwAE8AEXwIRQA5fDAAUQAPULBYuOQAekbkagBBWkTOLwpOZDhFfpBchM4gA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vQJDw4NCABXwAB2gwAE8AEXwIRQA5fDAAUQAPULBYuOQAekbkagBBWkTOLwpOZDhFfpBchM4gA</span></a></p>
Axel Rauschmayer<p><span class="h-card" translate="no"><a href="https://mastodon.social/@hcschuetz" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>hcschuetz</span></a></span> Have you removed the (a)ts-expect-error?</p><p><a href="https://www.typescriptlang.org/play/?#code/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vZE4vCk5kOEV9aTxjKATOIA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vZE4vCk5kOEV9aTxjKATOIA</span></a></p>
Ana Tudor 🐯<p>Because this quick <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> thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner </p><p><a href="https://codepen.io/thebabydino/pen/LEYObpy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEY</span><span class="invisible">Obpy</span></a></p><p>Some grid + shape-outside + container query units <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> magic + <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> magic.</p><p>¯\_(ツ)_/¯ </p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>containerQueryUnits</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>Safari supports the `filter()` function, which allows us to apply a filter to just the `border-image-source`. It's not ideal, as we still need to have the image link twice, once in the `src` attribute and once in a custom property set on the same `img`. Oh, well... at least it doesn't require any extra elements, just the `img` suffices.</p><p><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, but remember, it only works in Safari <a href="https://codepen.io/thebabydino/pen/XWxdyro" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XWx</span><span class="invisible">dyro</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/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Made this a couple of years ago 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> but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown <a href="https://codepen.io/thebabydino/pen/qBJENKM" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBJ</span><span class="invisible">ENKM</span></a></p><p>Based on a thing at a now dead link which did something of the kind with a huge div soup.</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/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>js</span></a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a> <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Someone hearted this button ripple effect 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> (coded about half a decade ago) and made me notice it still said "only works in Chromium" - as of last summer, it's cross-browser! 🥳🎉</p><p><a href="https://codepen.io/thebabydino/pen/LYZpEVy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LYZ</span><span class="invisible">pEVy</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/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/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/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/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>A super simple little <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/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> example 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/QwWNwOz" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QwW</span><span class="invisible">NwOz</span></a></p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</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/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> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> wish: for browsers to implement the `src()` (<a href="https://drafts.csswg.org/css-values/#funcdef-src" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">drafts.csswg.org/css-values/#f</span><span class="invisible">uncdef-src</span></a>) and `filter()` (<a href="https://github.com/web-platform-tests/interop/issues/717" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/web-platform-tests/</span><span class="invisible">interop/issues/717</span></a>) functions.</p><p>Combined with the improved `attr()`, this would allow us to give images borders that are gradient versions of themselves using a `border-image` CSS declaration.</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/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/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>Know how border-image &amp; border-radius don't play nice together?</p><p>(interactive <a href="https://codepen.io/thebabydino/pen/jxZyed" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/jxZ</span><span class="invisible">yed</span></a>)</p><p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></a> there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!</p><p>clip-path: inset(0 round $r)</p><p><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: <a href="https://codepen.io/thebabydino/pen/qBELJGY?editors=1100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBE</span><span class="invisible">LJGY?editors=1100</span></a></p><p>(and yes, this is a tip I first shared on twitter over half a decade ago <a href="https://x.com/anatudor/status/1219916121341644807" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">x.com/anatudor/status/12199161</span><span class="invisible">21341644807</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/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</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> <a href="https://mastodon.social/tags/borderImage" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>borderImage</span></a> <a href="https://mastodon.social/tags/borderRadius" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>borderRadius</span></a></p>
Ana Tudor 🐯<p>Please don't do this for a marquee effect 😭 </p><p>So many problems with it. 2 animations are completely unnecessary. You should animate translation, not left.</p><p>+it's possible without duplication, especially in non-clickable icons case like here, where the idea was to emulate the Jamstack infinitely sliding longos - see 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 <a href="https://codepen.io/thebabydino/pen/bGPzdaM" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/bGP</span><span class="invisible">zdaM</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/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/marquee" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>marquee</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/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</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>
Metin Seven 🎨<p>"𝘛𝘩𝘦 𝘨𝘰𝘰𝘥 𝘵𝘪𝘮𝘦𝘴 𝘪𝘯 𝘵𝘦𝘤𝘩 𝘢𝘳𝘦 𝘰𝘷𝘦𝘳"</p><p><a href="https://www.seangoedecke.com/good-times-are-over" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">seangoedecke.com/good-times-ar</span><span class="invisible">e-over</span></a></p><p><a href="https://graphics.social/tags/tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tech</span></a> <a href="https://graphics.social/tags/technology" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>technology</span></a> <a href="https://graphics.social/tags/BigTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BigTech</span></a> <a href="https://graphics.social/tags/google" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>google</span></a> <a href="https://graphics.social/tags/apple" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>apple</span></a> <a href="https://graphics.social/tags/microsoft" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>microsoft</span></a> <a href="https://graphics.social/tags/amazon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>amazon</span></a> <a href="https://graphics.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://graphics.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://graphics.social/tags/job" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>job</span></a> <a href="https://graphics.social/tags/jobs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>jobs</span></a> <a href="https://graphics.social/tags/US" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>US</span></a> <a href="https://graphics.social/tags/USA" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>USA</span></a> <a href="https://graphics.social/tags/UnitedStates" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UnitedStates</span></a> <a href="https://graphics.social/tags/america" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>america</span></a> <a href="https://graphics.social/tags/computers" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>computers</span></a></p>
ExploreLive feeds
About