Animating a CSS Gradient Border

Recently, Stephanie Eckles sent out a call to revive the use of CSS border-image. Not to use it with images — which requires a pretty nasty syntax — but to create Gradient Borders in CSS. 🎉 Time to revive an old CSS property! When `border-image` was announced, I was off-put b/c the syntax was so …

Cancel JavaScript Event Listeners with AbortController

One of the new features that was added in Chrome 88 is the ability to pass an AbortController‘s signal into addEventListener. const controller = new AbortController(); const { signal } = controller; document.querySelector(‘…’).addEventListener(‘foo’, (e) => { // … }, {signal}); By calling controller.abort();, you can remove the listener from the event target, just like when …

CSS Properties Memory Test

Remember that HTML Tags Memory Test from before? Šime Vidas recently joked that a similar Memory Test but for CSS Properties should exist. Of course I couldn’t resist, so here is the CSS Properties Memory Test 🤪 See the Pen CSS Properties Memory Test by Bramus (@bramus) on CodePen. In total there are 653 properties …

Using Emoji as the Mouse Cursor on a Webpage

Recently I saw this tweet by Marco Denic fly by: CSS tip: Did you know that you can use your own image, or even emoji as a cursor? pic.twitter.com/P25wSJ0ui6 — Marko ⚡ Denic (@denicmarko) January 6, 2021 To use an emoji as the cursor you can’t simply type in the emoji though. /* ❌ This …

CSS mix-blend-mode not working? Set a background-color!

💡 If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements. html, body { background-color: #fff; } ~ Demos + Explanation Without a …

Nested Media Queries

I can’t seem to find any mention of this in the Media Queries Module specification, but apparently it’s allowed to nest media queries, as shared by Šime Vidas: Apparently, nested media queries are a thing https://t.co/2L2pEWy2JW — Šime Vidas (@simevidas) January 10, 2021 That’s … awesome! 🤯 Fiddling with it a bit more, turns out this …