💡 CSS Tip! Save this code for the future. It's another way to create that famous breakout effect. A strange code, right? Learn how it works 👇 css-tip.com/breakout-bac... Until better support for border-shape, you will find another way using border-image.

📝 New CSS Article! You know the <img> element, right? It's one of the most-used elements, and yet it hides a secret. 🤫 What kind of secret? Read my latest article to know about it (You will be surprised!) master.dev/blog/somethi...

Something Nobody Told You About The Image Element (It Can Overflow!)

You normally don't think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually...

master.dev

📝 New CSS Article! You know the <img> element, right? It's one of the most-used elements, and yet it hides a secret. 🤫 What kind of secret? Read my latest article to know about it (You will be surprised!) master.dev/blog/somethi...

Something Nobody Told You About The Image Element (It Can Overflow!)

You normally don't think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually...

master.dev

The LH unit in CSS is cool! In my new article, I wrote about it and shared my favorite demos. ishadeed.com/article/lh-u...

Turns out you can fit an entire snake game into a single <div> with CSS border-shape mkrl.xyz/border-snake/

💡 CSS Tip! After corner-shape, shape(), and border-shape, another feature is available to play with: rounding polygons. css-tip.com/rounded-shap... You create a polygon, add a radius value at the beginning, and you have a shape with rounded corners!

CodePen 2.0 Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen. This isn't the... https://chriscoyier.net/2026/07/30/codepen-2-0/

CodePen 2.0

Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen. This isn't the place to describe every detail of what we did and why we did it. If you're interested, perhaps our Why 2.0? podcast or the What's...

chriscoyier.net

A friendly reminder that I have a course on CSS layouts! Check it out and use "JUL26" to apply a $20 discount (Valid until July 31). thelayoutmaestro.com

The Layout Maestro by Ahmad Shadeed

Build any web layout with confidence. Learn practical CSS layout through visual lessons, interactive demos, and a proven layout mindset.

thelayoutmaestro.com

💡 CSS Tip! After corner-shape, shape(), and border-shape, another feature is available to play with: rounding polygons. css-tip.com/rounded-shap... You create a polygon, add a radius value at the beginning, and you have a shape with rounded corners!

🚀 🚀 It's launch day! 🚀 🚀 CodePen 2.0 is officially released! To celebrate, there's: 1. A brand new homepage codepen.io/2 2. An in-depth blog post blog.codepen.io/2026/07/23/t... 3. A Podcast blog.codepen.io/2026/07/23/4... 4. A brand new @keyframe.rs live stream youtube.com/live/sgwPEW1...

CodePen – Online Code Editor For Building & Deploying Websites

Build, share & learn with CodePen 2.0, the best community for developers with an all new online code editor featuring a file system, compiler, realtime & async collaboration, deployment, and more.

codepen.io

💡 CSS Tip! Creating ASCII art is cool, but making it responsive is better! 🤩 css-tip.com/ascii-art/ Now it's possible using the new text-fit property. A simple code and you are done.

Going live soon! Be there or be... the same shape you normally are, but just like... not as cool? Anyway... youtube.com/live/sgwPEW1...

CodePen 2.0 + @keyframers = The Biggest Launch In History???

YouTube video by keyframers

youtube.com

@keyframers@keyframe.rs · 2w ago

Tomorrow. 2pm EST. @davidkpiano.bsky.social & @shaw.city back together. youtube.com/live/sgwPEW1...

(sniffs the air) Is that a new homepage? codepen.io

💡 CSS Tip! Creating ASCII art is cool, but making it responsive is better! 🤩 css-tip.com/ascii-art/ Now it's possible using the new text-fit property. A simple code and you are done.

An now, for my next trick, we will answer the CSS questions everyone had for years: how to center horizontally. Like, really, 100 different ways. Some are quite hacky, but, still, fun to explore just to test the limits of CSS, hehe Tool made by @css-only.dev css-generators.com/center/

How to center an element horizontally and vertically

100 different ways to center a single element horizontally and vertically inside a container.

css-generators.com

📝 New CSS Article! The sibling-index() function lets you get the index of an element among its siblings, but it has a hidden superpower! Read my latest article to know about it 👇 master.dev/blog/in-n-ou...

In-N-Out Animation using sibling-index()

Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!

master.dev

📝 New CSS Article! The sibling-index() function lets you get the index of an element among its siblings, but it has a hidden superpower! Read my latest article to know about it 👇 master.dev/blog/in-n-ou...

In-N-Out Animation using sibling-index()

Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!

master.dev

And the new Web Weekly is about to hit all the inboxes. 🫣 This time it includes lots of anchor positioning, customizable selects, and ECMAScript 2026 updates. Enjoy! webweekly.email/archive/web-...

Great article 👏 border-shape might be my favorite CSS feature since Grid.

CSS by T. Afif@css-only.dev · 4w ago

📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. css-tricks.com/get-ready-fo... This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!)

📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. css-tricks.com/get-ready-fo... This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!)

Get Ready For the Powerful CSS border-shape Property!

We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!

css-tricks.com

📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. css-tricks.com/get-ready-fo... This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!)

Get Ready For the Powerful CSS border-shape Property!

We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!

css-tricks.com

Get Ready For the Powerful CSS border-shape Property! We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the... https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/

Get Ready For the Powerful CSS border-shape Property!

We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!

css-tricks.com

Modern CSS is so cool. The only properties here that existed 20 years ago are width and border. Going back in time and showing this to a front-end developer in 2006 would be the equivalent of a medieval peasant tasting Doritos.

CSS by T. Afif@css-only.dev · 4w ago

Here is my idea of the animated Grid layout No View Transitions, No JS, and no Anchor Positioning. You get an animation on resize and when adding/removing new items. css-tip.com/animated-grid/

Here is my idea of the animated Grid layout No View Transitions, No JS, and no Anchor Positioning. You get an animation on resize and when adding/removing new items. css-tip.com/animated-grid/

Bramus@bram.us · 2mo ago

New demo: Animated CSS Grid Layout. codepen.io/bramus/pen/o... Here’s the thing: No View Transitions. No JS at all. Instead, it uses Anchor Positioning to anchor the cell contents to the cell. Then, CSS transitions are used to animate the contents to their new location as the grid re-layouts.

@css-tricks.com turns 19 today. Nine-freakin’-teen! I also went freelance/independent today, but 14 years ago. What a ride.

And guess what? You can combine border-area with text, and you get the gradient on both the border and the text! 👀 css-tip.com/background-c... Yes, two values for background-clip.

CSS by T. Afif@css-only.dev · last mo.

They just released @developer.chrome.com V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradi... Two lines of code and you are done! 🤩

Poetic CSS course is live for early-bird registration! Only available during July. Thanks for your patience, we had some last-minute fixes. #css courses.oddbird.net/poetic-css/

Poetic CSS

Understand CSS as a system — so you can write, review, and maintain web styles with confidence on a timeline and under budget.

courses.oddbird.net

I proposed this feature in 2023. Safari implemented in 2024. Chrome just shipped it too. This means that it's now a matter of time before it’s available for >88% of web users. Timeline: lea.verou.me/specs/#conti... “But standards are so slow!”

CSS by T. Afif@css-only.dev · last mo.

They just released @developer.chrome.com V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradi... Two lines of code and you are done! 🤩

And guess what? You can combine border-area with text, and you get the gradient on both the border and the text! 👀 css-tip.com/background-c... Yes, two values for background-clip.

CSS by T. Afif@css-only.dev · last mo.

They just released @developer.chrome.com V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradi... Two lines of code and you are done! 🤩

They just released @developer.chrome.com V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradi... Two lines of code and you are done! 🤩