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.

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

RT @ChallengesCss: 💡 CSS Tip!. Because the new sibling-*() functions are verbose and sibling-index() is 1-indexed, I wrote my own functions….

RT @ChallengesCss: Playing with modern CSS (sibling-index(), sibling-count(), @​stating-style, @​property, mask, math, etc) 🤩 https://t.co/….

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

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

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

RT @ChallengesCss: 📝 New CSS Article!. Closing this series with a fourth part where I am exploring two more shape() commands. https://t.co….

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

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.

RT @ChallengesCss: CSS Functions will soon be available, and it's time to confuse JS developers (and maybe backend developers) a bit. No,….

You can try it using the latest version of chrome with the flag "Experimental Web Platform features" enabled. Demo: via @CodePen.

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

RT @ChallengesCss: 💡 CSS Tip!. You created a CSS shape using shape(), and you want to invert it? Easy! With a few lines of code, you have b….

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

RT @ChallengesCss: Recreating the classic 3 dots loader using shape() because why not. Powered by @​property and CSS variables. https://t.….

Recreating the classic 3 dots loader using shape() because why not. Powered by @​property and CSS variables.

RT @ChallengesCss: 📝 New CSS Article!. Guess who's writing again about CSS shapes? 🫣. This time, I am exploring the corner-shape property.….

RT @FrontendMasters: Drawing CSS Shapes using corner-shape . After you've got a `border-radius`, you can control the shape of the corner wi….

📝 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. ⚠️ No browser support yet but a good opportunity to know about this powerful feature!.