Duc

Duc

@byderek.com

frontend fanatic

19 followers 32 following19 posts

Duc reposted

@cbolson.bsky.social

As the 2026 World Cup enters the knockout stage, I challenged myself to build a CSS-only tournament bracket ⚽️ Using attr(), style queries and plenty of :has(), the bracket updates as you pick each winner—all without JavaScript. Check out the demo on @codepen.io : codepen.io/editor/cbols...

codepen.io2026 World Cup Knock-Out Stages #cssonlyThis bracket is 100% CSS, the logic being defined by multiple :has() selectors. Not overly practical but a fun CSS only challenge. Select the team tha

Duc reposted

@cbolson.bsky.social

Descrambling text using rotation and animation-timeline. Pure CSS with no JS. Link to demo in first comment. #codepen #cssonly

Duc reposted

About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!

IntentToShip@intenttoship.dev

Gecko: Intent to ship: CSS Anchor Positioning

groups.google.comGecko: Intent to ship: CSS Anchor PositioningGecko: Intent to ship: CSS Anchor Positioning

Duc reposted

The New York Times

Our Wirecutter testers think this cheesy contraption belongs at every holiday party. Read writer Maki Yazawa's review on the medieval-looking cheese cutter that “provides boundless entertainment for my inquisitive guests." nyti.ms/4ir2S5G

it’s wild what you can put together in Kirby Air Riders.. I enjoy this aspect of the game just as much as the races #kirbyairriders #silksong

Duc reposted

We’ve got a biiiig update for you. A complete redesign of Sketch. Maybe you’ve tried the beta, maybe you’ve seen the teasers. Now you can update and try it all for real. And there’s more! 🧵 ↓

This is tricky, but the more I think about it, maybe it's an expected behavior? @keyframes defined in a component is locally scoped, unless being used as a value in a local css variable – then I need to declare the @keyframes globally to make it work

svelte.devkeyframes • Playground • SvelteWeb development for the rest of us

I have always used classnames/clsx, but I didn't know that Svelte essentially supports that pattern natively!!

svelte.devclass • Svelte Docsclass • Svelte documentation

The web platform has changed so much, but whenever I reached to a React UI library it felt like they were built 10 years ago. None of the major React frameworks seem to even use <dialog>, a thing that has full browser support 3 years ago

Is there a site builder that runs locally aka works offline, allow building both with code and via GUI, has a simple built-in database, and output pure static html (framework opt in)?

I guess some sort of a local static site generator with a nice UI on top

I'm quite proud of this gradient, thought it turned out really well. The noise filter will definitely mess with video compression, so better see it live: codepen.io/d4rek/full/d...

Do you know which song this pen is referring to? 100% scroll-driven CSS animation (and CSS color names) @codepen.io #CSSonly #scrollanimation codepen.io/d4rek/full/d...

codepen.iosnow...

I looked at this pen again & it no longer showed the same effect. It was my laptop battery level – when plugged in, the animation was much smoother! That's pretty obvious, but I haven't worked on an animation where that's clearly observable. In the vid below you can tell the moment I unplugged

Doubling the animation speed seems to make the pen works again in both conditions. I wonder if animating via RAF would had fixed this issue – I suspect not – but it's a good thing the browser throttle animations, I think codepen.io/d4rek/full/v...

codepen.ioRock it out (CSS-only phenakistiscope)Thought I'd do something a bit different than the usual scroll animation for this challenge. It's still CSS animation, but only rotational! I wanted t...

Stoke to finally get my hand on the third First Cat in Space book, love reading it and the others with my little one

This is so cool. Modern CSS is almost unrecognizable from when I learned it

CSS by T. Afif@css-only.dev

Another experimentation with modern #CSS. On hover the infinite rotation will stop and the element will smoothly return to its initial position. The animation will resume on mouse leave. Code & Demo: css-tip.com/stop-animati... #CSS #codepenchallenge

🎵🎵 Dance party 🎵🎵 #codepenchallenge codepen.io/d4rek/full/v...

codepen.ioRock it out (CSS-only phenakistiscope)Thought I'd do something a bit different than the usual scroll animation for this challenge. It's still CSS animation, but only rotational! I wanted t...

I meant to replicate the swipe effect in Reddit's menu, but ended up with this edgy scroll animation of the lyrics to The Void by Magnolia Park instead 🤷‍♂️ #codepen codepen.io/d4rek/full/E...

codepen.ioThe voidI meant to replicate the swipe effect in Reddit's menu, but ended up with this edgy "infinite" scroll animation of the lyrics to The Void by Magnolia P...

Duc reposted

Jhey ʕ·ᴥ·　ʔ

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap extra bonus: use a scroll animation to toggle scroll-snap at either end of the scroller

Duc reposted

Threlte 8 is Here! 🤗 Six months in the making, Threlte 8 redefines performance, flexibility, and developer experience for 3D web graphics using Svelte. It’s our biggest leap yet, powered by Svelte 5, exciting updates from Three.js, and tons of community input. 1/9

I finally got around to submit a #codepenchallenge #cpc-jump-flip! Here's a basic "game" made with Web Animations API: codepen.io/d4rek/full/Q...

You are up to date.