Nostr notes by CSS by T. Afif :verified:

Now that my favorite feature is well supported, let's create ...

2026-03-27T11:58:50Z

Now that my favorite feature is well supported, let's create a new set of CSS loaders 🤩

The Squishy Collection: https://css-loaders.com/squishy/

Single-element implementation powered by shape() (and linear() for the bouncy ones!)

Pick your favorite one 👇

#CSS #HTML

I thought I had found a bug that prevented counter() from working ...

2026-03-25T11:25:14Z

I thought I had found a bug that prevented counter() from working properly, but it was a feature!

https://css-tip.com/counter-gotcha/

Another CSS gotcha that you'd better know about if you don't want to waste time trying to figure out why your code isn't working.

Thanks to Mia [data-css=poetic] (npub1szd…5a79) for the insights

#CSS #HTML

📝 New CSS Article! If you have seen my graph theory demo and ...

2026-03-23T19:50:31Z

📝 New CSS Article!

If you have seen my graph theory demo and wondered how it works, then the article is finally live!

https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm.

Modern CSS is fun!

#CSS #HTML

Stack Overflow asked me to propose a CSS Challenge, and I ...

2026-03-23T10:40:48Z

Stack Overflow asked me to propose a CSS Challenge, and I couldn't refuse.

https://stackoverflow.com/beta/challenges/79908564/challenge-17-the-accurate-selection

It's about Selectors and more! There is nothing to win (except a profile badge), but it's a fun challenge to illustrate your creativity.

#CSS #HTML

💡 CSS Tip! Add an infinite wobbling animation to your image ...

2026-03-18T10:42:31Z

💡 CSS Tip!

Add an infinite wobbling animation to your image with a simple code.

https://css-tip.com/wobbling-animation/

Powered by "complex" shape()s that you can easily get from my online generator!

https://css-generators.com/fancy-frame/

#CSS #HTML

It's been a while since my last CSS Pattern, so let's ...

2026-03-15T12:46:34Z

It's been a while since my last CSS Pattern, so let's work on new ones!

https://css-pattern.com/circles-pills/

#CSS #HTML

A classic rounded button: boooring!! 🥱 A squishy animated ...

2026-03-12T12:47:01Z

A classic rounded button: boooring!! 🥱
A squishy animated button: Yes, please!! 🤩

https://css-tip.com/squishy-button/

Another cool demo powered by the powerful shape() function

#CSS #HTML

And I know most of you are looking for the hexagon shape, so in ...

2026-03-09T18:30:43Z

And I know most of you are looking for the hexagon shape, so in addition to the generator, here is another code with CSS variables to easily control the radius and the rotation.

https://css-tip.com/rounded-hexagon/

Yes, you can have cool hover effects and animations!

#CSS #HTML

Now that shape() is available in all major browsers, let me ...

2026-03-09T11:34:01Z

Now that shape() is available in all major browsers, let me remind you that you can use my online generator to create any polygon with ... rounded corners!

https://css-generators.com/polygon-shape/

Adjust the setting, then copy the code.

#CSS #HTML

Rounding the corners and it's almost ready! 😁 Now I need ...

2026-03-01T11:53:08Z

In reply to nevent1q…dmwn
_________________________

Rounding the corners and it's almost ready! 😁

Now I need to find a name for it ... what I hate the most 😑

Open to suggestions 👇

#CSS #HTML

Firefox is joining the shape() game 🤩 It's a good time for ...

2026-02-26T13:11:34Z

Firefox is joining the shape() game 🤩

It's a good time for some blobs: https://css-generators.com/blob/

Or maybe a nice wavy divider: https://css-generators.com/wavy-divider/

And stay tuned for another generator and more shapes next week! 🤫

#CSS #HTML

Playing with shape() and border-shape 👀 Cool demos in progress ...

2026-02-22T12:54:11Z

Playing with shape() and border-shape 👀

Cool demos in progress ⌛

#CSS #HTML

Anchor positioning is supported in all major browsers and will ...

2026-02-20T11:50:02Z

In reply to nevent1q…gme5
_________________________

Anchor positioning is supported in all major browsers and will soon be used widely. Learn how it properly works before you start hating this cool feature!

https://css-tip.com/anchor-issues/

#CSS #HTML

💡 CSS Tip! For years, we've had the "z-index, stacking ...

2026-02-19T10:12:04Z

💡 CSS Tip!

For years, we've had the "z-index, stacking context" nightmare, but we will soon have a worse nightmare related to Anchor Positioning 😱

When it doesn't work, it's frustrating, so it's time to learn how it really works.

https://css-tip.com/anchor-issues/

It's not as simple as you might think!

#CSS #HTML

I was lucky to be a privileged tester of :codepen: ...

2026-01-26T10:57:18Z

I was lucky to be a privileged tester of :codepen: CodePen (npub1sf7…gl68) 2.0, and now they have released the Private Beta.

https://codepen.io/beta

It's finally time to unleash some cool "View Transition" demos because with the 2.0 version, we can have many pages in one pen 👀

Kudos to Chris Coyier (npub1t0w…zgs2) and the entire team!

#CSS #HTML #web

even if light-dark() is supported, it's not valid because ...

2025-12-30T08:43:26Z

In reply to nevent1q…wxwn
_________________________

even if light-dark() is supported, it's not valid because background-color doesn't accept comma separated values

It should be

```
--bgcolor: light-dark(white, black);
background-color: var(--bgcolor,white);
```

The fallback inside var(). And even in that case, it won't fallback to "white" as well.

The classic Breadcrumb Navigation using the above technique. ...

2025-11-27T19:54:29Z

In reply to nevent1q…rwvc
_________________________

The classic Breadcrumb Navigation using the above technique.

Demo: https://codepen.io/t_afif/full/ZYWoJvp via :codepen: CodePen (npub1sf7…gl68)

#CSS #HTML

💡 CSS Tip! A direction-aware arrow is good, but what about a ...

2025-11-27T12:12:17Z

💡 CSS Tip!

A direction-aware arrow is good, but what about a generic way to make any CSS Shapes direction-aware? It's possible!

https://css-tip.com/direction-aware-shapes/

The code is simple and doesn't require any modern features, so it's well-supported.

#CSS #HTML

but if you tell your element to fill 2 cells, it won't go ...

2025-10-17T21:07:37Z

In reply to nevent1q…8uvy
_________________________

but if you tell your element to fill 2 cells, it won't go there because it wants 2 cells not 1.

Basically, it's about the number of cells to span, not the dimension of the element or the cell.

it doesn't search for enough room but it search for empty ...

2025-10-17T21:06:07Z

In reply to nevent1q…veag
_________________________

it doesn't search for enough room but it search for empty cells to fill.

If for example the first cell is empty and I have grid-auto-flow: dense, the next element will get placed there whatever the dimension of the cell and the element.

ex: https://codepen.io/t_afif/pen/JoGMKKj

the overlap is due to each one overflowing it's grid cell. ...

2025-10-17T20:58:28Z

In reply to nevent1q…drsd
_________________________

the overlap is due to each one overflowing it's grid cell. The browser doesn't compare dimensions when placing elements inside cells so overflow cannot be prevented. Actually, there is no mechanism to achieve this.

Also grid-auto-flow: row is the default value and has no effect here.

The Spec part: ...

2025-10-12T23:42:35Z

In reply to nevent1q…m4ch
_________________________

The Spec part: https://www.w3.org/TR/css-align-3/#distribution-grid

they are exactly alike. the normal value will always behave the ...

2025-10-12T23:39:31Z

In reply to nevent1q…00y6
_________________________

they are exactly alike. the normal value will always behave the same as another one depending on the layout (and other things).

Related: https://css-tip.com/explore/alignment/

I may have to update that answer because I think with @property ...

2025-09-03T00:57:07Z

In reply to nevent1q…n440
_________________________

I may have to update that answer because I think with @property you can get the computed value.

I was not seeing it as an attack but I was listing the ...

2025-05-19T20:13:26Z

In reply to nevent1q…xka5
_________________________

I was not seeing it as an attack but I was listing the limitations I faced with path() that lead me to consider shape() but maybe you have ideas to overcome those limitations.

btw, path is pixel based, it doesn't scale with the element and there is no viewbox thing when you use it with clip-path. This makes them kind of useless outside a classic SVG.

show me how you can do it using path while having it responsive ...

2025-05-19T19:04:02Z

In reply to nevent1q…4wjx
_________________________

show me how you can do it using path while having it responsive and not pixel based. Or how to be able to generate the code on the fly using Sass (where you can also have CSS variables but I omitted that part from the article to not make it lengthy)

📝 New CSS Article! The fun continues with the new shape() ...

2025-05-19T15:14:32Z

📝 New CSS Article!

The fun continues with the new shape() function. Learn how I made those blob shapes and how you can easily animate them! 🤩

https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape/

Shape generator: https://css-generators.com/blob/

#CSS #HTML

I updated my online generator to add the radius option! The ...

2025-04-21T09:39:04Z

In reply to nevent1q…kcan
_________________________

I updated my online generator to add the radius option! The easiest way to generate regular polygons with rounded corners.

https://css-generators.com/polygon-shape/

And look at that border-only version! 🤩

#CSS #HTML

And here is the code to generate any polygon shape with rounded ...

2025-04-17T10:34:51Z

In reply to nevent1q…4xu6
_________________________

And here is the code to generate any polygon shape with rounded corners!

https://css-tip.com/rounded-polygon/

Update the variables then get your code (There is another variation using CSS variables as well).

#CSS #HTML

💡 CSS Tip! Shapes with rounded corners are a nightmare in CSS ...

2025-04-16T11:01:09Z

💡 CSS Tip!

Shapes with rounded corners are a nightmare in CSS but it's now easy with the new shape() function! 🥳

Let's start with a classic: The Hexagon

https://css-tip.com/rounded-hexagon/

Yes, you can animate the radius and rotate the shape. Modern CSS is cool!

Do you want another polygon shape? I am cooking a generic code to create all of them.

#CSS #HTML

💡 CSS Tip! A simple CSS code to smoothly stop the rotation of ...

2025-03-14T15:18:59Z

💡 CSS Tip!

A simple CSS code to smoothly stop the rotation of your element on hover. The rotation will resume smoothly on mouse-out as well.

https://css-tip.com/stop-rotation/

#CSS #HTML

💡 CSS Tip! Do you know the zoom property? It works like a ...

2025-02-17T11:07:53Z

💡 CSS Tip!

Do you know the zoom property? It works like a scale transformation except that the page layout will use the dimension of the scaled element.

https://css-tip.com/zoom/

#CSS #HTML

💡 CSS Tip! Do you know that One-Time password field? You can ...

2025-02-13T12:56:30Z

💡 CSS Tip!

Do you know that One-Time password field? You can create it using only one input and a few lines of CSS.

The HTML: <input type="text" maxlength="6">

Code & Demo: https://css-tip.com/single-digit-inputs/

As a bonus, you can control the number of characters by adjusting the "maxlength" attribute (thanks to the new attr() function!)

#CSS #HTML

In case you want a modern solution: ...

2025-01-20T19:31:01Z

In reply to nevent1q…da95
_________________________

In case you want a modern solution: https://css-tip.com/full-bleed-layout/

(I will soon have a detailed article about it)

maybe remove the "automated" thing from your profile so ...

2025-01-09T09:04:52Z

In reply to nevent1q…ta0c
_________________________

maybe remove the "automated" thing from your profile so people know you are a real person posting and not an automatic account cross-posting.

It's the end of the year so let's jump back in time and ...

2024-12-16T10:59:40Z

It's the end of the year so let's jump back in time and see some of my favorite CSS stuff!

This week I will post (2 posts/day) my personal top 10 of what I shared in 2024 🏆

🧵Don't miss this thread! You can also participate by telling me your favorite CSS thing 👇

#CSS

A background-only version 🤩 ...

2024-12-07T18:45:55Z

In reply to nevent1q…uwp9
_________________________

A background-only version 🤩

https://codepen.io/t_afif/pen/pvzyWwQ

A new centering method is unlocked! 🔓 Now we have 635 ways to ...

2024-12-06T20:04:13Z

A new centering method is unlocked! 🔓

Now we have 635 ways to center elements.

You can use justify-self with block elements without using Flexbox or CSS Grid. One line of code to replace "margin: auto" combined with width 🤩

Demo: https://codepen.io/t_afif/pen/ByBKNPP via :codepen: CodePen (npub1sf7…gl68)

Online Version: https://css-tip.com/center-block-element/

⚠️ Chrome only for now ⚠️

#CSS #HTML

but "clamp(20%, l ,40%)" and "clamp(20%, l + ...

2024-12-01T15:48:43Z

In reply to nevent1q…f56u
_________________________

but "clamp(20%, l ,40%)" and "clamp(20%, l + 10%,40%)" aren't good

ok. Concerning your gif, I see you are using an addition which is ...

2024-12-01T15:47:12Z

In reply to nevent1q…sc42
_________________________

ok. Concerning your gif, I see you are using an addition which is different from a multiplication.

The addition doesn't work for me because in that case we have "number + percentage" but the multiplication is fine because we can do "number * percentage"

So I guess you can either use number everywhere or percentage everywhere and it will be fine (except for safari)

"clamp(20, l ,40)", "clamp(20%, l * 1%,40%)", "clamp(20%, (l + 10) * 1%,40%)" are good.

What about Chrome and Firefox? it does work for both or it works ...

2024-12-01T15:40:20Z

In reply to nevent1q…mvc6
_________________________

What about Chrome and Firefox? it does work for both or it works on Firefox only?

I am on Ubuntu (Version 131.0.6778.85 (Official Build) (64-bit)) ...

2024-12-01T15:23:24Z

In reply to nevent1q…wf0m
_________________________

I am on Ubuntu (Version 131.0.6778.85 (Official Build) (64-bit)) and no flag enabled.

This demo is working for me on Chrome and Firefox: https://codepen.io/t_afif/pen/EaYjWVB

if you remove the 1% from "l * 1%" it doesn't work

hm, no ... testing again, the percentage seems to work for me on ...

2024-12-01T15:10:50Z

In reply to nevent1q…4xhj
_________________________

hm, no ... testing again, the percentage seems to work for me on Chrome as well so both are working for me 🤔

looks like Safari is wrong here. As far as I know, the second ...

2024-12-01T15:08:05Z

In reply to nevent1q…af5a
_________________________

looks like Safari is wrong here. As far as I know, the second syntax is the correct one.

If you have a StackOverflow account, go upvote my answer: ...

2024-11-29T19:15:29Z

If you have a StackOverflow account, go upvote my answer: https://stackoverflow.com/a/74016670/8620333 and help future developers use the has() selector to count child elements.

Let's make it the top answer!

#CSS #HTML

💡 CSS Tip! Create a full-bleed layout using a few lines of ...

2024-11-26T11:12:41Z

💡 CSS Tip!

Create a full-bleed layout using a few lines of code & modern CSS.

What is full-bleed? It's when an element needs to bleed outside the main container and extend to the edge of the page.

Demo: https://codepen.io/t_afif/full/vEBBoWj via CodePen (npub1sf7…gl68)

Online Version (with more variations): https://css-tip.com/full-bleed-layout/

#CSS #HTML

When they steal your work but also your username 😅 Another ...

2024-11-09T14:04:24Z

When they steal your work but also your username 😅

Another website collecting Codepen demos and pretend teaching people how to code stuff.

And a few ads on the site to earn money 😒

Since when the "container" property no more create a ...

2024-11-04T08:09:53Z

Since when the "container" property no more create a containing block for fixed and absolute element? 🤔

The spec still says "Applies layout containment," but chrome is not doing what I expect (Firefox is still doing what I expect)

A bug or a recent change?

demo: https://codepen.io/t_afif/pen/QWeBMKy (the header is fixed on chrome but not in Firefox)

cc Mia [data-css=poetic] (npub1szd…5a79) Roma Komarov (npub1p63…gl53) ?

#CSS #HTML

If you are interested I also have a quantity query generator with ...

2024-10-28T19:24:55Z

In reply to nevent1q…phgy
_________________________

If you are interested I also have a quantity query generator with shorter and modern syntax: https://css-tip.com/quantity-queries/

#CSS

yes curve alone is probably good as well (someone also suggested ...

2024-10-13T21:20:27Z

In reply to nevent1q…ukyz
_________________________

yes curve alone is probably good as well (someone also suggested arch)

If the height is small I agree but for a big element I don't ...

2024-10-13T20:37:18Z

In reply to nevent1q…py70
_________________________

If the height is small I agree but for a big element I don't think people will use "curved ribbon" to look for such shape 🤔

At least, we all agree I have to keep "curved" in the name.

How would you call the below shape? 👇 I am calling the top ...

2024-10-13T20:16:48Z

How would you call the below shape? 👇

I am calling the top part "curved edge" and the bottom part "rounded edge" but what about the combination?

I don't want to call it "Rounded & Curved edges" 😅

#CSS

💫 New CSS Loaders! Adding 20 more loaders to my collection! ...

2024-10-04T10:57:28Z

💫 New CSS Loaders!

Adding 20 more loaders to my collection! 🥳

The Filling CSS Loaders: https://css-loaders.com/filling/

Pick your favorite one 👇

#CSS #HTML

To my surprise, many have a wrong information about the default ...

2024-09-30T11:07:57Z

To my surprise, many have a wrong information about the default behavior of `position: absolute` element.

"if an absolute positioned element has no positioned ancestors, it uses the body element" NO, this is false!

❌ W3Schools is wrong.

✅ MDN is correct.

What is the initial containing block?

It's a rectangle having the same dimension as the viewport (full width/height) and anchored at the canvas origin (moves on scroll). (https://www.w3.org/TR/CSS22/visudet.html#containing-block-details)

See demo in the reply 👇

#CSS #HTML

💡 CSS Tip! A small tool to create a quantity query selector ...

2024-08-26T11:02:09Z

💡 CSS Tip!

A small tool to create a quantity query selector using :has(). Adjust the setting and get your selector in no time! 😎

I am trying a new kind of "interactive CSS Tip". Let me know what you think. 👇

https://css-tip.com/quantity-queries/

#CSS #HTML

🧩 CSS Shape https://css-shape.com/rounded-edge/ #CSS #HTML ...

2024-08-04T11:23:40Z

🧩 CSS Shape

https://css-shape.com/rounded-edge/

#CSS #HTML