CodePen

Chris’ Corner: Anchors

Chris Coyier |
As of January, with Firefox 147’s release, Anchor Positioning is supported across all major browsers. I’m happy about that, of course. I think Anchor Positioning is really powerful and a layout mechanism we probably should have had a long time ago. My enthusiasm was tempered when I found out how fin... read more

419: Why 2.0?

Chris Coyier |
CodePen 2.0 was the most ambitious project that we’ve ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We’ve been around a long time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we ... read more

Chris’ Corner: Cool Things

Chris Coyier |
Dave has this classic idea for a Web Components Sommelier. Like many of Dave’s ideas, it’s equal parts joke and brilliance. The idea is a person with deep knowledge of an absolute ton of different Web Components who can suggest ones that do just the right thing in any situation. Like a wine sommelie... read more

Chris’ Corner: SVG Tools

Chris Coyier |
You can kinda smell a vibe-coded app these days. TypingSVG has that odor, but like… in a good way? An app like this absolutely should exist. Someone needed it, and how instead of it just being some little tool they’ve tucked away for themselves or thrown away, they tossed it up on some inexpensive h... read more

418: CodeMirror 6

Chris Coyier |
Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new them... read more

Chris’ Corner: All Together Now

Chris Coyier |
Individual fresh CSS features can be amazing, but I always say it’s the most impressive when they go together. Adam Argyle knocked one out of the park with his modestly named Nice Select post & demo. His own post lists all the CSS features that went into it, but I’ll do a quick overview. And […]... read more

Chris’ Corner: Light & Boxes

Chris Coyier |
Andy Bell with pitch perfect bait for me: Fun shadow coding challenge. Just a simple line across a page, but imagine that line is a light source. Squares below the light source have a box-shadow. How can we make it so as the squares scroll by, that box-shadow adjusts itself to honor that “light sour... read more

Chris’ Corner: Lovingly Esoteric CSS

Chris Coyier |
Can you reason out the difference between a selector doing :has(:not) vs :not(:has)? Kilian Valkhof wrote up that post I just linked to. I like how he teaches the way to think it out is to write out all the implied selectors at work. For instance: is really: The latter becomes a lot more clear […]... read more

Chris’ Corner: Type

Chris Coyier |
Have you seen Kiel Danger Mutschelknaus’ Space Type Generator? This thing is absolute monster of amazing text-on<canvas> effects. Bought a coffee for this beautiful bit of work for sure. The effect you see when landing on that homepage is extremely cool. Playing around with the sliders and pre... read more

Chris’ Corner: Two Liners

Chris Coyier |
The real reason that fancy modern CSS is exciting is because of what we can now actually do in CSS. I remember one of my favorite dudes Hakim El Hattab made a thing called “Progress Nav” ten years ago. The idea is a Table of Contents component that could tell where you are scrolled in […]... read more