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.

Public Key

npub1w9xzec0p0vusgvpu3wsxf4qcma7tt2wkz8jj2gf4rnvjns59zvvslwpcdf

NIP-05 Address

[email protected]

Profile Code

nprofile1qqs8znpvu8shkwgyxq7ghgry6svd7l9448tpref9yy63ekffc2z3xxgpz4mhxue69uhhyetvv9ujuerfw36x7tnsw43qcu4hqv

Publishing to

relay.ditto.pub

Author Public Key

npub1w9xzec0p0vusgvpu3wsxf4qcma7tt2wkz8jj2gf4rnvjns59zvvslwpcdf

Show more details

Last Notes

2026-02-03 10:06:42 GMT

A CSS-only elastic hover effect, because why not?
https://css-tip.com/elastic-hover/
A chrome-only experiment using shape(), sibling-index(), linear(), etc.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/116/006/133/988/728/157/original/43df6ff46dd246fd.mp4

2025-11-07 14:00:37 GMT

- reply

@nprofile…cqel bizarre, tu peux essayer overflow: hidden sur .main ca devrait faire pareil que min-width: 0 mais ca m'a l'air d'un bug coté mac ce truc (même sur Edge ca marche).

2025-11-07 13:54:00 GMT

- reply

@nprofile…cqel ca devrait marcher sur Firefox (c'est le cas pour moi) sinon ajoute aussi min-width: 0 à .cards ... l'imbrication de plusieurs grid peut parfois être problématique.
Ton souci est lié à la config par défaut du minimum size qui empêche les éléments de devenir trop petit: https://www.w3.org/TR/css-grid-1/#min-size-auto

2025-11-07 13:39:35 GMT

- reply

@nprofile…cqel ajoute min-width:0 a .main

2025-10-09 08:54:08 GMT

- reply

@nprofile…6nrq it has 64 units 😅
https://github.com/csstree/csstree/blob/master/lib/lexer/units.js

2025-08-27 11:29:27 GMT

Working on a new type of content, stay tuned 🤞
https://css-tip.com/explore
#CSS #HTML

2025-08-20 14:38:51 GMT

- reply

@nprofile…fekn If we consider the semantic, your "Section Title - Level 2" should be a "h2" and not "h1".
If you have different level of nesting you should change the level of the heading as well.

2025-08-19 10:47:12 GMT

A circular gallery of images, because why not!
https://css-tip.com/circular-gallery/
Another funny use case of sibling-index(). Less than 10 CSS declarations to correctly place up to 60 images!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/115/055/017/602/767/863/original/5f2ca134962712ba.png

2025-08-15 20:55:24 GMT

- reply

@nprofile…ekdt wow, I am surprised to see this.
Well, that example simply doesn't make sense and is clearly wrong.
You get 2 because there is a script injected inside the body making them 2 siblings and yes we don't have child-count yet (although we can hack it for particular cases)

2025-08-15 08:11:12 GMT

- reply

@nprofile…ekdt an obscure MDN definition ...
take the Spec: https://drafts.csswg.org/css-values-5/#funcdef-sibling-count
> The sibling-count() functional notation represents, as an <integer>, the total number of child elements in the parent of the element on which the notation is used.
So yes it returns the total number of "li" inside "ul" but the "li" elements get the value (the "of the element" part of the definition).
Not an intuitive definition but you will figure out when trying it.

2025-08-14 22:45:03 GMT

- reply

@nprofile…ekdt A few notes:
sibling-count() will not count direct child but siblings so if you apply it to container, you will get 1 because container is alone (and not 5 the number of child)
Also you can have range testing using if() with some calculation, I am doing something similar here: https://frontendmasters.com/blog/custom-progress-element-using-the-attr-function/
finally, better use > inside :has() to make sure you count the direct child and not any descendant (I have a generator for this: https://css-tip.com/quantity-queries/)

2025-08-14 18:52:56 GMT

- reply

@nprofile…h328 what features are you referring to?
And yes, for the media() part, we should be able to have custom properties since technically we can make it work (like this trick)

2025-08-14 09:51:37 GMT

💡 CSS Tip!
Similar to the :nth-child() trick, we can implement media queries using if() and calculation!
https://css-tip.com/dynamic-queries/
Why reinvent the wheel? With this trick, you can update the width value on the fly (using variables for example). You cannot do it with native queries.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/115/026/492/882/737/904/original/7330038e99c8a791.png

2025-08-07 10:23:27 GMT

💡 CSS Tip!
How would you create the below animation? A complex keyframes? A different delay for each item?
Thanks to modern CSS, we can do it with a simple and flexible code.
https://css-tip.com/sequential-animations/
No delays, no magic numbers, and it works with any number of items.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/986/981/562/639/867/original/3f6699183cd24ec8.mp4

2025-08-06 19:14:56 GMT

- reply

@nprofile…yg6p Or:
& {
height: 100%;
display: grid;
place-content: center;
}

2025-08-05 09:58:27 GMT

- reply

@nprofile…j5a3 Also let's stop brining accessibility to everything.
The article is "accessible" and everyone can easily read it and understand what the code is doing and the purpose of the new properties.
I am not promoting the use of marquee elements on production and never claimed they are accessible.
a11y, UI, UX, semantic, etc are all out of the scope here. The article is explaining some CSS, that's all.

2025-08-05 09:45:57 GMT

- reply

@nprofile…j5a3 it seems you didn't read the article at all because from the first sentence I am linking to another article to create the same component with better support
And this article is about exploring new CSS features, The goal is to share how we can use "the future of CSS " to achieve stuff. The lack of support doesn't make any sense here since the article is about those properties.
I am not aiming to build a marquee. I am using it as a "demo" (not as a product) to explore those new properties.

2025-08-05 08:53:55 GMT

- reply

@nprofile…j5a3 well, there is a clear notice in the article ...
https://cdn.masto.host/frontendsocial/media_attachments/files/114/975/311/452/408/422/original/54d7224f40ad7358.png

2025-08-04 19:01:50 GMT

📝 New CSS Article!
Do you want to have an overview of what modern CSS can do? Check my latest article
https://frontendmasters.com/blog/infinite-marquee-animation-using-modern-css/
Learn how I made that infinite marquee animation with less than 10 lines of CSS using shape(), sibling-index(), and more!
#CSS #HTML

2025-07-29 11:04:04 GMT

💡 CSS Tip!
Create an infinite logo marquee using modern CSS and less than 10 lines of code.
https://css-tip.com/logo-marquee/
Where's the novelty, you might ask? It's responsive, works with any number of images, doesn't rely on magic numbers, and you can easily control it using CSS variables.
Another use case for modern CSS features (shape(), sibling-index(), sibling-count(), etc).
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/936/162/696/643/892/original/48814888fd132ff0.mp4

2025-07-18 09:41:32 GMT

- reply

We can also have a nice entry animation by adding the following code:
```
img {
transition: 1s 1s;
@starting-style {
offset: circle(0px) 0% 0deg;
}
}
```
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/873/570/056/241/233/original/eba1c227ba50a2b3.mp4

2025-07-17 19:20:54 GMT

- reply

Here is a demo where you can add/remove images and see how they align perfectly.
Demo: https://codepen.io/t_afif/full/jEbbLZb via :codepen: @nprofile…nmhh
As a bonus, we can have a nice animation by adding a transition to the offset property.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/870/189/201/955/434/original/019de81d082545d5.mp4

2025-07-17 14:14:21 GMT

💡 CSS Tip!
Do you know that you can use offset() to place images around a circle? And if you combine it with the new sibling-*() functions, you can have a perfect placement that works for any number of elements!
https://css-tip.com/images-circle/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/868/939/049/186/524/original/829d54514226c9b9.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/868/954/581/865/401/original/4db34e795cfcc737.png

2025-07-15 09:13:59 GMT

- reply

We can also create a custom function and make the code easier to use.
⚠️ No browser support yet, but it's on the way! ⚠️
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/856/480/961/010/039/original/aea881ed15a7bba1.png

2025-07-14 10:56:20 GMT

💡 CSS Tip!
Using modern CSS features such as sibling-index() and if(), you can re-create the :nth-child(An + B) selector.
https://css-tip.com/nth-child/
Why? To easily update A and B since now they are variables! I know some of you are in the team: "How to update the values of nth-child() with CSS ?!"
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/851/172/206/917/526/original/0b711b8d90cb6fee.png

2025-07-10 10:30:53 GMT

💡 CSS Tip!
Because the new sibling-*() functions are verbose and sibling-index() is 1-indexed, I wrote my own functions!
https://css-tip.com/element-index/
Less characters to type when writing complex formulas.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/828/469/939/663/582/original/8b10e8b09c9acea6.png

2025-07-09 22:36:47 GMT

- reply

@nprofile…2vwr it does make sense.
In math, there is the "least positive remainder" and the "least absolute remainder". The latter can be negative and can lead to a smaller magnitude which is useful in many calculation.

2025-07-09 21:18:30 GMT

- reply

@nprofile…2vwr not really. In CSS, we have rem() and mod() and both can lead to negative results based on the sign of the arguments.
more detail here: https://drafts.csswg.org/css-values/#round-func
Even in other languages, the reminder is not always positive.
-11 % 2 in JS will result in -1 (same sign as -11)

2025-07-09 21:04:04 GMT

- reply

@nprofile…2vwr that's what the spec is saying but I have been playing with some complex formula that gave me unexpected results so I need to be sure before going crazy.

2025-07-09 20:57:54 GMT

What should be the result of the below formulas in #CSS
mod(0,-2)
mod(2,-2)
mod(4,-2)
Chrome said: -2 0 -2
Firefox said: 0 0 0
I suppose chrome is wrong since -2 should be excluded from the range of the results (based on the Spec), right?

2025-07-09 11:20:33 GMT

Playing with modern CSS (sibling-index(), sibling-count(), @stating-style, @property, mask, math, etc) 🤩
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/823/001/199/373/014/original/91c849d5f53fef12.mp4

2025-07-07 18:39:20 GMT

📝 New CSS Article!
Closing this series with a fourth part where I am exploring two more shape() commands.
https://css-tricks.com/better-css-shapes-using-shape-part-4-close-and-move/
This powerful feature will soon be available in all the browsers so don't miss the opportunity to learn about it and master it!
#HTML #CSS

2025-07-03 18:49:07 GMT

- reply

@nprofile…2r82 @nprofile…9vce
> it doesn't have to be that way. That is a choice made by the designers.
You are questioning the decision of a whole language here because (again) it's not a recent choice made by the designers. It was designed to work that way since almost 3 decades now.
CSS is not (and will never be) a set of ordered instructions but a set of declarations where the order doesn't matter.

2025-07-03 15:56:04 GMT

- reply

@nprofile…2r82 @nprofile…9vce It's not something new and weird. That's the nature of CSS, it's a declarative language.
The logic you write inside a function is not different from the logic you write outside a function.
Without functions, you can write the below and it works as well because that's how CSS works.
https://cdn.masto.host/frontendsocial/media_attachments/files/114/790/113/641/271/833/original/2129c22ba9b1f972.png

2025-07-03 15:04:51 GMT

CSS Functions will soon be available, and it's time to confuse JS developers (and maybe backend developers) a bit.
No, they are not the same as in JS. Like with CSS properties, the order inside doesn't matter and we can write everything in reverse. 🙃
Demo: https://codepen.io/t_afif/pen/MYwMaYE via @nprofile…nmhh (Chrome-only with experimental flag enabled)
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/789/907/270/887/179/original/8d380693048025c5.png

2025-07-01 10:14:28 GMT

💡 CSS Tip!
You created a CSS shape using shape(), and you want to invert it? Easy! With a few lines of code, you have both the main shape and its cut-out version.
https://css-tip.com/invert-shape/
As a bonus, you can also control the space around the inverted shape.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/777/422/552/092/666/original/a72d91e53aef955b.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/777/427/918/741/448/original/d32d4c96b0757415.png

2025-06-29 08:46:20 GMT

- reply

@nprofile…fp84 they said "don't reinvent the wheel" when that's what they are doing 😅

2025-06-26 08:19:07 GMT

- reply

@nprofile…ql45 There is no need for a third iteration because the only value that we cannot compute initially is the percentage so it fall to auto to be able to find the parent size and then we move forward. We don't get back to compute the parent size again.
btw, I am using the word "iteration" as an easy term to simply the explanation. The whole complex algorithm is detailed here: https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contribution

2025-06-25 19:54:41 GMT

- reply

@nprofile…ql45 not really a bug but how percentage works. The 100% inside min() need a reference and your parent is a shrink-to-fit element (inline-flex) so max-width will first compute to auto to find the parent width and on a second iteration the browser will use the real max-width.
And it's not all the available space, it's only the space needed for the text without max-width.
https://codepen.io/t_afif/pen/ZYGwWEx?editors=1100

2025-06-25 08:43:32 GMT

- reply

@nprofile…09s2 shape() is not supported

2025-06-24 10:23:57 GMT

Recreating the classic 3 dots loader using shape() because why not. Powered by @property and CSS variables
https://css-tip.com/dots-loader/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/737/847/950/066/398/original/feaa02811d0528e9.mp4

2025-06-18 18:35:36 GMT

📝 New CSS Article!
Guess who's writing again about CSS shapes? 🫣
This time, I am exploring the corner-shape property. A new tool to easily draw shapes.
https://frontendmasters.com/blog/drawing-css-shapes-using-corner-shape/
⚠️ No browser support yet but a good opportunity to know about this powerful feature and get ready for it!
#CSS #HTML

2025-06-12 11:02:49 GMT

💡 CSS Tip!
Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩
https://css-tip.com/hexagon/
The magic? The new corner-shape property!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/670/031/550/823/018/original/addaf544048a333a.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/670/037/987/738/411/original/fed72c6a72fd0405.png

2025-06-10 11:39:44 GMT

- reply

@nprofile…ee93 sometimes we want the content to remain centered when it is bigger especially when the overflow is visible (the default value)

2025-06-10 11:05:11 GMT

💡 CSS Tip!
Do you know safe alignment? It's when you make sure your overflowing content is always fully accessible on scroll regardless of the alignment configuration.
https://css-tip.com/safe-align/
It's not something new but you are probably not aware about it.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/658/734/410/637/971/original/11ce557cde25a48a.mp4

2025-06-06 19:18:26 GMT

- reply

This makes 5 articles about shape() in one month!
Find them all here 👉 https://css-articles.com/
Let's hope Firefox will soon join the game before I write more 🫣
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/638/027/853/893/340/original/3dc9d7156633611e.png

2025-06-06 15:21:36 GMT

📝 New CSS Article!
Ready for the third part? This time, I am exploring the curve command and how you can easily round the corner of any shape!
https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/
#CSS #HTML

2025-06-04 12:56:15 GMT

Combining all the #cssday speakers into one mesmerizing animation 😵‍💫
Demo: https://codepen.io/t_afif/full/dPoOdeP via :codepen: @nprofile…nmhh
Chrome-only powered by modern features (shape(), sibling-index()/count(), @property, has(), and more!)
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/625/190/020/241/415/original/79a0f06a5a3e10cd.mp4

2025-06-02 09:54:37 GMT

💡 CSS Tip!
Excited about the new if() function? Learn how to correctly use it before facing a lot of issues (and headaches).
https://css-tip.com/inline-if/
The code below looks straightforward, but there is a hidden gotcha! 🤨
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/613/153/303/890/418/original/e0c325443f169977.png

2025-05-30 18:39:26 GMT

📝 New CSS Article!
The fun continues using shape()!
For this second part, we are drawing more CSS shapes while exploring the arc command. It's a very tricky command if you don't fully understand it.
https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/
#CSS #HTML

2025-05-27 12:09:10 GMT

shape() + Anchor Positioning + some magic 🪄
Demo: https://codepen.io/t_afif/full/PwqwOYz via :codepen: @nprofile…nmhh
A CSS-only fancy effect for this week #CodePenChallenge
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/579/715/409/454/404/original/b788d5cfde5934dc.mp4

2025-05-23 18:45:04 GMT

📝 New CSS Article!
It's me again exploring the new shape() function! ⭐
This time, I wrote a series of articles to help you understand this new and powerful tool and the first part is live 👇
https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/
#CSS #HTML

2025-05-22 20:05:41 GMT

💡CSS Tip!
Give a nice visual touch to your broken images. Get rid of the default browser rendering and add your own custom message using CSS.
https://css-tip.com/broken-image/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/553/269/959/104/375/original/71073357c4b59dca.mp4

2025-05-21 10:37:19 GMT

- reply

Always better with some animation, right?
Demo: https://codepen.io/t_afif/full/azzeOVo via :codepen: @nprofile…nmhh
Keyframes? No, there is no keyframes in the demo 😉
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/545/380/174/544/248/original/4db20d3c191e2ce2.mp4

2025-05-20 10:32:36 GMT

💡 CSS Tip!
Create an arc shape with rounded edges using shape() and arc commands. Another shape made easy using shape() (I know, it's a lot of "shape" in the post 😅)
https://css-tip.com/arc-shape-rounded/
And look at that if() statement 👀
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/539/682/566/364/619/original/1ff01261ae626875.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/539/684/364/492/460/original/09f4784fbfeda957.png

2025-05-19 15:14:32 GMT

📝 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-05-13 18:25:29 GMT

- reply

@nprofile…p6y9 you may like this little tool: https://css-tip.com/quantity-queries/

2025-05-13 10:59:25 GMT

📝 New CSS Article!
My first article about using shape() is live. I am officially a shape() spammer so get ready 🫣
https://frontendmasters.com/blog/creating-flower-shapes-using-clip-path-shape/
Learn the "arc" command by creating flower-like shapes.
#CSS #HTML

2025-05-12 19:32:54 GMT

- reply

@nprofile…x32u They are "shapes" not "images". A shape you can apply to an image or any other element depending on your context.
I am using some famous logos as examples to illustrate the complexity but the main purpose is to transform an SVG path into a CSS shape. There is no accessibility issue at this step.

2025-05-12 11:26:17 GMT

- reply

@nprofile…ee93 Too many benefits.
One example (among many I shared and I will be sharing in the future): https://codepen.io/t_afif/pen/myydVbr
You cannot do it with SVG (or it will be very hard and not flexible)

2025-05-12 09:48:40 GMT

⚙️ New CSS Generator!
Save this link for the future. A tool to easily convert any SVG shape into a CSS one in no time. Powered by the new shape() function! 🤩
https://css-generators.com/svg-to-css/
✅ Single-element
✅ Responsive
✅ No more ViewBox headaches
#CSS #HTML

2025-05-07 19:35:02 GMT

Three @nprofile…nmhh spark in a row all about using the new shape() 🥳
https://codepen.io/spark
And a new title unlocked: "CSS shape expert" 🤓
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/468/206/562/299/852/original/c05cc11f475fd629.png

2025-05-06 20:13:29 GMT

- reply

@nprofile…hs3a there will be one pretty soon 😉

2025-05-06 19:39:40 GMT

- reply

And here is the CSS logo made with the shape() function.
Demo: https://codepen.io/t_afif/full/JooZWMq via :codepen: @nprofile…nmhh
Take a deep breath before looking at the code 🫣
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/462/578/012/176/438/original/71e2fbb369dbc9a6.png

2025-05-05 13:37:48 GMT

The @nprofile…nmhh logo using the new shape() function.
https://codepen.io/t_afif/full/JoovLam
Do you think SVG is hard? Wait until this beast becomes widely supported 😈
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/455/470/349/131/579/original/b96fb7e9664b1230.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/455/474/690/075/452/original/eea5222d6f1ecbcf.png

2025-05-02 12:15:09 GMT

Let's play a CSS game.
Your HTML code is nothing but a random text inside the body. What is the smallest code to center it horizontally and vertically? (hacky code allowed!)
Here is my attempt: 1 selector, 2 properties, 47 characters (minified)
Demo: https://codepen.io/t_afif/pen/MYYQRZg via
:codepen: @nprofile…nmhh
Can you find shorter?
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/438/153/710/193/757/original/e04719d0d31839f1.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/438/154/038/688/636/original/95cacdec69c203f2.png

2025-04-29 10:31:24 GMT

- reply

Look at that bouncing blob shape! 👀
https://css-tip.com/blob-hover/
Another cool effect using the new shape() function!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/420/779/839/335/111/original/61907ce71dc3ab99.mp4

2025-04-28 10:19:02 GMT

⚙️ New CSS Generator
It's finally possible. A blob shape using only CSS! 🤩
https://css-generators.com/blob/
Play with the setting and get a cool shape in no time.
✅ Single element (works with images)
✅ One line of code
✅ Responsive
⚠️ Limited support (Chrome and Safari for now) ⚠️
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/415/071/654/204/643/original/780501108a363b1d.mp4

2025-04-24 14:23:42 GMT

Blob in progress! Stay tuned 👀
They are finally possible using only CSS (no SVG and no Canvas)
How? The new shape() function!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/393/376/542/488/537/original/5c4efaf124ed3bd5.png

2025-04-23 11:09:17 GMT

Another shape made easy using the new shape() function.
https://css-tip.com/heart/
I think I just found my new favorite CSS feature. 😍
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/386/943/484/549/799/original/045de33aeaed9b74.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/386/946/686/721/681/original/82a4d299b5122797.png

2025-04-22 11:20:52 GMT

Another shape with rounded corners using shape()!
This time it's an arrow-like box. A single-element responsive implementation easy to adjust using CSS variables.
https://css-tip.com/arrow-like-box/
A follow up to a post by @nprofile…hjan (cc @nprofile…4awx )
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/381/328/816/841/771/original/b83e45e596646390.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/381/333/044/359/427/original/eed35c024054a51d.png

2025-04-21 09:39:04 GMT

- 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 GMT

- 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

2025-04-16 11:01:09 GMT

💡 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
https://cdn.masto.host/frontendsocial/media_attachments/files/114/347/225/490/098/709/original/4dd3a08d3d25fb6d.mp4

2025-04-15 11:47:43 GMT

If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work!
Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.
https://css-tip.com/advertise/
#CSS #HTML

2025-04-14 19:23:27 GMT

- reply

I have made a small interactive demo to better see how flex-wrap affects the alignment and also see the difference between align-content and align-items.
Demo: https://codepen.io/t_afif/full/EaxBevN via @nprofile…nmhh
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/337/943/860/012/005/original/b731a3b25cedaf6c.mp4

2025-04-14 10:59:21 GMT

Do you know the flex-wrap property? It allows flex items to wrap but it has another "secret" behavior not related to wrapping.
Many are not aware of this hidden functionality but it is never too late to learn about it!
https://css-tip.com/flex-wrap/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/335/950/099/907/742/original/22163f1173a57ce3.png

2025-04-09 20:25:02 GMT

📝 New CSS Article!
Excited about the new attr() function? Learn how I am using it to style the native progress element with a few lines of CSS. It's the article where I using if() as well 😁
https://frontendmasters.com/blog/custom-progress-element-using-the-attr-function/
#CSS #HTML

2025-04-09 15:59:14 GMT

Bouncy Range Slider!
Demo: https://codepen.io/t_afif/full/ogNRWMN via @CodePen
A funny (and useless) CSS-only experimentation using modern features.
⚠️ Chrome-only ⚠️
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/308/827/764/932/466/original/8298323fb9289662.mp4

2025-04-08 21:51:11 GMT

- reply

@nprofile…7ze2 I know but let's attract the "CSS is not a bla bla" people 🤫

2025-04-08 21:02:30 GMT

I just wrote my first if() in CSS combined with other modern stuff.
Looks like I am programming with CSS?!! 🤓
A new article coming soon...
#CSS
https://cdn.masto.host/frontendsocial/media_attachments/files/114/304/355/855/392/335/original/29c943b6949c7a87.png

2025-04-03 19:07:14 GMT

- reply

@nprofile…lfe5 Here is how I see it: https://codepen.io/t_afif/pen/qEBggOE
For the gradient border we will soon have something new: https://css-tip.com/border-gradient/

2025-04-03 12:16:42 GMT

- reply

@nprofile…lfe5 I suppose you are looking for the glass effect. It should be possible using: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

2025-04-02 15:18:24 GMT

- reply

@nprofile…hs3a don't ask me about Safari 😅

2025-04-02 15:14:28 GMT

- reply

@nprofile…nkhr it's common to rely on the "em" unit to define size of various stuff (padding, radius, etc) and if the font-size is not an integer we may get some visual glitches

2025-04-02 15:09:08 GMT

💡 CSS Tip!
Use round() and clamp() to create a fluid typography with discrete values. No more rounding issues and font-size equal to 18.12596px!
https://css-tip.com/fluid-typography/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/268/992/950/536/207/original/eb8050f0c51b0114.png

2025-03-27 22:14:04 GMT

- reply

@nprofile…ekdt no need any credit for this, I did nothing 😅
but I think they have to correct this link: https://developer.mozilla.org/en-US/docs/Web/CSS/@property/initial-value because they are using "rem" as an example and it's miss leading.

2025-03-27 22:11:12 GMT

- reply

@nprofile…ekdt yes do it. The more people know about it the better is. 👍

2025-03-27 22:08:39 GMT

- reply

@nprofile…ekdt it's hidden within the Spec: https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor
> The initial-value must be computationally independent.
"rem" is not computationally independent. it depends on the font-size set on the root element

2025-03-27 12:48:11 GMT

- reply

Here is another implementation where you can define an array of colors and the number of ranges. The color will automatically adjust based on the progression!
✅ 0% JavaScript
✅ 100% "Programming with CSS"
Demo: https://codepen.io/t_afif/pen/LEYJGoQ via :codepen: @nprofile…nmhh
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/234/460/629/129/914/original/062a9eead202b8b9.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/234/461/146/873/057/original/13cdffe350fe6c71.png

2025-03-25 12:45:04 GMT

- reply

@nprofile…kmv5 we can also achieve the same using custom classes as well but that's not the purpose of the trick.
I want to rely on the native attributes that are already available and used by the browser. No need to introduce any new variable/information.

2025-03-25 12:24:11 GMT

💡 CSS Tip!
Want to see some magic using the new attr() function? Here is a trick to create a progress element with a dynamic coloration based on the progression!
https://css-tip.com/custom-progress/
⚠️ Chrome-only for now ⚠️
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/222/969/993/133/832/original/5acad4abfbb1ad6f.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/222/974/386/164/364/original/afbe4d5b1efe7f3a.png

2025-03-24 20:42:31 GMT

💡 CSS Tip!
Do you want to create cut-out shapes using clip-path? Here is a simple trick to easily invert any polygon shape.
https://css-tip.com/cut-out-shapes/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/219/307/849/477/126/original/cab2244cf2a2e348.png

2025-03-20 20:00:39 GMT

- reply

You can also use my online generator to get the code for the different variations!
https://css-generators.com/custom-borders/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/196/532/152/089/940/original/63f583cdf12127fd.mp4

2025-03-20 13:46:56 GMT

💡 CSS Tip!
How much code is needed to create Zig-Zag edges?
✅ One property
✅ One gradient
https://css-tip.com/zig-zag-edge/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/195/025/148/531/475/original/75b7f759b5cd10fc.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/195/055/365/914/539/original/67472ebf0229e385.png

2025-03-18 11:53:40 GMT

💡 CSS Tip!
Split and assemble an image with a cool hover effect and a few lines of code. Single-element implementation (the image tag) powered by CSS mask.
https://css-tip.com/assemble-image/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/183/293/014/680/738/original/b667f34561acb911.mp4

2025-03-17 18:28:51 GMT

- reply

@nprofile…5vuz There are a few techniques to achieve this but none of them have good support.
@nprofile…h328 wrote about that particular example using Scroll-driven animations: https://kizu.dev/position-driven-styles/#flex-wrap-detection

2025-03-17 15:08:34 GMT

- reply

@nprofile…5vuz how you define the "to narrow". There is no generic rules but with more details we can probably find specific workarounds.

2025-03-14 15:18:59 GMT

💡 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
https://cdn.masto.host/frontendsocial/media_attachments/files/114/161/450/491/996/162/original/3b6f99e6025c6a8b.mp4

2025-03-11 19:42:45 GMT

- reply

Demo: https://codepen.io/t_afif/full/YPzreVv via @nprofile…nmhh
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/114/145/500/369/518/731/original/f86b5816a92d758f.mp4