CSS by T. Afif :verified:

CSS stuff by Temani Afif

💡 https://css-tip.com
🧩 https://css-shape.com
💫 https://css-loaders.com
📝 https://css-articles.com
⚙️ https://css-generators.com
🎨 https://css-pattern.com
✨ https://css-only.art
🎮 https://css-games.com
❓ https://css-quizzes.com

I verified myself because I know I am a real person. You can trust me, I know who I am.

Support Me: https://support.temani-afif.com/
Github: https://github.com/Afif13/
Codepen: https://codepen.io/t_afif
🦋: https://bsky.app/profile/css-only.dev

Public Key

npub19q8mse6f2amuz0f88trxh333clfe8x0whv553laqh2ekp76nyy4sy05kmj

NIP-05 Address

[email protected]

Profile Code

nprofile1qqszsracvay4wa7p85nn43ntcccu05unn8htk22gl7st4vmqldfjz2cpzpmhxue69uhkummnw3ezuamfdejsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmc8azp2g

Publishing to

nostr.wine

relay.damus.io

nos.lol

Author Public Key

npub19q8mse6f2amuz0f88trxh333clfe8x0whv553laqh2ekp76nyy4sy05kmj

Show more details

Last Notes

2026-08-26 19:21:31 CEST

📝 New CSS Article!
Do you want to know how I made that cool hover effect? Read my latest article 👇
https://blog.master.dev/hover-proximity-using-modern-css/
I am showing you what programming* with CSS looks like when you combine the modern features!
*yes, I said the forbidden word
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/162/946/280/463/399/original/5d6279c2553c8138.mp4

2026-08-24 13:34:21 CEST

Did anyone already mention "Dark mode with spotLight"? No!? That's the only valid way.
Demo: https://codepen.io/t_afif/pen/YPZzrMP via :codepen: @npub1sf7…gl68
Debating about toggles? Well, I don't understand ...
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/150/268/132/121/255/original/50e9dfa77828bae1.mp4

2026-08-21 16:34:29 CEST

- reply

Targeting the elements of the same row and same column; a classic.
Demo: https://codepen.io/t_afif/full/WbRVvdz
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/133/991/191/692/213/original/9d528cc7ed5f7224.mp4

2026-08-20 15:45:32 CEST

- reply

Move away, give me some space to grow!
Demo: https://codepen.io/t_afif/full/YPNmXEq
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/128/132/438/917/480/original/0902531081e20288.mp4

2026-08-19 12:42:44 CEST

A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩
https://css-tip.com/hover-proximity/
One fancy demo (among many) we can create using modern CSS.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/121/743/734/068/967/original/2b62833a4ce1f0bd.mp4

2026-08-18 20:18:47 CEST

- reply

can be simulated for specific structure: https://css-tip.com/grid-information/
until better support check this: https://master.dev/blog/count-auto-fill-columns/

2026-08-18 12:16:23 CEST

- reply

An interactive demo showing how all the values adjust in real time as the grid is resized.
https://codepen.io/t_afif/full/vEgqgob
All the values are integers, so you can use counters to display them
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/115/988/592/846/118/original/3eab07c1cdacc344.mp4

2026-08-17 13:10:20 CEST

💡 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.
https://css-tip.com/grid-information/
A handy code to save for (hopefully) the near future.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/110/531/000/257/347/original/ccc43ff0d3617500.png

2026-08-15 11:47:58 CEST

- reply

Another (hacky) idea is to play with sticky position and negative offset combined with animation range.
If your element is always at the top we can easily know the range which is from "exit 0%" (at the top of the scroll container) to "exit X" where X is a random big length value.
demo: https://codepen.io/t_afif/pen/xbgNMXw?editors=1100

2026-08-15 11:27:04 CEST

- reply

With my technique you need to consider drop-shadow instead of text-shadow because overflow is mandatory on the h1 to be able to make it scrollable and get its height.
Also you need to manage two animation on the HTML element which is tricky.
Here is a quick demo: https://codepen.io/t_afif/pen/BypeMRY
The position is a bit off but I am sure you can easily fix that.

2026-07-29 13:21:14 CEST

💡 CSS Tip!
After corner-shape, shape(), and border-shape, another feature is available to play with: rounding polygons.
https://css-tip.com/rounded-shapes/
You create a polygon, add a radius value at the beginning, and you have a shape with rounded corners!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/002/980/285/594/981/original/988f0a495e28fe6d.png

2026-07-21 12:10:01 CEST

💡 CSS Tip!
Creating ASCII art is cool, but making it responsive is better! 🤩
https://css-tip.com/ascii-art/
Now it's possible using the new text-fit property. A simple code and you are done.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/957/417/035/904/445/original/bb6e598b06f9fdac.mp4

2026-07-08 12:38:38 CEST

📝 New CSS Article!
I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not.
https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/
This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!)
#CSS #HTML

2026-07-07 12:26:00 CEST

💡CSS Tip!
Create a responsive grid with a cool animation. Everything adjusts smoothly on resize or when adding/removing new items.
https://css-tip.com/animated-grid/
A CSS-only implementation with a few lines of code.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/878/206/249/939/167/original/63d1645c3a048548.mp4

2026-07-02 12:49:42 CEST

- reply

And guess what? You can combine border-area with text, and you get the gradient on both the border and the text! 👀
https://css-tip.com/background-clip/
Yes, background-clip accepts two values.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/849/966/211/048/409/original/02ac6482c8304433.png
https://cdn.masto.host/frontendsocial/media_attachments/files/116/849/967/568/450/369/original/c8b57ed0598d1c7b.png

2026-07-01 21:18:58 CEST

They just released :chrome: Google Chrome V150, and it comes with border-area (among many other cool things).
What's border-area? The magic value to create gradient borders easily.
https://css-tip.com/border-gradient/
Two lines of code and you are done! 🤩
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/846/327/507/462/527/original/ddfc8c8c3a8e930c.png
https://cdn.masto.host/frontendsocial/media_attachments/files/116/846/327/893/411/413/original/dbbe13837751b52d.png

2026-06-30 12:23:32 CEST

- reply

To avoid any confusion, let's add a tooltip showing the current value. An ugly one that bounces in all directions!
https://css-tip.com/wiggly-range-slider-2/
Now, the range slider is perfect, no one can say otherwise!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/838/556/374/879/988/original/7c6c9c89a3a1feed.mp4

2026-06-24 21:07:20 CEST

📝 New CSS Article!
I did a quick exploration of the new "Gap Decorations" thing, and I ended up doing a lot of fancy stuff except for decorating the gaps 😅
https://master.dev/blog/lets-play-with-gap-decorations/
Read my latest article to learn a lot of nice tricks around this feature.
#CSS #HTML

2026-06-23 12:53:46 CEST

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️
https://css-tip.com/wiggly-range-slider/
Another funny demo powered by border-shape, scroll-driven animations, and more
The HTML code? Only an input element (no extra code is needed)
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/799/030/160/035/073/original/62a81c0885870da8.mp4

2026-06-12 21:15:07 CEST

- reply

hero is a bit too much I guess 😅 but I am truly honored to be mentioned ... it also means I am somehow already at #cssday 😁 (hopefully one day it will be for real)

2026-05-29 12:30:25 CEST

- reply

Always satisfying with more elements!
Demo: https://codepen.io/t_afif/full/ZYBaxaX via :codepen: @npub1sf7…gl68
Looks like the beginning of a physics course 🤓
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/657/395/638/517/563/original/771e1c496cdf83e4.mp4

2026-05-28 13:19:38 CEST

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!? 👀
https://css-tip.com/bending-line/
Probably my new favorite demo, powered by the modern features. CSS is awesome! 😍
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/651/924/058/055/959/original/555285f15af7b158.mp4

2026-05-26 12:27:49 CEST

💡 CSS Tip!
Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩
https://css-tip.com/connected-circles-3/
A demo powered by the future of CSS (border-shape, if(), anchor position, etc). Update your Chrome and play with it!
Stay tuned for more complex connections 👀
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/640/397/399/123/561/original/53b7b252b645d092.mp4

2026-05-25 14:00:19 CEST

- reply

Don't miss my latest article about centering 👆
And while you are at it, explore how alignment works in CSS.
https://css-tip.com/explore/alignment/
It's the key to understanding how centering really works
#CSS #HTML

2026-05-22 17:07:01 CEST

Well, I wrote about centering in CSS (yes, centering), and you might learn something new.
https://css-tricks.com/the-state-of-css-centering-in-2026/
#CSS #HTML

2026-05-21 13:36:49 CEST

What we can do with modern CSS is impressive! 🤩
A cool demo is in progress. Stay tuned! 👀
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/612/356/002/484/054/original/33d6530d4b9facc9.mp4

2026-05-15 23:13:26 CEST

- reply

The second part is live!
https://frontendmasters.com/blog/how-to-control-infinite-css-animations-part-2-of-2/
Learn how to smoothly start/stop infinite animations and make them look more natural and realistic.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/580/652/590/569/250/original/75fb12944ba6ce30.mp4

2026-05-13 16:08:02 CEST

💡 CSS Tip!
Create an interactive image slider with speed control using a few lines of code and no image duplication.
https://css-tip.com/interactive-slider/
A CSS-only implementation powered by modern features (shape(), sibling-index()/count(), animation-composition, etc.)
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/567/643/587/224/796/original/cfd771c9c216190d.mp4

2026-05-08 23:37:39 CEST

📝 New CSS article!
I am exploring a few CSS tricks for controlling infinite animations. The first article is live.
https://frontendmasters.com/blog/how-to-control-infinite-css-animations-part-1-of-2/
You will be surprised, but it's all about features that are quite old and widely supported for a while (like animation-composition)
#CSS #HTML

2026-05-07 12:53:46 CEST

- reply

Another demo with an infinite marquee animation
https://codepen.io/t_afif/full/QwGjxPv via :codepen: @npub1sf7…gl68
Hover to accelerate, slow down, or change the direction.
#HTML #CSS
https://cdn.masto.host/frontendsocial/media_attachments/files/116/532/917/134/488/225/original/e305f74a45ab54a0.mp4

2026-05-06 15:56:38 CEST

💡 CSS Tip!
Do you want to control the speed of an infinite animation on hover (or any other interactions)? It's possible with a simple code.
https://css-tip.com/speed-control/
Accelerate, slow down, stop, move in the opposite direction. One CSS variable to set and it's done!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/527/973/381/973/570/original/449616ef3de3fb16.mp4

2026-04-26 14:11:01 CEST

When modern CSS pushes you to write code that looks strange but makes a lot of sense.
That's the good part of CSS. Always new stuff to learn and new mental models to unlock. You never get bored! 😁
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/470/933/509/911/088/original/e90f7eac13b0eaeb.png

2026-04-24 12:49:03 CEST

💡 CSS Tip!
You have the code of a CSS shape and you want its cutout version? Learn how to do it with a simple code.
https://css-tip.com/invert-shape/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/459/253/662/540/621/original/ea7aaf9b063bcdca.png

2026-04-22 22:37:18 CEST

- reply

The shapes were created with my Wavy Divider Generator, making the effect quite easy to implement.
https://css-generators.com/wavy-divider/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/450/277/398/217/527/original/9b3c624c565e61fd.mp4

2026-04-08 20:56:58 CEST

- reply

Example of shapes created with a single image element
Demo: https://codepen.io/t_afif/full/jEMvwyP via :codepen: @npub1sf7…gl68
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/370/608/318/612/334/original/a969eed14cb125e7.png

2026-04-08 13:45:23 CEST

💡 CSS Tip!
We've just had the release of :chrome: Chrome 147, which means border-shape was enabled by default! 👀
https://css-tip.com/border-shape/
Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/368/901/981/974/930/original/49f1eb785c15b502.png

2026-03-31 11:54:52 CEST

What's the best way to showcase modern CSS features? By making games!
This time it's the famous :chrome: Dino Game 🦖
https://css-tip.com/dino-game/
100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀
Don't search for the JS, there is none.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/323/166/436/967/042/original/deafda94bf11aa84.mp4

2024-12-01 16:48:43 CET

- reply

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