🔥The 9th Round of Easy Loan, Earn $40 Reward is in progress❗️ ⏰ Promotion Period: January 15th - Feburary 15th, 2025 👉 Register now and check more details at gate.io/campaigns/358

💡 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. css-tip.com/invert-shape/ As a bonus, you can also control the space around the inverted shape.

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

They did it. A framework bult on the top of Tailwind to avoid the "ugly" HTML and the endless class names. Looks quite familiar to what we can already do with a "style.css" file. At least they acknowledge that the HTML is ugly.

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

Playing with modern CSS (sibling-index(), sibling-count(), @​stating-style, @​property, mask, math, etc) 🤩

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?

💡 CSS Tip! Because the new sibling-*() functions are verbose and sibling-index() is 1-indexed, I wrote my own functions! css-tip.com/element-index/ Less characters to type when writing complex formulas.

💡 CSS Tip! Using modern CSS such as sibling-index() and if(), you can re-create the :nth-child(An + B) selector. 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 nth-child() with CSS ?!"

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 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! css-tip.com/images-circle/

Here is a demo where you can add/remove images and see how they align perfectly. Demo: codepen.io/t_afif/full/jE… via CodePen.IO As a bonus, we can have a nice animation by adding a transition to the offset property.

We can also have a nice entry animation by adding a simple code: img { transition: 1s 1s; @​starting-style { offset: circle(0px) 0% 0deg; } }