CSS by T. Afif
@css-only.dev
January 12, 2026 at 1:30 PM
And another cool property that I am sure will be underrated in the future is position-area that can simplify the code.
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
January 8, 2026 at 7:47 PM
And another cool property that I am sure will be underrated in the future is position-area that can simplify the code.
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
January 8, 2026 at 7:33 PM
💡CSS Tip!
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
January 8, 2026 at 10:35 AM
💡CSS Tip!
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀
css-tip.com/connected-ci...
Another cool demo powered by the future of CSS.
The same code can be slightly adjusted to obtain more shapes, such as a Rhombus and an Octagon!
Demo: codepen.io/t_afif/pen/W... via @codepen.io
Demo: codepen.io/t_afif/pen/W... via @codepen.io
January 6, 2026 at 7:16 PM
The same code can be slightly adjusted to obtain more shapes, such as a Rhombus and an Octagon!
Demo: codepen.io/t_afif/pen/W... via @codepen.io
Demo: codepen.io/t_afif/pen/W... via @codepen.io
💡 CSS Tip!
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
January 6, 2026 at 10:38 AM
💡 CSS Tip!
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Ready for the first cool demo of the year?
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
January 2, 2026 at 1:39 PM
Ready for the first cool demo of the year?
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
The best way to end the year, thanks to the @codepen.io team ☺️
codepen.io/spark/489
See you in 2026 for more "terrific" CSS stuff: css-tip.com
codepen.io/spark/489
See you in 2026 for more "terrific" CSS stuff: css-tip.com
December 19, 2025 at 10:38 AM
The best way to end the year, thanks to the @codepen.io team ☺️
codepen.io/spark/489
See you in 2026 for more "terrific" CSS stuff: css-tip.com
codepen.io/spark/489
See you in 2026 for more "terrific" CSS stuff: css-tip.com
📝 The last CSS Article of the year!
Detailing another cool demo using modern CSS features.
css-tricks.com/responsive-l...
Enjoy!
Detailing another cool demo using modern CSS features.
css-tricks.com/responsive-l...
Enjoy!
December 18, 2025 at 10:02 AM
📝 The last CSS Article of the year!
Detailing another cool demo using modern CSS features.
css-tricks.com/responsive-l...
Enjoy!
Detailing another cool demo using modern CSS features.
css-tricks.com/responsive-l...
Enjoy!
Only two circles? No, you can have as many circles as you want. Simply add as many circles/connections as you want in the HTML (No need to touch the CSS code).
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
December 17, 2025 at 11:23 AM
Only two circles? No, you can have as many circles as you want. Simply add as many circles/connections as you want in the HTML (No need to touch the CSS code).
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
December 16, 2025 at 11:21 AM
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
📝 New CSS Article!
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
December 15, 2025 at 7:05 PM
📝 New CSS Article!
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
Playing with Anchor Positioning and modern CSS. The arrow is controlled using only CSS 👀
A cool demo in progress ...
A cool demo in progress ...
December 12, 2025 at 12:39 PM
Playing with Anchor Positioning and modern CSS. The arrow is controlled using only CSS 👀
A cool demo in progress ...
A cool demo in progress ...
December 9, 2025 at 7:34 AM
An animated version because why not. Still no HTML elements!
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
December 6, 2025 at 7:26 PM
An animated version because why not. Still no HTML elements!
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
They said Fizz Buzz using CSS (and HTML), but what about a pure CSS version with no HTML? It's possible!
css-tip.com/fizz-buzz/
A fun CSS-only experiment using modern features.
css-tip.com/fizz-buzz/
A fun CSS-only experiment using modern features.
December 6, 2025 at 11:55 AM
They said Fizz Buzz using CSS (and HTML), but what about a pure CSS version with no HTML? It's possible!
css-tip.com/fizz-buzz/
A fun CSS-only experiment using modern features.
css-tip.com/fizz-buzz/
A fun CSS-only experiment using modern features.
💡 CSS Tip!
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
December 4, 2025 at 11:02 AM
💡 CSS Tip!
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
💡 CSS Tip!
Another classic component made easy using corner-shape. A gallery of skewed images with a hover effect.
css-tip.com/skewed-images/
It can be done with old features, but this one is direction-aware! One code for both directions (left-to-right and right-to-left)
Another classic component made easy using corner-shape. A gallery of skewed images with a hover effect.
css-tip.com/skewed-images/
It can be done with old features, but this one is direction-aware! One code for both directions (left-to-right and right-to-left)
December 2, 2025 at 11:50 AM
💡 CSS Tip!
Another classic component made easy using corner-shape. A gallery of skewed images with a hover effect.
css-tip.com/skewed-images/
It can be done with old features, but this one is direction-aware! One code for both directions (left-to-right and right-to-left)
Another classic component made easy using corner-shape. A gallery of skewed images with a hover effect.
css-tip.com/skewed-images/
It can be done with old features, but this one is direction-aware! One code for both directions (left-to-right and right-to-left)
if you keep the normal value as the alignment value `place-self: normal`.
Here are the 4 values you want
position-area: span-top span-left;
position-area: span-top span-right;
position-area: span-bottom span-left;
position-area: span-bottom span-right;
Here are the 4 values you want
position-area: span-top span-left;
position-area: span-top span-right;
position-area: span-bottom span-left;
position-area: span-bottom span-right;
December 1, 2025 at 9:03 PM
if you keep the normal value as the alignment value `place-self: normal`.
Here are the 4 values you want
position-area: span-top span-left;
position-area: span-top span-right;
position-area: span-bottom span-left;
position-area: span-bottom span-right;
Here are the 4 values you want
position-area: span-top span-left;
position-area: span-top span-right;
position-area: span-bottom span-left;
position-area: span-bottom span-right;
I also made an interactive demo with all the possible positions:
css-tip.com/position-area/
And I am using it myself to rapidly copy/paste the value 😅
css-tip.com/position-area/
And I am using it myself to rapidly copy/paste the value 😅
December 1, 2025 at 8:56 PM
I also made an interactive demo with all the possible positions:
css-tip.com/position-area/
And I am using it myself to rapidly copy/paste the value 😅
css-tip.com/position-area/
And I am using it myself to rapidly copy/paste the value 😅
The classic Breadcrumb Navigation using the below technique.
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
November 27, 2025 at 7:53 PM
The classic Breadcrumb Navigation using the below technique.
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
💡 CSS Tip!
A direction-aware arrow is good, but what about a generic way to make any CSS Shapes direction-aware? It's possible!
css-tip.com/direction-aw...
The code is simple and doesn't require any modern features, so it's well-supported.
A direction-aware arrow is good, but what about a generic way to make any CSS Shapes direction-aware? It's possible!
css-tip.com/direction-aw...
The code is simple and doesn't require any modern features, so it's well-supported.
November 27, 2025 at 12:12 PM
💡 CSS Tip!
A direction-aware arrow is good, but what about a generic way to make any CSS Shapes direction-aware? It's possible!
css-tip.com/direction-aw...
The code is simple and doesn't require any modern features, so it's well-supported.
A direction-aware arrow is good, but what about a generic way to make any CSS Shapes direction-aware? It's possible!
css-tip.com/direction-aw...
The code is simple and doesn't require any modern features, so it's well-supported.
An interactive demo: codepen.io/t_afif/full/... via @codepen.io
November 25, 2025 at 6:58 PM
An interactive demo: codepen.io/t_afif/full/... via @codepen.io
💡 CSS Tip!
Use modern CSS to create an arrow shape that adjusts according to the direction and writing mode. A direction-aware shape!
css-tip.com/arrow/
Another cool use case of corner-shape
Use modern CSS to create an arrow shape that adjusts according to the direction and writing mode. A direction-aware shape!
css-tip.com/arrow/
Another cool use case of corner-shape
November 25, 2025 at 11:52 AM
💡 CSS Tip!
Use modern CSS to create an arrow shape that adjusts according to the direction and writing mode. A direction-aware shape!
css-tip.com/arrow/
Another cool use case of corner-shape
Use modern CSS to create an arrow shape that adjusts according to the direction and writing mode. A direction-aware shape!
css-tip.com/arrow/
Another cool use case of corner-shape
November 20, 2025 at 1:31 PM