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

css_at_front-end.social@momostr.pink

Profile Code

nprofile1qqszsracvay4wa7p85nn43ntcccu05unn8htk22gl7st4vmqldfjz2cprpmhxue69uhhyetvv9ujumt0d4hhxarj9ecxjmntqyxhwumn8ghj77tpvf6jumt9he2jt2

Publishing to

relay.momostr.pink

yabu.me

nostr.now

Author Public Key

npub19q8mse6f2amuz0f88trxh333clfe8x0whv553laqh2ekp76nyy4sy05kmj

Show more details

Last Notes

2026-11-03 15:12:55 UTC

RE: https://mastodon.social/@csstricks/117553081888051087
📝 New CSS Article!
I decided to re-implement the :nth-child() selector using modern features because why not?
#CSS #HTML

2026-11-02 19:56:53 UTC

- reply

Maybe the connector below is more robust?
Still not...
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/548/604/117/856/409/original/93b4d4d8e488af2a.mp4

2026-11-02 11:45:20 UTC

Bending and stretching a line is good (https://css-tip.com/bending-line/), but let's try something more mechanical: a foldable Zig-Zag connector.
https://css-tip.com/zig-zag-connector/
Be careful, it's not as robust as a stretchy line, so don't ... too late, it's broken now 😣
A CSS-only low-quality connector 🫠
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/546/670/957/912/450/original/fbd9f9d6294d36d1.mp4

2026-10-30 14:37:58 UTC

📝 New CSS Article!
Learn how I combined Anchor Positioning, border-shape, and other modern CSS features to create the connection below.
https://blog.master.dev/two-circles-one-connection-and-border-shape/
That's the simplest example. Another article will cover more complex ones!
The future of CSS is awesome. 🤩
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/530/356/941/166/570/original/b0acb5ac829f2997.mp4

2026-10-28 11:29:20 UTC

💡 CSS Tip!
random() + shape() + confetti = fancy shape explosion 🎉
https://css-tip.com/shape-confetti/
A CSS-only fun (and useless) demo powered by modern features.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/518/295/648/118/523/original/98478232abfc9c6f.mp4

2026-10-26 13:07:58 UTC

Confetti Shape Explosion. Good? bad? 👀
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/507/358/951/277/045/original/8cd0d3db6aa912f6.mp4

2026-10-19 10:23:23 UTC

- reply

Would like to 😁 but I am limited to f(x)-like shapes with this CSS-only approach. The x-position of the thumb need to remain the same as the one of the initial slider

2026-10-19 10:16:40 UTC

More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value.
curve, wave, zig-zag, arc ... Which one do you prefer?
https://css-tip.com/shaped-range-slider/
0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/467/043/177/242/445/original/04b6230fdd1fbb13.mp4

2026-10-07 10:32:52 UTC

💡 CSS Tip!
Another cool shape that works well with random(): wavy dividers!
https://css-tip.com/random-wavy-shapes/
Each visitor gets their own wavy shape for a unique experience.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/399/163/168/658/185/original/e41e21363a05fc79.mp4

2026-10-05 13:36:47 UTC

📝 New CSS Article!
With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count().
Strange? Confusing? What the heck am I talking about?!
Read my latest article 👇
https://blog.master.dev/transferring-sibling-count-to-a-parent-element/
#CSS #HTML

2026-09-29 10:18:49 UTC

💡 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!
https://css-tip.com/children-count/
A hacky experiment powered by Scroll-Driven Animations.
How would you use it? Share your use cases 👇
#CSS #HTML

2026-09-26 21:39:05 UTC

- reply

a div or span or a random custom element (ex: <aaa>)

2026-09-26 21:26:31 UTC

a11y question: Let's suppose I have an empty html element somewhere on the page with 0 content, invisible*, having position:absolute (or fixed). It has no purpose in the HTML (only used for some CSS stuff).
Is it a good idea to add the "inert" attribute? Or should I do nothing?
* It may or may not have a size, but no style to make it visible.
#A11y #HTML

2026-09-22 10:31:27 UTC

💡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.
https://css-tip.com/random-blob/
You never see the same shape twice. A unique shape for a unique experience! 👀
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/314/221/242/323/778/original/71cd7dd087e2d596.mp4

2026-09-21 19:17:44 UTC

- reply

The OS has nothing to do with rendering a web page inside a browser. A browser is an application/software that runs in your OS and you can have many browsers (Chrome, FF, Edge, etc) or no browser.
The OS knows how to run a browser.
The browser knows how to run HTML/CSS

2026-09-21 10:23:40 UTC

- reply

What if your CSS file is broken or could not be loaded?
We need some backup/default CSS to be able to see and understand the content of the page

2026-09-18 10:14:19 UTC

RE: https://front-end.social/@css/117234924902143932
border-shape is leading the votes with 181 thumbs up right now! 👀
Can we do the same for if()? Go vote for it as well: https://github.com/web-platform-tests/interop/issues/1343
Let's make it part of Interop 2027!
#CSS #HTML
#note1eqr…vu5e

2026-09-17 10:45:47 UTC

💡 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! 👀
https://css-tip.com/gradient-shapes/
Save the code for the future (a near future!)
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/285/923/314/954/842/original/339c6c42a0ded505.png
https://cdn.masto.host/frontendsocial/media_attachments/files/117/285/931/731/363/555/original/8d324c9d148ceb53.png

2026-09-16 20:48:04 UTC

📝 New CSS Article!
Learn how I used Scroll-Driven Animations and other modern features to extract various information from a CSS grid.
https://blog.master.dev/extracting-grid-information-using-css/
Another article to show that CSS is more than a simple set of properties/values.
#CSS #HTML

2026-09-09 19:42:21 UTC

- reply

RE: https://front-end.social/@css/117234924902143932
If you want such demo to be well supported, give your vote 👇
#note1eqr…vu5e

2026-09-09 11:09:06 UTC

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.
https://css-tip.com/node-connection-2/
Look how the lines get distorted! 👀
Another cool demo powered by border-shape, anchor position, and more!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/240/756/062/429/798/original/8d0e702aa5642079.mp4

2026-09-08 10:23:09 UTC

Go vote for the border-shape feature. It should be part of the Interop 2027!
I have a lot of cool demos waiting for better browser support (that I will share anyway in 2026 😅)
https://github.com/web-platform-tests/interop/issues/1371
#CSS #HTML

2026-09-02 09:41:53 UTC

- reply

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
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/200/785/661/721/042/original/d98eb03161175d7a.png

2026-09-01 10:34:38 UTC

Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀
https://css-tip.com/grid-information-2/
A fancy demo powered by Scroll-Driven Animations and more!
All the values are calculated and displayed using only CSS.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/195/321/225/057/387/original/e0ec53b5e45cfd14.png

2026-09-01 10:06:14 UTC

- reply

we already have a property that combine both "grid-area"

2026-08-31 22:03:02 UTC

- reply

it's not "col", it's "grid-col" and there is a context so it's impossible to be an abbrev of any word you listed because none of them make sense in that context.
btw, we use "flex" which is the abbrev of "flexible"

2026-08-31 21:14:12 UTC

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 🙃
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/117/192/183/131/294/888/original/ae7b71117b3ff633.png

2026-08-26 17:21:31 UTC

📝 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 11:34:21 UTC

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 14:34:29 UTC

- 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 13:45:32 UTC

- 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 10:42:44 UTC

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 18:18:47 UTC

- 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 10:16:23 UTC

- 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 11:10:20 UTC

💡 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 09:47:58 UTC

- 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 09:27:04 UTC

- 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 11:21:14 UTC

💡 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 10:10:01 UTC

💡 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 10:38:38 UTC

📝 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 10:26:00 UTC

💡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 10:49:42 UTC

- 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 19:18:58 UTC

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 10:23:32 UTC

- 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 19:07:20 UTC

📝 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 10:53:46 UTC

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 19:15:07 UTC

- 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 10:30:25 UTC

- 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 11:19:38 UTC

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 10:27:49 UTC

💡 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 12:00:19 UTC

- 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 15:07:01 UTC

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 11:36:49 UTC

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 21:13:26 UTC

- 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 14:08:02 UTC

💡 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 21:37:39 UTC

📝 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 10:53:46 UTC

- 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 13:56:38 UTC

💡 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 12:11:01 UTC

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 10:49:03 UTC

💡 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 20:37:18 UTC

- 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-22 10:55:57 UTC

💡 CSS Tip!
Create a Sticky Header that "sticks"!
https://css-tip.com/sticky-header/
A fancy effect powered by Scroll-Driven Animations and shape().
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/447/972/381/741/260/original/43c2014d6df4d470.mp4

2026-04-13 11:44:34 UTC

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS.
https://css-generators.com/svg-to-css/
It's a single-element implementation with a single shape() value!
You can also have the border-only version using border-shape.
#CSS #HTML #SVG
https://cdn.masto.host/frontendsocial/media_attachments/files/116/397/213/911/669/695/original/b678e9c12bd5edf1.mp4

2026-04-10 10:08:15 UTC

- reply

Straight line as a divider: Boring! 🥱
Random wavy line as a divider: Yes, please! 🤩
https://css-generators.com/wavy-divider/
Another CSS generator ready for border-shape!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/379/841/758/650/076/original/d700c89c7ebbb940.mp4

2026-04-09 13:34:17 UTC

- reply

My blob generator is ready to give you border-only blob shapes.
https://css-generators.com/blob/
Update your Chrome and give it a try!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/375/000/479/438/499/original/da2c6514be4b3321.mp4

2026-04-08 18:56:58 UTC

- 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 11:45:23 UTC

💡 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-04-06 10:15:11 UTC

Who found the easter egg in my CSS-only Dino game? 🥚
A "rocket mode" to fly above everything! 👀
Give it a try: https://css-tip.com/dino-game/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/357/232/438/877/294/original/702884910e81a88e.mp4

2026-04-04 14:53:23 UTC

Bending a straight line using pure CSS?! 👀
Another cool demo in progress powered by border-shape. It's coming to :chrome: Chrome next week! 🤩
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/347/004/347/166/316/original/a9b2bd7041a5b41b.mp4

2026-04-02 11:07:05 UTC

💡 CSS Tip!
A sliding liquid reveal effect, because why not! 🫗
https://css-tip.com/sliding-liquid/
Another demo powered by shape() and made easy with my online generators: https://css-generators.com/wavy-divider/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/334/779/481/847/309/original/4182f0fc9578e466.mp4

2026-03-31 09:54:52 UTC

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

2026-03-27 11:58:50 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/301/010/649/694/379/original/e991bd1d0123156f.mp4

2026-03-25 11:25:14 UTC

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 @npub1szd…5a79 for the insights
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/289/555/730/065/608/original/2ece57e75605c3a7.png

2026-03-23 19:50:31 UTC

📝 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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/280/216/803/699/885/original/56f0a6a87bc7c5f8.mp4

2026-03-23 10:40:48 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/278/052/990/208/988/original/5b7f11c9539d6c6e.mp4

2026-03-18 10:42:31 UTC

💡 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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/249/749/060/505/075/original/3b49c9169706d6f1.mp4

2026-03-15 12:46:34 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/233/248/920/815/568/original/fecb94cfbe5c9a26.png

2026-03-12 12:47:01 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/216/269/840/367/514/original/4b1ebcdf85618ed5.mp4

2026-03-09 18:30:43 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/200/636/528/628/665/original/6a4edfccf5cef333.mp4

2026-03-09 11:34:01 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/198/995/459/561/095/original/d7cabc975a787e8c.mp4

2026-03-01 11:53:08 UTC

- reply

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/153/774/798/872/710/original/75cbc6c319bcbf76.mp4

2026-02-26 13:11:34 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/137/094/129/935/824/original/78cdbfa830041174.mp4

2026-02-22 12:54:11 UTC

Playing with shape() and border-shape 👀
Cool demos in progress ⌛
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/114/377/990/595/665/original/b16246f34f3764fc.mp4

2026-02-20 11:50:02 UTC

- reply

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
https://cdn.masto.host/frontendsocial/media_attachments/files/116/102/800/194/145/422/original/1512fa019b11efbd.png

2026-02-19 10:12:04 UTC

💡 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

2026-01-26 10:57:18 UTC

I was lucky to be a privileged tester of :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 @npub1t0w…zgs2 and the entire team!
#CSS #HTML #web
https://cdn.masto.host/frontendsocial/media_attachments/files/115/961/037/428/157/856/original/51ad3df4dd18a689.mp4

2025-12-30 08:43:26 UTC

- reply

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.

2025-11-27 19:54:29 UTC

- reply

The classic Breadcrumb Navigation using the above technique.
Demo: https://codepen.io/t_afif/full/ZYWoJvp via :codepen: @npub1sf7…gl68
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/115/623/405/045/627/673/original/78618ca12e60d160.png

2025-11-27 12:12:17 UTC

💡 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
https://cdn.masto.host/frontendsocial/media_attachments/files/115/621/581/997/898/937/original/2ed3dd4589ab2801.mp4

2025-10-17 21:07:37 UTC

- reply

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.

2025-10-17 21:06:07 UTC

- reply

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

2025-10-17 20:58:28 UTC

- reply

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.

2025-10-12 23:42:35 UTC

- reply

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

2025-10-12 23:39:31 UTC

- reply

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/

2025-09-03 00:57:07 UTC

- reply

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

2025-05-19 20:13:26 UTC

- reply

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.

2025-05-19 19:04:02 UTC

- reply

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)

2025-05-19 15:14:32 UTC

📝 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
https://cdn.masto.host/frontendsocial/media_attachments/files/114/535/144/027/338/326/original/34b9d7497e68b8a0.mp4

2025-04-21 09:39:04 UTC

- reply

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
https://cdn.masto.host/frontendsocial/media_attachments/files/114/375/281/491/145/365/original/4c44b90896b0d29b.mp4

2025-04-17 10:34:51 UTC

- reply

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
https://cdn.masto.host/frontendsocial/media_attachments/files/114/352/830/956/038/575/original/280bbcb6cb5f79dd.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/352/835/188/018/157/original/fa9c9315a27f9adb.png