iiinova — where your digital self keeps evolving

The animation is equivalent to the below: move to 25% no move between 25% and 75% move back from 75% to 100% demo: codepen.io/editor/t_afi...

030

CSS by T. Afif @css-only.dev · 29/09/2026

💡 CSS Tip! Want to know how many children your container has? We don't have children-count() yet, but we can implement it using modern CSS! css-tip.com/children-cou... A hacky experiment powered by Scroll-Driven Animations. How would you use it? Share your use cases 👇

There is no important content in this image; I just need an image to make the post look nicer.

1131

CSS by T. Afif @css-only.dev · 22/09/2026

💡CSS Tip! Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes! Let's start with Blobs. css-tip.com/random-blob/ You never see the same shape twice. A unique shape for a unique experience! 👀

1344

CSS by T. Afif @css-only.dev · 17/09/2026

I used that trick to create 3D boxes and I suppose it can also be useful for other situations as well. css-tip.com/3d-box/

041

CSS by T. Afif @css-only.dev · 17/09/2026

💡 CSS Tip! border-shape + border-area = The perfect combo 🪄 3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀 css-tip.com/gradient-sha... Save the code for the future (a near future!)

Overview of the CSS code from the linked post

1243

CSS by T. Afif @css-only.dev · 15/09/2026

We should have been writing articles and having fun with CSS, but instead... We can't do much against big corporations (except wait), so let's give Geoff some support. Share (or try) his HTML/CSS course: thebasics.dev 100% human-made by the one who edited 86945 CSS articles!

06624

CSS by T. Afif @css-only.dev · 11/09/2026

It's not a competition, but border-shape is actually the second most upvoted feature, close to 100 thumbs up! Can we make it the first?! 👀 Cast your vote 👇

Screenshot of the proposed feature for Interop 2027

141

CSS by T. Afif @css-only.dev · 09/09/2026

Ready for another CSS-only diagram? This time, I am trying another connector type. It sticks to the selected sides, regardless of the node's position. css-tip.com/node-connect... Look how the lines get distorted! 👀 Another cool demo powered by border-shape, anchor position, and more!

3338

CSS by T. Afif @css-only.dev · 08/09/2026

Here is a similar idea where you can use math to define your --screensize and still be able to have the breakpoint as variables: css-tip.com/dynamic-quer... Your code will look like the below:

252

CSS by T. Afif @css-only.dev · 07/09/2026

My idea using sibling-index() and a few math: css-tip.com/animated-grid/

031

CSS by T. Afif @css-only.dev · 03/09/2026

It's always nice to see some of your code getting better support 🤩 A nice use case of attr() is styling the native progress element by getting the progress value to do various calculations css-tip.com/custom-progr...

4 custom progress element with fancy coloration

0152

CSS by T. Afif @css-only.dev · 02/09/2026

Spamming my little tool anytime this trick emerge because no one want to memorize those values. 😅 css-tip.com/text-box/

0153

CSS by T. Afif @css-only.dev · 02/09/2026

Combining the content property with if() is pretty handy for conditionally displaying information. If an element spans one column or one row, don't show the "end" value

Showing the CSS code that display the grid information within a grid item

0130

CSS by T. Afif @css-only.dev · 01/09/2026

Yes, it's responsive. All the values are updated on screen/container resize! Demo: codepen.io/t_afif/full/... via @codepen.io

060

CSS by T. Afif @css-only.dev · 01/09/2026

Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀 css-tip.com/grid-informa... A fancy demo powered by Scroll-Driven Animations and more! All the values are calculated and displayed using only CSS.

A grid of randomly placed items where each one show its own position within the grid

2220

CSS by T. Afif @css-only.dev · 31/08/2026

I think we missed the opportunity to call it "grid-col" instead of "grid-column" to have ... better-written code and avoid adding extra spaces to align it with "grid-row" I know I am not alone in the side quest of having the values as aligned as possible 🙃

The following CSS code:
.item {
grid-col: 5;
grid-row: 2;

/* instead of */
grid-column: 5;
grid-row: 2;
}

2312

CSS by T. Afif @css-only.dev · 27/08/2026

Looks like I might have something ... working 👀 Need to clean the code and do more testing!

130

CSS by T. Afif @css-only.dev · 26/08/2026

the -stagger variable you are using is the --y variable in my code and you can omit the use of --x and --m, you only need the --n (number of columns). It may sounds complex but it would avoid the hardcoding of the values in the container query.

151

CSS by T. Afif @css-only.dev · 24/08/2026

Did anyone already mention "Dark mode with spotLight"? No!? That's the only valid way. Demo: codepen.io/t_afif/pen/Y... via @codepen.io Debating about toggles? Well, I don't understand ...

1678

CSS by T. Afif @css-only.dev · 21/08/2026

Targeting the elements of the same row and same column; a classic. Demo: codepen.io/t_afif/full/... via @codepen.io

0102

CSS by T. Afif @css-only.dev · 20/08/2026

Move away, give me some space to grow! Demo: codepen.io/t_afif/full/... via @codepen.io

0100

CSS by T. Afif @css-only.dev · 19/08/2026

I think it was this quirk that made me learn the difference between "computed" and "used" values. stackoverflow.com/a/60109105/8...

A quote from the CSS Spec showing the difference between number and percentage usage with line-height

051

CSS by T. Afif @css-only.dev · 19/08/2026

And because no one will remember all the weird values, I made a small generator to get the code in no time. css-tip.com/text-box/

1529

CSS by T. Afif @css-only.dev · 19/08/2026

A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩 css-tip.com/hover-proxim... One fancy demo (among many) we can create using modern CSS.

3463

CSS by T. Afif @css-only.dev · 18/08/2026

An interactive demo showing how all the values adjust in real time as the grid is resized. codepen.io/t_afif/full/... via @codepen.io All the values are integers, so you can use counters to display them.

1599

CSS by T. Afif @css-only.dev · 17/08/2026

💡 CSS Tip! Using modern CSS, it is now easy to extract information from a responsive grid. You can get the number of columns, the number of rows, and item coordinates. css-tip.com/grid-informa... A handy code to save for (hopefully) the near future.

2718

CSS by T. Afif @css-only.dev · 07/08/2026

Hover Proximity (is this naming a thing, or did I just coin it?!) in pure CSS 👀 Another cool demo powered by modern CSS in progress

0674

CSS by T. Afif @css-only.dev · 06/08/2026

The same trick using border-image

The following CSS code:
.breakout-background {
border-image: image(#faa307) fill 0//0 100vw;
}

0323

CSS by T. Afif @css-only.dev · 05/08/2026

💡 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.

0354

CSS by T. Afif @css-only.dev · 01/08/2026

One of my favorite task is creating multi-line responsive ribbon shapes using "lh" and gradients! 😁 css-tip.com/multi-line-r... css-tip.com/multi-line-r...

141

CSS by T. Afif @css-only.dev · 29/07/2026

Yes, and you can simplify like below by using "," inside var() to avoid the empty init. but I'd rather use the supported methods instead of the progressive enhancement. We can create almost all the rounded shapes with shape() or gradients

140

CSS by T. Afif @css-only.dev · 29/07/2026

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

Rounding the corners of various CSS shapes (triangle, starburst and random shape)

3617

CSS by T. Afif @css-only.dev · 25/07/2026

Ok I got the idea. It reminds me a few clamp() I was using as "toggles" between two random values which is similar to your idea.

130

CSS by T. Afif @css-only.dev · 24/07/2026

Is there a way to apply the layout to all the pens? I want it to be always Right but it seems it's not a global setting. Even when making a template, it doesn't work.

110

CSS by T. Afif @css-only.dev · 21/07/2026

💡 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.

513421

CSS by T. Afif @css-only.dev · 07/07/2026

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/

1374

CSS by T. Afif @css-only.dev · 02/07/2026

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.

An element having text and gradient border.

4411

CSS by T. Afif @css-only.dev · 01/07/2026

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

0526

CSS by T. Afif @css-only.dev · 30/06/2026

To avoid any confusion, let's add a tooltip showing the current value. An ugly one that bounces in all directions! css-tip.com/wiggly-range... Now, the range slider is perfect, no one can say otherwise!

0778

CSS by T. Afif @css-only.dev · 26/06/2026

💡 CSS Tip! An old design pattern solved by a modern CSS feature. css-tip.com/responsive-s... Learn how Gap Decorations makes it easy to add a separator between items using simple code with no hacks. It works with different alignment settings, and you can easily adjust the shape as well.

17317

CSS by T. Afif @css-only.dev · 23/06/2026

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range... Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

1950642

CSS by T. Afif @css-only.dev · 20/06/2026

Spotted my avatar and my (silly) demo presented by @jakearchibald.com 👀 cssday.nl/2026/pix/pho... I am wondering what people are thinking at that moment? 😅

260

CSS by T. Afif @css-only.dev · 17/06/2026

Only two elements to better see what's going on. Demo: codepen.io/t_afif/full/... via @codepen.io

0203

CSS by T. Afif @css-only.dev · 16/06/2026

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

824321

CSS by T. Afif @css-only.dev · 15/06/2026

That's the name I want to avoid. It's a graph, yes, that's clear, but I am looking for the name people would use if they used that graph to create stuff like below.

300

CSS by T. Afif @css-only.dev · 15/06/2026

How do people call the diagram below? What's the most famous/common name for it?

A diagram with various elements linked with straight or curved lines (I am looking to name)

1021

CSS by T. Afif @css-only.dev · 10/06/2026

Working on another type of connection 👀 I think I have found a CSS cheating code "border-shape" 🤩

3323

CSS by T. Afif @css-only.dev · 02/06/2026

Probably not a bug at the end based on: www.w3.org/TR/css-value... I tried forcing a calculation and it doesn't work as well: codepen.io/t_afif/pen/v...

110

CSS by T. Afif @css-only.dev · 29/05/2026

Always satisfying with more elements! Demo: codepen.io/t_afif/full/... via @codepen.io Looks like the beginning of a physics course 🤓

1151

CSS by T. Afif @css-only.dev · 28/05/2026

What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by the modern features. CSS is awesome! 😍

713220