CSS by T. Afif
@ChallengesCss
Followers
14K
Following
10K
Media
1K
Statuses
6K
💡 https://t.co/xk3TRqX1f1 🧩 https://t.co/4jGcDxtd38 💫 https://t.co/lRAAxfrQ09 📝 https://t.co/oOgtxdf5i9 ⚙️ https://t.co/UtXPa9iUiT 🏆 https://t.co/KgsRpeby7Q 🎨 https://t.co/0bhdtiVFTU 🎨 https://t.co/sZ8q2fgRBB
💰 Support Me ⮕
Joined April 2021
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://t.co/Pvepfg9xvV
css-tip.com
Promote your product with a personalised and attractive ad starting from 150$/month.
0
5
35
The classic Breadcrumb Navigation using the below technique. Demo: https://t.co/EAl8AWp9ZH via @CodePen
💡 CSS Tip! A CSS Shape that follows the direction of the text? Yes, it's possible, and it only requires a few lines of code. https://t.co/HMWo4OmU3k The trick works with emoji and images as well.
0
1
15
[Life Changing Wisdom] Activate the True Power of Your Mind. (40mins)
0
4
69
💡 CSS Tip! A CSS Shape that follows the direction of the text? Yes, it's possible, and it only requires a few lines of code. https://t.co/HMWo4OmU3k The trick works with emoji and images as well.
0
1
23
An interactive demo can be found in the post 👇
💡 CSS Tip! Use modern CSS to create an arrow shape that adjusts according to the direction and writing mode. A direction-aware shape! https://t.co/Dh1GLF1O9i Another cool use case of corner-shape
0
2
33
💡 CSS Tip! Use modern CSS to create an arrow shape that adjusts according to the direction and writing mode. A direction-aware shape! https://t.co/Dh1GLF1O9i Another cool use case of corner-shape
2
8
54
Another demo using Anchor Positioning and tooltips. This time, the arrow will get stretchy 👀 https://t.co/Yisp6jXN3Z Still 100% CSS magic! 🪄
Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% CSS! Yes, Anchor Positioning is very cool. 🤩 https://t.co/yJHOyCxOTv The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍
1
20
95
Another demo using Anchor Positioning and tooltips. This time, the arrow will get stretchy 👀 https://t.co/Yisp6jXN3Z Still 100% CSS magic! 🪄
Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% CSS! Yes, Anchor Positioning is very cool. 🤩 https://t.co/yJHOyCxOTv The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍
1
20
95
💡 CSS Tip! Creating the circular version using the same tricks. https://t.co/dZwpi5vBPI It's responsive, the gap is transparent, and you get a cool hover effect to reveal the image if there is an overlap.
💡 CSS Tip! Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images. https://t.co/p5Uyh5gWrx No hardcoded values, no magic numbers, and the gap is transparent!
0
2
20
💡 CSS Tip! Creating the circular version using the same tricks. https://t.co/dZwpi5vBPI It's responsive, the gap is transparent, and you get a cool hover effect to reveal the image if there is an overlap.
💡 CSS Tip! Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images. https://t.co/p5Uyh5gWrx No hardcoded values, no magic numbers, and the gap is transparent!
0
2
20
Updated the effect a little to have a more stable movement between the images.
Added another version with a hover effect to reveal the images Demo: https://t.co/8GVfPM64db via @CodePen It's a dynamic hover effect. It works only when there is an overlap, and it will always reveal the full image.
0
4
20
Elegant and CSS only solution for an adaptive list of images. Exciting how easily you can solve problems using just modern CSS ! 😀
💡 CSS Tip! Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images. https://t.co/p5Uyh5gWrx No hardcoded values, no magic numbers, and the gap is transparent!
0
2
5
Added another version with a hover effect to reveal the images Demo: https://t.co/8GVfPM64db via @CodePen It's a dynamic hover effect. It works only when there is an overlap, and it will always reveal the full image.
💡 CSS Tip! Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images. https://t.co/p5Uyh5gWrx No hardcoded values, no magic numbers, and the gap is transparent!
2
2
18
💡 CSS Tip! Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images. https://t.co/p5Uyh5gWrx No hardcoded values, no magic numbers, and the gap is transparent!
1
13
133
📝 New CSS Article! Ready for more Anchor Positioning? The third part is live! https://t.co/Shy7kXrSnN With this last part, you have a nice collection of CSS tricks to easily create different tooltips with dynamic positions.
📝 New CSS Article! Ready for the second part? I am still exploring the magic we can do using Anchor Positioning. https://t.co/o5RMyYOKNG A perfect use case of how few lines of CSS can replace a bunch of complex JavaScript code.
0
7
38
Perfectly Pointed Tooltips: To The Corners With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we're going to get extra tricky and point them diagonally. https://t.co/DHb3ONmSn2
frontendmasters.com
0
3
21
📝 New CSS Article! Ready for more Anchor Positioning? The third part is live! https://t.co/Shy7kXrSnN With this last part, you have a nice collection of CSS tricks to easily create different tooltips with dynamic positions.
📝 New CSS Article! Ready for the second part? I am still exploring the magic we can do using Anchor Positioning. https://t.co/o5RMyYOKNG A perfect use case of how few lines of CSS can replace a bunch of complex JavaScript code.
0
7
38
Frontend News #17 ⛔️ Why Pseudo-Elements Don’t Work With :is(), 🎨 The Advantages of OKLCH 🕹️ Full 3D CSS Game Featuring @ChallengesCss, @sitnikcode, @davatron5000, @willmendesneto, @ivorjetski. 🙏 https://t.co/2ZJIYcZTsX
cssw.io
Find out why pseudo-elements (before, after) don’t work with the ‘:is()’ pseudo-class function, what the difference between hsl and oklch color formats is, why you’re not writing as much code as...
1
3
27
I like this idea. Makes it easier to follow.
Why have a focus ring per element when you can have one focus ring for all the elements? Meet the Universal Focus Ring! 💫 https://t.co/ozuX5mZhEq A funny experiment using Anchor Positioning (I repeat, it's for fun)
0
1
14
Why have a focus ring per element when you can have one focus ring for all the elements? Meet the Universal Focus Ring! 💫 https://t.co/ozuX5mZhEq A funny experiment using Anchor Positioning (I repeat, it's for fun)
4
5
117
📝 New CSS Article! Ready for the second part? I am still exploring the magic we can do using Anchor Positioning. https://t.co/o5RMyYOKNG A perfect use case of how few lines of CSS can replace a bunch of complex JavaScript code.
Do you want to see more cool stuff using modern CSS? This time, the tooltip will consider all four positions, and the tail will always point to the anchor. 👀 https://t.co/EntWffgTmK Still 100% CSS magic! 🪄
0
10
56
📝 New CSS Article! Ready for the second part? I am still exploring the magic we can do using Anchor Positioning. https://t.co/o5RMyYOKNG A perfect use case of how few lines of CSS can replace a bunch of complex JavaScript code.
Do you want to see more cool stuff using modern CSS? This time, the tooltip will consider all four positions, and the tail will always point to the anchor. 👀 https://t.co/EntWffgTmK Still 100% CSS magic! 🪄
0
10
56