Delivered straight to your email each week.
Add the feed to your favorite RSS reader and never miss a thing.
Sponsor a week and reach a large audience of designers and developers.
This week:cqi Units in Action, Search Text Highlights, and Custom Select Menus
Cards with concave rounding on irregular grid
"Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. No images save for the .jpg card backgrounds. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements to see. This requires no JS - it's all in the magic of CSS subgrid!" From Ana Tudor.
Sponsored:Ship In-App Communication, Faster
One platform. Fewer integrations. Faster launches. Trusted by 2,000+ global apps like Strava and Patreon to power their in-app communication for over one billion end users.
Deep Dive
"Allow yourself to be immersed in a wonderful sensory experience, I thought. Then I made this shader." But for real though, take a little time to bask in the golden glow of this gorgeous WebGL shader by Matthias Hurrle.
Stack of folders with custom select
The select element is customizable now, and Patrick Brosset shows us how fun that can be with this stack of folders that swings out when you click it.
Fun shadow coding challenge
Andy Bell has a challenge for you: recreate this shadow effect with a central light source using modern CSS. You can check out his Pen from 8 years ago to shed light on the challenge, and also to reflect on how far the front-end has come in 8 years!
CSS @container Demo: cqi Units in Action
Mert Cukuren flexes the power of the
cqi unit in this super-responsive "card component that adapts to its parent container's width, not the viewport. Drag the bottom-right corner to see layout changes and fluid typography using CSS clamp() and cqi units".
#CodePenChallenge: Game Over
Game over for the January challenge! Check out our collection of gaming-inspired creations from week 4, including Pens by josetxu, Ghislain-Gillet, grauconejo13, and DenDionigi. Want to play again? The February challenge is on now!
Styling ::search-text and Other Highlight-y Pseudo-Elements
::search-text just arrived in Chrome 144! In this tutorial for CSS-Tricks, Daniel Schwarz shows us how to use it along with relative color syntax to create contrasting highlights on searched text.
3D Album Covers
Browse through Nils Keller's genre jumping, multi-decade spanning collection of albums and you're sure to find something you love. Click any cover to tilt it back to its original layout.
Binary Clock
prisoner849 shares a slick timepiece in this Three.js scene. If you can't tell binary time, you can still enjoy the view — grab the clock to spin it around and check out the molded plastic sheen from every angle.
