📚 Tutorial: CSS by T. Afif (@ChallengesCss) / X

CSS by T. Afif

6,057 posts

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

💰 Support Me ⮕

support.temani-afif.com

Joined April 2021

Pinned
CSS by T. Afif
@ChallengesCss
Apr 15, 2025
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.
Advertise with CSS Tip
From css-tip.com
11K
CSS by T. Afif
@ChallengesCss
Feb 24, 2025
💡 CSS Tip! Save this one line of code for the future! css-tip.com/center-upperca… No more hacky code trying to remove those spaces above and below an uppercase text. You can easily have a perfect centering for the text!
112K
CSS by T. Afif
@ChallengesCss
Nov 20, 2023
💡 CSS Tip! Add a gradient overlay above an existing background using one line of code ✅ No extra element & No pseudo-element ✅ No need to update the background property Demo: codepen.io/t_afif/full/vY… via @CodePen #CSS
122K
CSS by T. Afif
@ChallengesCss
Dec 19, 2021
What kind of CSS loader are you? ⚫️The Dots ⬛️The Bars Why not both at the same time. Check the below single-div collection "The Dots vs The Bars"👇 One div = one loader Demo: codepen.io/t_afif/pen/gOm… via @CodePen #CSS
00:00
CSS by T. Afif
@ChallengesCss
Feb 21, 2025
💡 CSS Tip! Do you want a set of buttons to be equal in width to the widest one? A few lines of CSS and you are done! css-tip.com/equal-width-bu…
30K
CSS by T. Afif
@ChallengesCss
Feb 24, 2025
Another interesting one in case you have a lowercase text (without ascender or descender).
CSS by T. Afif
@ChallengesCss
Feb 24, 2025
💡 CSS Tip! Save this one line of code for the future! css-tip.com/center-upperca… No more hacky code trying to remove those spaces above and below an uppercase text. You can easily have a perfect centering for the text!
42K
CSS by T. Afif
@ChallengesCss
Jun 8, 2022
💡 CSS Tip! Extend the background of an element outside of its container to cover the full screen width ✅ No extra element ✅ No pseudo-element ✅ No overflow issue ✅ Only 2 CSS declarations Demo: codepen.io/t_afif/full/LY… via @CodePen #CSS
CSS by T. Afif
@ChallengesCss
Jan 17, 2025
Updating the "inverted radius" shape to add two more variables to control the offset of inner curve. css-shape.com/inverted-radiu…
00:00
23K
CSS by T. Afif
@ChallengesCss
Feb 13, 2025
💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: css-tip.com/single-digit-i… You can control the number of characters by adjusting the maxlength attribute.
00:00
25K
CSS by T. Afif
@ChallengesCss
Sep 16, 2024
💡 CSS Tip! Using scroll-driven animations, you can link a CSS variable with a range slider and easily update its value! No more JavaScript to do this. A few lines of CSS, one HTML element and you can update any value in real time. @CodePen demo in the reply 👇
33K