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

Playing with modern CSS (sibling-index(), sibling-count(), @โ€‹stating-style, @โ€‹property, mask, math, etc) ๐Ÿคฉ

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; } }