T. Afif @ CSS Challenges
@ChallengesCss
Followers
11,648
Following
141
Media
1,089
Statuses
4,878
𝗖𝗦𝗦 by 𝗧𝗲𝗺𝗮𝗻𝗶 𝗔𝗳𝗶𝗳 🏆 ⚙️ 🎨 💫 📝 💡
💰 Support Me ⮕
Joined April 2021
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Macron
• 663065 Tweets
Xbox
• 288088 Tweets
Argentina
• 218614 Tweets
VIRGINIA AL 9009
• 144345 Tweets
JULIANA
• 113210 Tweets
The Loyal Pin ThaiGL
• 95331 Tweets
#ปิ่นภักดิ์Q54ที่สุดในใจ
• 90257 Tweets
#NXTBattleground
• 67134 Tweets
Ecuador
• 62577 Tweets
Tatum
• 61530 Tweets
Dario
• 47170 Tweets
FURIA A LA FINAL
• 42337 Tweets
FURIA SE QUEDA CARAJO
• 29972 Tweets
#NBAFinals
• 29456 Tweets
De Paul
• 22337 Tweets
Clemson
• 21104 Tweets
Doncic
• 20280 Tweets
Cuti
• 19682 Tweets
Di María
• 17540 Tweets
Kelani
• 15098 Tweets
Jaylen Brown
• 12629 Tweets
Roxanne
• 12064 Tweets
Jrue
• 10800 Tweets
Scaloni
• 10244 Tweets
Pinned Tweet
If the little bird dies you can find me 👇
🐘
💻
❓
⚙️
💰
And don't forget to bookmark all the links in my Bio to not miss the CSS funny stuff. Hurry Up!
2
5
34
Here is a simple CSS Trick to smoothly stop the rotation of your element on hover.
The animation will look more natural, and you avoid breaking your element with an abrupt stop!
The rotation will resume slowly on mouse-out as well.
Do you want to accelerate the rotation of your element on hover?
Here is a simple CSS trick using animation composition👇
Only one animation and a few lines of code are needed.
2
2
50
1
35
313
💡 CSS Tip!
One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future!
It will make sure the width of your element is always an integer! No more decimal and rounding issues!
"width: auto" with an upgrade 😎
5
55
311
💡 CSS Tip!
Turn a simple input into single-digit inputs using a few lines of CSS.
✅ No extra element (only one input element)
✅ Less than 15 CSS declarations
✅ Optimized with CSS variables
Demo: via
@CodePen
4
64
303
A nice "Pop out" hover effect featuring some CSS masters 😎 (
@argyleink
@shadeed9
@KevinJPowell
)
Demo: via
@CodePen
Want to know the secret behind?
Read my new
@css
article 👉
Share a demo with your own avatar 👇
#CSS
7
23
267
New CSS Project! 🥳
👉 👈
The Ultimate Collection of CSS-Only shapes
✅ Single-element implementation
✅ Modern & Optimized CSS code
✅ Easy to customize
✅ One click to copy the code
4
64
269
3
34
255
💡 CSS Tip!
Create a corner-only border around any element using only background properties (no Pseudo, no SVG, no extra element). You can also animate it!
Demo: via
@CodePen
6
38
259
📝 New CSS Article!
Do you want to explore some new CSS features? Check my latest article at
@smashingmag
👉
CSS Mask, @property, Math, etc. A lot of fun 🤩
Demo (featuring
@LeaVerou
and
@Una
): via
@CodePen
#CSS
5
52
240
💡 CSS Tip!
Use the round() function and create a fluid typography with a discrete function instead of a continuous one.
Define the step and get precise values within a specific range. Useful if you have some calculation using the "em" unit. No more rounding issue!
5
29
239
🎨 CSS Art
I am adding a demon slayer to the list. Take a deep breath and say hello to 𝗧𝗮𝗻𝗷𝗶𝗿𝗼 𝗞𝗮𝗺𝗮𝗱𝗼 ⚔️
Demo: via
@CodePen
✅ A CSS-only illustration (No images and No SVG)
Find more at
#CSS
#cssart
#DemonSlayer
25
40
225
💡CSS Tip!
Using the new relative color syntax, you can easily extract the R,G,B channels of any color and use them as separate colors.
Useful when you want to do some color manipulation.
6
43
214
💡 CSS Tip!
Add a fancy "Pop out" hover effect to your avatar using modern CSS 😍
✅ No extra element (only the <img> tag)
✅ No pseudo-element
✅ Powered by the future of CSS (mask, @property, CSS variables and a lot of math)
Demo: via
@CodePen
#CSS
1
38
211
💡 CSS Tip!
Create a dynamic line separator that switch from horizontal to vertical
✅ No media query
✅ Depend on the container width (not the screen width)
✅ Control when the switch will occur
Demo via
@CodePen
Based on the idea of
@shadeed9
👇
#CSS
CSS Tip 💡
Use a dynamic line separator that changes from horizontal to vertical depending on flex-direction. No need for width or height. Just a stretched CSS border!
Details:
9
120
823
2
32
204
Here is my idea for the inverted border-radius layout 👇
Demo: via
@CodePen
Using mask to have transparency. A minimal HTML with no pseudo-element and some CSS variables to control everything (the gap, the radius, etc)
#CSS
I've just put out a new video! Creating an inverted border-radius with CSS
6
6
79
8
37
204
1
26
188
0
25
182
💡 CSS Tip!
Use Modern CSS to write Better CSS! A lot of new features can help you optimize your code and reduce redundancy.
✅ CSS Nesting
✅ CSS Variables
✅ Media Query range features
⬇️ Old Code New Code ⬇️
3
29
185
🎉 New CSS Project 🎉
It took me a while, but I finally collected all my CSS-only loaders into one place!🥳
👉 👈
The Biggest Collection of Loading Animations. More than 500 single-element CSS loaders.
✅ One-Click to copy
Which one do you like?
#CSS
13
42
182
💡 CSS Tip!
I told you that, using 2 CSS declarations, we can extend the background of an element outside of its container but we can still do better!
Demo: via
@CodePen
Full credit to
@SelenIT2
for this sorcery 🧙♂️
#CSS
0
28
182
2
18
168
No one noticed it but 2022 was always there! 🤪
We had to look at 2021 from a different angle.
Demo: via
@CodePen
#CSS
#NewYear2022
4
30
173
💡 CSS Tip!
Create a CSS-only "Back To Top" button with a simple code
✅ 0 JavaScript
✅ Control when the button appears
✅ Smooth scroll on click
✅ Powered by CSS grid and sticky position
Demo: via
@CodePen
Full explanation 👉
3
34
164
I found the perfect tool to encrypt my CSS code and make it unreadable 😈
8
20
158
min() or max()? You always struggle to know which one to use and you end up trying both until one of them works.
💡 Here is a figure to help you decide when to use them
You start with clamp() then:
- when you remove max, you use max()
- when you remove min, you use min()
2
24
161
💡 I shared a lot of CSS Tips so I decided to put everything in a website for easy finding.
👉 👈
A simple website powered by
@eleven_ty
with more than 60 CSS Tips to date.
Want an RSS Feed for the future Tips? Here you go:
#CSS
5
33
160
💡 CSS Tip!
To target the html element, you either use "html {}" or ":root {}" but thanks to CSS nesting you can simply use "& {}"
When used alone, the nesting selector will match the root element! A one-character selector 🤯
⚠️ It has a lower specificity than html and :root
5
26
146
0
19
141
🎨 CSS Art
After Luffy and the Colossal Titan, another famous anime character. The one and only ... 𝗚𝗼𝗸𝘂 💪
Demo: via
@CodePen
If you missed my previous CSS Arts, find them in one place
👉 👈
#CSS
#DragonBallZ
#Goku
12
23
129
3
20
128
I am joining the game and trying the new View Transitions on CSS Tip
👉 👈
Yes, what you see are Zig-Zag edges 👀
Open your Chrome, activate the "viewTransition" flags and have fun! 🤩
#CSS
Really happy to see stuff like this. It's hard getting feedback on web APIs, and there are few second chances, but it seems like we did ok on this one.
Loads more to do to get the MPA bit over the line, but the folks working on it are smart as fuck. They'll do good.
6
9
173
2
33
123
CSS Nesting is cool and using the "&" is a lifesaver BUT be careful. There's a gotcha!
⚠️ "&" in CSS is different from the one in Sass ⚠️
Your Sass code won't work the same way if you use it as a CSS code.
Yes, it's counter-intuitive but keep reading to understand why 👇
4
22
123
A jumping radio button? Why not!
#CodePenChallenge
🌟CSS-only powered by the :has() selector and some magic cubic-bezier()
Demo: via
@CodePen
#CSS
4
20
121
Because nobody asked for it, I made a CSS-only version of
@argyleink
using one <div>
Hover for a small animation 😜
💀 Demo: via
@CodePen
#CSS
5
9
118
I did it! 100 Unique CSS Patterns 🤩
👉 👈
One of the biggest collection of CSS patterns ever!
✅ One-click to copy/paste
✅ One value to control the size
✅ Optimized with CSS variables
Which one is your favorite? Tell me in the comments 👇
#CSS
6
29
117
0
24
113
After the "Ultimate Collection of CSS Shapes". It's time for "The Modern Guide for making CSS Shapes". 🤩
via
@smashingmag
A huge compilation of many CSS Tricks I have been using since years in this guide.
Enjoy reading my 100th CSS Article! 🥳
New CSS Project! 🥳
👉 👈
The Ultimate Collection of CSS-Only shapes
✅ Single-element implementation
✅ Modern & Optimized CSS code
✅ Easy to customize
✅ One click to copy the code
4
64
269
4
20
118
"I can spend 10 hours per day doing CSS Art"
5
8
117
2
23
114
How many ways of "Centering in CSS" do you know? 10, 20? Flexbox, Grid?
What if I tell you there is a hidden way to center your content without writing any CSS!?
1 element + 2 attributes = Centered without CSS 😈
As a bonus, you get a free border around your element 🥳
8
16
115
🎨 CSS Art
The Tanjiro I made was getting nervous and start screaming: "Nezuko!! Where is Nezuko?!"
𝗡𝗲𝘇𝘂𝗸𝗼 is here 👇
Demo: via
@CodePen
✅ A CSS-Only illustration (No image, No SVG)
More at
#CSS
#CSSart
#DemonSlayer
🎨 CSS Art
I am adding a demon slayer to the list. Take a deep breath and say hello to 𝗧𝗮𝗻𝗷𝗶𝗿𝗼 𝗞𝗮𝗺𝗮𝗱𝗼 ⚔️
Demo: via
@CodePen
✅ A CSS-only illustration (No images and No SVG)
Find more at
#CSS
#cssart
#DemonSlayer
25
40
225
16
26
109
I had to try it 👇 and it was, indeed, a fun experimentation!
✅ Minimal HTML
✅ CSS-only
✅ No magic numbers
✅ Works with any number of elements
Demo: via
@CodePen
#CSS
CSS-only fun!
Had a rough draft of this sitting around for a while that was okay, but the first hover moved in from the left, and when you stopped hovering it moved out to the left...
Much happier with it now, and will be recording a video on it next week probably 🙂
8
28
394
2
18
109
CSS Mask + Trigonometric functions + CSS variables + @property = A magic result! 🤩
✅ A fancy animation using only the <img> tag!
Demo: via
@CodePen
idea by
@argyleink
#CSS
4
16
109
A CSS-only version of the
@googlechrome
Logo
✅ 1 element
✅ 4 declarations
✅ 4 gradients
Demo: via
@CodePen
#CSS
#Chrome
#Google
7
11
101
@jensimmons
As an active contributor on StackOverflow (more than 6000 CSS answers to date), the issue is that people want to make things working without understanding the "why". It does work with many language where you can copy/past portion of codes and put them together but not with CSS.
3
3
106