D7460N

css scrollbar-color lets you style the thumb and track of a scrollbar 🧑‍🍳 scrollbar-color: var(--thumb, canvasText) var(--track, #0000); lose the vanilla track you can even get dynamic with it 👇

Scroll masking with CSS scroll animation as a progressive enhancement ⭐️ .scroller { animation: mask-up; animation-timeline: scroll(self); animation-range: 0 1rem; mask-composite: exclude; } @​keyframes mask-up { to { mask-size: 100% 120px, 100% 100%; } }

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

CSS Tip! 🔮 Wanna make that ring text effect? 💅 You can do it with trig functions 🤓 .ring { --a: calc(360 / var(--chars)); --r: calc(1 / sin(var(--a))) * -1ch; } .char { transform: rotate(calc(var(--a) * var(--idx))) translateY(var(--r)); } @CodePen link below! 👇

Always satisfying with more elements! Looks like the beginning of a physics course 🤓

The text-overflow: ellipsis in CSS only works on a single line. For multiline text ellipsis, use this instead: p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-width: 300px; } -webkit-line-clamp sets how many lines before the ellipsis happens. This works on all modern browsers. Have you been using JavaScript for this? 👀

Prepare your site for AI agent interaction with Lighthouse → goo.gle/3ReK3JD If you want AI agents to actually navigate your site properly, the new experimental audit in Lighthouse lets you see: ☀️ Discoverability for AI agents ⚡ WebMCP integration 👀 AI accessibility #GoogleIO

i recreated Flash in the browser just to feel alive again.

Autistic people get accused of catastrophizing, but a lot of the time we’re not imagining worst case scenarios out of nowhere. We notice patterns early, connect the dots fast, and end up predicting things people would rather ignore until they become impossible to hide.

AI coding agents can write code, but they can't see if it actually works. Chrome DevTools for agents 1.0 fixes this. The stable release brings powerful browser debugging, emulation, and automated audits to your AI assistants via our Chrome DevTools MCP server. 👁️ Give your agent eyes on the runtime → goo.gle/42K7Rrl #GoogleIO

The Web Serial API landed in Firefox 151, allowing you to connect directly to microcontrollers, dev boards, 3D printers, power meters, and other serial-connected hardware from the web. Here's how it works:

What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by all the cool new stuff. 🤩

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shame

Implementing `polygon(round)` was a challenging yet incredibly rewarding process. We received tremendous support from the Blink CSS, Paint, Opera and Skia teams. It’s finally set to debut in Chrome 150! groups.google.com/a/chromium.org…

Card hover with 3D shape sculpting, Three.js. Built with Cursor, Composer 2.5.

Pretty much all flexbox woes have gone away by adding this to the global css of every new project. *, ::after, ::before, { min-width: 0; min-height: 0; } If you add this to an existing project, check for ui regressions (most likely will be some!).

the top right corner of vscode is starting to resemble an iq test

love that ai empowers people to build their ideas, etc. but please please at least do some due diligence on perf, a11y, etc. before slapping things in an npm package and posting a video for likes