CSS by T. Afif 
@css@front-end.social
mastodon
4.5.9
CSS stuff by Temani Afif
💡 https://css-tip.com
🧩 https://css-shape.com
💫 https://css-loaders.com
📝 https://css-articles.com
⚙️ https://css-generators.com
🎨 https://css-pattern.com
✨ https://css-only.art
🎮 https://css-games.com
❓ https://css-quizzes.com
I verified myself because I know I am a real person. You can trust me, I know who I am.
0
Followers
0
Following
Joined November 05, 2022
Support Me:
Github:
Codepen:
Posts
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 10, 2026
Straight line as a divider: Boring! 🥱
Random wavy line as a divider: Yes, please! 🤩
https://css-generators.com/wavy-divider/
Another CSS generator ready for border-shape!
#CSS #HTML
View full thread on front-end.social
14
2
7
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 09, 2026
@inthehands
The border-only version? Only chrome is supporting it as far as I know. The other browsers support the default (filled) version
View full thread on front-end.social
0
2
0
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 09, 2026
My blob generator is ready to give you border-only blob shapes.
https://css-generators.com/blob/
Update your Chrome and give it a try!
#CSS #HTML
View full thread on front-end.social
33
4
16
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 08, 2026
Example of shapes created with a single image element
Demo: https://codepen.io/t_afif/full/jEMvwyP via :codepen: @codepen
#CSS #HTML
View full thread on front-end.social
0
0
1
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 08, 2026
💡 CSS Tip!
We've just had the release of :chrome: Chrome 147, which means border-shape was enabled by default! 👀
https://css-tip.com/border-shape/
Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩
7
5
3
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 06, 2026
Who found the easter egg in my CSS-only Dino game? 🥚
A "rocket mode" to fly above everything! 👀
Give it a try: https://css-tip.com/dino-game/
5
0
3
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 04, 2026
Bending a straight line using pure CSS?! 👀
Another cool demo in progress powered by border-shape. It's coming to :chrome: Chrome next week! 🤩
20
2
9
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 02, 2026
RE: @csstricks@mastodon.social
Years ago, creating CSS shapes was a tedious task. I had to find workarounds with a lot of gradients and math.
Now, using the shape() function, I can easily create complex shapes and animate them! 👇
1
0
0
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 02, 2026
💡 CSS Tip!
A sliding liquid reveal effect, because why not! 🫗
https://css-tip.com/sliding-liquid/
Another demo powered by shape() and made easy with my online generators: https://css-generators.com/wavy-divider/
6
1
6
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Apr 01, 2026
1
0
1
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 31, 2026
What's the best way to showcase modern CSS features? By making games!
This time it's the famous :chrome: Dino Game 🦖
https://css-tip.com/dino-game/
100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀
Don't search for the JS, there is none.
9
1
3
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 27, 2026
0
0
2
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 27, 2026
Now that my favorite feature is well supported, let's create a new set of CSS loaders 🤩
The Squishy Collection: https://css-loaders.com/squishy/
Single-element implementation powered by shape() (and linear() for the bouncy ones!)
Pick your favorite one 👇
4
1
3
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 25, 2026
I thought I had found a bug that prevented counter() from working properly, but it was a feature!
https://css-tip.com/counter-gotcha/
Another CSS gotcha that you'd better know about if you don't want to waste time trying to figure out why your code isn't working.
Thanks to @mia@front-end.social for the insights
9
0
4
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 23, 2026
📝 New CSS Article!
If you have seen my graph theory demo and wondered how it works, then the article is finally live!
https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/
I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm.
Modern CSS is fun!
17
0
8
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 23, 2026
Stack Overflow asked me to propose a CSS Challenge, and I couldn't refuse.
https://stackoverflow.com/beta/challenges/79908564/challenge-17-the-accurate-selection
It's about Selectors and more! There is nothing to win (except a profile badge), but it's a fun challenge to illustrate your creativity.
6
0
3
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 18, 2026
💡 CSS Tip!
Add an infinite wobbling animation to your image with a simple code.
https://css-tip.com/wobbling-animation/
Powered by "complex" shape()s that you can easily get from my online generator!
4
0
3
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 15, 2026
It's been a while since my last CSS Pattern, so let's work on new ones!
7
0
2
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 12, 2026
A classic rounded button: boooring!! 🥱
A squishy animated button: Yes, please!! 🤩
https://css-tip.com/squishy-button/
Another cool demo powered by the powerful shape() function
12
0
3
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
CSS by T. Afif
@css@front-end.social
CSS stuff by Temani Afif 💡 https:// css-tip.com 🧩 https:// css-shape.com 💫 https:// css-loaders.com 📝 https:// css-articles.com ⚙️ https:// css-generators.com 🎨 https:// css-pattern.com ✨ https:// css-only.art 🎮 https:// css-games.com ❓ https:// css-quizzes.com I verified myself because I know I am a real person. You can trust me, I know who I am.
front-end.social
@css@front-end.social
·
Mar 02, 2026
It seems we can now customize the select element, right? right?!
Demo: https://codepen.io/t_afif/pen/PwGPJOB via :codepen: @codepen@fosstodon.org
29
1
16