Many people get confused when they try to combine the :is() selector with pseudo-elements, so I wrote something to clarify why it doesn't work the way they want. css-tip.com/is-before-af... It looks counter-intuitive, but it's logical if we understand how the :is() selector actually works.

I updated the :heading article with an additional interactive demo showcasing the differences between :heading() and :is() alvaromontoro.com/tutorial/hea... #css #html #webDev

💫 CSS Loaders! Adding 10 new loaders to the collection css-loaders.com/growing/ That makes the total 700 single-element loaders! 👀🥳

💫 CSS Loaders! Adding 10 new loaders to the collection css-loaders.com/growing/ That makes the total 700 single-element loaders! 👀🥳

The Fundamentals of CSS Alignment: https://css-tip.com/explore/alignment/ (An exploration of the logic behind all alignment properties not just entering! and how they work in each layout.)

The Fundamentals of #CSS Alignment: "This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!" css-tip.com/explore/alig...

If you are wondering which method is the best, then the answer is: "it depends on your code structure," but here are my favorite methods for each layout type. css-tip.com/center/ They are good for centering a single element horizontally & vertically, as well as multiple items (to some extent).

If you are wondering which method is the best, then the answer is: "it depends on your code structure," but here are my favorite methods for each layout type. css-tip.com/center/ They are good for centering a single element horizontally & vertically, as well as multiple items (to some extent).

We have different methods to center an element vertically and horizontally, but how many exactly? I did the count, and we can reach 100 different ways! 👀 css-generators.com/center/ The list includes hacky and obsolete methods, but it was a fun exercise to enumerate all the possibilities!

We have different methods to center an element vertically and horizontally, but how many exactly? I did the count, and we can reach 100 different ways! 👀 css-generators.com/center/ The list includes hacky and obsolete methods, but it was a fun exercise to enumerate all the possibilities!

By correctly understanding all the alignment mechanisms, you can unlock "secret" ways to center an element inside a container. Demo: codepen.io/t_afif/pen/d... via @codepen.io flex-wrap and space-around?! Yes, it's valid and it works! Don't miss my exploration for more alignment tricks 👇

Fantastic article! I never gave "content" vs. "items" much thought but this cleared up a lot of implicit assumptions I was making. (Aside: I wish we had clearer terms instead of "align" and "justify". I think that's partly why this is all so confusing for beginners.)

By correctly understanding all the alignment mechanisms, you can unlock "secret" ways to center an element inside a container. Demo: codepen.io/t_afif/pen/d... via @codepen.io flex-wrap and space-around?! Yes, it's valid and it works! Don't miss my exploration for more alignment tricks 👇

How would you center an absolutely-positioned element? auto margin combined with width/height? top/left combined with translate? With modern CSS, you can use place-self: center! Demo: codepen.io/t_afif/full/... via @codepen.io More alignment tricks below 👇

How would you center an absolutely-positioned element? auto margin combined with width/height? top/left combined with translate? With modern CSS, you can use place-self: center! Demo: codepen.io/t_afif/full/... via @codepen.io More alignment tricks below 👇

Did you ever wonder why justify-items doesn't work with flexbox while align-items works fine? 🫠 What about align-content? It does work, but sometimes not. Why?! Looks like the layout is broken! 😖 One article to read, and you can finally understand all the flexbox mysteries 👇

Only through the grid part of this so far, but this is absolutely *spectacular*. Deep dive, super interactive, really well-explained.

Did you ever wonder why justify-items doesn't work with flexbox while align-items works fine? 🫠 What about align-content? It does work, but sometimes not. Why?! Looks like the layout is broken! 😖 One article to read, and you can finally understand all the flexbox mysteries 👇

Do you know that align-content applies to block elements? Not only that, but you can also use the space-around value to center your content vertically! 👀 Demo: codepen.io/t_afif/pen/o... via @codepen.io Read my latest article to find out why (and to discover more alignment mysteries!) 👇

Do you know that align-content applies to block elements? Not only that, but you can also use the space-around value to center your content vertically! 👀 Demo: codepen.io/t_afif/pen/o... via @codepen.io Read my latest article to find out why (and to discover more alignment mysteries!) 👇

Many of the interactive demos have a "Shuffle" button that allows you to generate a random alignment configuration. A nice way to get a random position for your items and study it!

Many of the interactive demos have a "Shuffle" button that allows you to generate a random alignment configuration. A nice way to get a random position for your items and study it!

How good are you with alignment in CSS? 🤔 Take the Quiz at the end of my recent exploration and see if you can get 10/10! css-tip.com/explore/alig...

How good are you with alignment in CSS? 🤔 Take the Quiz at the end of my recent exploration and see if you can get 10/10! css-tip.com/explore/alig...

The 1st CSS Exploration is live! 🥳 Dive into the world of CSS alignment and unlock all its secrets! css-tip.com/explore/alig... It's time to correctly learn how all the properties work in every layout (interactive demos included 🤩) Centering? No, we are going beyond that!

The 1st CSS Exploration is live! 🥳 Dive into the world of CSS alignment and unlock all its secrets! css-tip.com/explore/alig... It's time to correctly learn how all the properties work in every layout (interactive demos included 🤩) Centering? No, we are going beyond that!

Anyone facing issue with <select> elements on Chrome? The dropdown is anchored to the top/left of the browser and it happens in all the website with no exception 😬 Using Ubuntu and Chrome V140 (it was ok before the last update)

🛠️ New Article: The Basics of Anchor Positioning I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩 🔗 ishadeed.com/article/anch...

Working on a new type of content, stay tuned 🤞 css-tip.com/explore

Working on a new type of content, stay tuned 🤞 css-tip.com/explore

A circular gallery of images, because why not! css-tip.com/circular-gal... Another funny use case of sibling-index(). Less than 10 CSS declarations to correctly place up to 60 images!

An animated version? Demo: codepen.io/t_afif/full/... via @codepen.io

A circular gallery of images, because why not! css-tip.com/circular-gal... Another funny use case of sibling-index(). Less than 10 CSS declarations to correctly place up to 60 images!

💡 CSS Tip! Similar to the :nth-child() trick, we can implement media queries using if() and calculation! css-tip.com/dynamic-quer... Why reinvent the wheel? With this trick, you can update the width value on the fly (using variables for example). You cannot do it with native queries.

We can also simulate container queries by using cqw instead of vw. Demo: codepen.io/t_afif/full/... via @codepen.io The layout of the demo responds to the width of the wrapper without a single media query or container query!

💡 CSS Tip! Similar to the :nth-child() trick, we can implement media queries using if() and calculation! css-tip.com/dynamic-quer... Why reinvent the wheel? With this trick, you can update the width value on the fly (using variables for example). You cannot do it with native queries.

✨ New Interactive Article ✨ 📝 Better CSS layouts: Time Hero Section I wrote an interactive article on how I reimagined Time's hero section. I explored using CSS grid, container queries, :has, and more. Happy reading! 🔗 ishadeed.com/article/time...

If, like many people, you are struggling with drawing CSS shapes, then check this thread 👇 I have all the resources you need that cover almost all the possible CSS shapes. 2025.stateofcss.com/en-US/featur...

If, like many people, you are struggling with drawing CSS shapes, then check this thread 👇 I have all the resources you need that cover almost all the possible CSS shapes. 2025.stateofcss.com/en-US/featur...

I am in the Top 20 this year! 👀 2025.stateofcss.com/en-US/resour...

The State of CSS 2025 survey results are now available: 2025.stateofcss.com/en-US/ Big thanks to @amitsheen.bsky.social, @saron.bsky.social, @miocene.io, @sjoy.lol, @joshwcomeau.com, @kilianvalkhof.com, and all the other contributors!

I tried to add a third C to CSS but I didn't succeed. Two Cs should be enough, right?

Here is an overview of the CSS code: A simple keyframes and one animation declaration. Another use case for the new sibling-*() functions and the linear() function.

Method #347 to "vertically center content" unlocked! (Firefox users can use min-height: 100% instead of height: stretch)

Here is an overview of the CSS code: A simple keyframes and one animation declaration. Another use case for the new sibling-*() functions and the linear() function.

💡 CSS Tip! How would you create the below animation? A complex keyframes? A different delay for each item? Thanks to modern CSS, we can do it with a simple and flexible code. css-tip.com/sequential-a... No delays, no magic numbers, and it works with any number of items.

I have a new article out on @frontendmasters.com: get the number of auto-fit/ auto-fill columns in #CSS frontendmasters.com/blog/count-a... Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

🚨 New Course Alert 🚨 DevTools for Beginners @kevinpowell.co and I just released a brand new (and totally free!) email course all about DevTools and how to use them in ways that actually help you debug and improve your CSS. 🔗 Full details and free signup here: devtoolsforbeginners.kevinpowell.co

Cascading Stretch 👀 Demo: codepen.io/t_afif/pen/r...

📝 New CSS Article! Do you want to have an overview of what modern CSS can do? Check my latest article @frontendmasters.com frontendmasters.com/blog/infinit... Learn how I made that infinite marquee animation with less than 10 lines of CSS using shape(), sibling-index(), and more!