A rather geeky/technical weblog, est. 2001, by Bramus
Nice demo on CodePen by Ryan Mulligan, featuring some sections with a sticky parallax background image: See the Pen CSS Sticky Parallax Sections by Ryan Mulligan (@hexagoncircle) on CodePen. I expected to find the the translateZ() + scale() method to create the parallax layers in there, but turns out Ryan took another approach: Scale down …
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 …
Continue reading “Use an Emoji as the Mouse Cursor on a Website”
There was this interesting Twitter conversation last week between Chris Coyier and Schepp last week. Apparently if you have Smooth Scrolling enabled, it also affects the behavior of Find in Page in Chrome: Whenever you want to go to the next result it will smooth scroll, instead of jump to it. Anecdotal thing: when I …
Continue reading “Smooth Scrolling and Find In Page, a not so Smooth Combination …”
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 …
Continue reading “CSS mix-blend-mode not working? Set a background-color!”
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 …
Ahmad Shadeed sweats the details to recreating the little component above, as found in Facebook’s Messenger. In this article, I will show you a component that looks simple from the first glance, but there is a ton of work behind it. As you can derive from the article’s length: the devil is in the details. …
Steren (who happens to be PM for the wonderful Cloud Run): My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack. It’s not LAMP, WordPress, Rails, MEAN, Jamstack… …
Nolan Lawson, author of emoji-picker-element, a web component you can use to provide an emoji-picker: What wasn’t obvious to me, though, was how to allow users to style it. What if they wanted a different background color? What if they wanted the emoji to be bigger? What if they wanted a different font for the …
Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow. See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum (@steve_fulghum) on CodePen. If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial. Simulating …
Continue reading “Simulating Drop Shadows with the CSS Paint API”
“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it’s worth having a look already as they’re really exciting.