CSS by T. Afif (@challengescss) 's Twitter Profile
CSS by T. Afif

@challengescss

💡 css-tip.com
🧩 css-shape.com
💫 css-loaders.com
📝 css-articles.com
⚙️ css-generators.com
🏆 css-challenges.com
🎨 css-pattern.com
🎨 css-only.art

ID: 1384161676090437646

linkhttps://support.temani-afif.com calendar_today19-04-2021 15:07:22

5,5K Tweet

13,13K Followers

131 Following

CSS by T. Afif (@challengescss) 's Twitter Profile Photo

💡 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 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 by T. Afif (@challengescss) 's Twitter Profile Photo

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

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. 🙃
CSS by T. Afif (@challengescss) 's Twitter Profile Photo

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.

CSS by T. Afif (@challengescss) 's Twitter Profile Photo

📝 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!

CSS by T. Afif (@challengescss) 's Twitter Profile Photo

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 by T. Afif (@challengescss) 's Twitter Profile Photo

💡 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!

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 by T. Afif (@challengescss) 's Twitter Profile Photo

💡 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 ?!"

💡 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 ?!"
CSS by T. Afif (@challengescss) 's Twitter Profile Photo

We can also create a custom function and make the code easier to use. ⚠️ No browser support yet, but it's on the way! ⚠️

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 by T. Afif (@challengescss) 's Twitter Profile Photo

💡 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/

💡 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/
CSS by T. Afif (@challengescss) 's Twitter Profile Photo

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.

CSS by T. Afif (@challengescss) 's Twitter Profile Photo

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