CodePen Blog

This is where we post announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. There's an RSS feed.
πŸ“ Blog Post

Chris’ Corner: Performance is Good for Brains

I was darn impressed by Scott Jehl’s personal charge to bring back an idea known as “responsive video”. If you’ve seen the <picture> element, and how you can provide multiple <source>s with different @media queries allowing for only the best match to be shown, you already get it. It turns out that browsers, at one […]

Read More of the article "Chris’ Corner: Performance is Good for Brains"
Chris Coyier
Co-Founder
πŸ“ Blog Post

Chris’ Corner: Some AdviCSS

Get it?! Like “advice”, but for CSS. When should you nest CSS? Scott Vandehey says: There’s a simple answer and a slightly more complicated answer. The simple answer is β€œavoid nesting.” The more practical, but also more complex answer is β€œnest pseudo-selectors, parent modifiers, media queries, and selectors that don’t work without nesting.” The big […]

Read More of the article "Chris’ Corner: Some AdviCSS"
Chris Coyier
Co-Founder
πŸ“ Blog Post

Chris’ Corner: Scroll Driven Delight

I’m pretty hot on Scroll-Driven Animations! What a wonderful idea that we can tie @keyframe animations timelines to scroll positions. And I’m sure the creators of it thought long and hard, because the API makes a ton of things possible. It’s not just “how far the entire page has scrolled”, although that’s possible. The progress […]

Read More of the article "Chris’ Corner: Scroll Driven Delight"
Chris Coyier
Co-Founder
πŸ“ Blog Post

Chris’ Corner: More Like Scalable Vector Goodness

I’m going to do an SVG issue here, because I find that technology persistently interesting. It’s a bit of a superpower for front-end developers who know how it works and can leverage it when needed to pull of interesting effects. For example, this compelling line drawing scroll effect is powered by SVG features. There have […]

Read More of the article "Chris’ Corner: More Like Scalable Vector Goodness"
Chris Coyier
Co-Founder
πŸ“ Blog Post

Chris’ Corner: People Be Doing Web Components

Native Web Components are still enjoying something of a moment lately. Lots of chatter, and a good amount of it positive. Other sentiment may be critical, but hopeful. Even more important, we’re seeing people actually use Web Components more and more. Like make them and share them proudly. Here are some recently: Interesting point here: […]

Read More of the article "Chris’ Corner: People Be Doing Web Components"
Chris Coyier
Co-Founder