CSS by T. Afif

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.

Screenshot from a complex CSS Spec

Screenshot from a complex CSS Spec

Wait until you have to read (and understand) the "flex base size" and the "hypothetical main size" that you will need later to calculate the "flexible length"

Get the number of auto-fit/auto-fill columns in CSS The whole point of auto-fit and auto-fill is that you aren't saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

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!

📝 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!

I always post full url with https and it's the case here

💡 CSS Tip!

Create an infinite logo marquee using modern CSS and less than 10 lines of code.

css-tip.com/logo-marquee/

Where's the novelty, you might ask? It's responsive, works with any number of images, doesn't rely on magic numbers, and you can easily control it using CSS variables.

Overview of the CSS code from the linked post

7 random images place around a circle

💡 CSS Tip!

Do you know that you can use offset() to place images around a circle? And if you combine it with the new sibling-*() functions, you can have a perfect placement that works for any number of elements!

css-tip.com/images-circle/

😎

The technique is not limited to image elements. It works with any kind of content.

Overview of the CSS code from the link in the original post

Another use case for modern CSS features (shape(), sibling-index(), sibling-count(), etc).

💡 CSS Tip!

Create an infinite logo marquee using modern CSS and less than 10 lines of code.

css-tip.com/logo-marquee/

Where's the novelty, you might ask? It's responsive, works with any number of images, doesn't rely on magic numbers, and you can easily control it using CSS variables.

Never heard about such element 🫣

I still have 0 reading/knowledge about the "custom select" thing.

They require both arguments to have the same type (length in this case) but you can also have them unitless (number or integer) and it works too.

max(0,500) works too BUT it should be applied to a property that accept an integer/number.

mixing the types is the issue.

We can also have a nice entry animation by adding the following code:

```
img {
transition: 1s 1s;
@​starting-style {
offset: circle(0px) 0% 0deg;
}
}
```

Demo: codepen.io/t_afif/full/... via @codepen.io

We can also have a nice entry animation by adding the following code:

```
img {
transition: 1s 1s;
@​starting-style {
offset: circle(0px) 0% 0deg;
}
}
```

Demo: codepen.io/t_afif/full/... via @codepen.io

Here is a demo where you can add/remove images and see how they align perfectly.

Demo: codepen.io/t_afif/full/... via @codepen.io

As a bonus, we can have a nice animation by adding a transition to the offset property.

Overview of the CSS code from the linked post

7 random images place around a circle

💡 CSS Tip!

Do you know that you can use offset() to place images around a circle? And if you combine it with the new sibling-*() functions, you can have a perfect placement that works for any number of elements!

css-tip.com/images-circle/

We can also create a custom function and make the code easier to use.

⚠️ No browser support yet, but it's on the way! ⚠️

We can also create a custom function and make the code easier to use.

⚠️ No browser support yet, but it's on the way! ⚠️

Overview of the CSS code from the linked post

💡 CSS Tip!

Using modern CSS features such as sibling-index() and if(), you can re-create the :nth-child(An + B) selector.

css-tip.com/nth-child/

Why? To easily update A and B since now they are variables! I know some of you are in the team: "How to update the values of nth-child() with CSS ?!"

Overview of the CSS code from the linked post

💡 CSS Tip!

Using modern CSS features such as sibling-index() and if(), you can re-create the :nth-child(An + B) selector.

css-tip.com/nth-child/

Why? To easily update A and B since now they are variables! I know some of you are in the team: "How to update the values of nth-child() with CSS ?!"

oops, this suddenly makes the function feature kind of useless now 😅

That example was a simplified test case but in reality I want many local variables to be typed to do various calculation.

looks like the "hacky" solution is to add all the local variabled as arguments at the end of the function 🤔

sibling-index() inside function works fine (I tried it with other examples). The issue is its usage with if(). when I introduce if() it breaks and the exact same code outside a function works fine.

I hope it's a bug because I don't see why it should not work.