CSS by T. Afif (@ChallengesCss) - Twitter Profili

Sabitlenmiş Tweet

CSS by T. Afif@ChallengesCss·15 Nis

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. css-tip.com/advertise/

English

0

5

42

11.1K

CSS by T. Afif@ChallengesCss·17h

📝 New CSS Article! The sibling-index() function lets you get the index of an element among its siblings, but it has a hidden superpower! Read my latest article to know about it👇 master.dev/blog/in-n-out-…

English

0

3

24

1.8K

CSS by T. Afif@ChallengesCss·6d

📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. css-tricks.com/get-ready-for-… This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind!

English

1

11

41

2.8K

CSS by T. Afif@ChallengesCss·7 Tem

💡CSS Tip! Create a responsive grid with a cool animation. Everything adjusts smoothly on resize or when adding/removing new items. css-tip.com/animated-grid/ A CSS-only implementation with a few lines of code

English

0

7

29

1.7K

CSS by T. Afif@ChallengesCss·2 Tem

And guess what? You can combine border-area with text, and you get the gradient on both the border and the text! 👀 css-tip.com/background-cli… Yes, background-clip accepts two values.

CSS by T. Afif@ChallengesCss

They just released @ChromiumDev V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradien… Two lines of code and you are done! 🤩

English

1

9

41

3.7K

CSS by T. Afif@ChallengesCss·2 Tem

Safari should support this, but I cannot test, so I am not sure.

English

2

0

1

343

CSS by T. Afif@ChallengesCss·2 Tem

@yisibl It was released with the V150 (two days ago) so I never had the chance to try border-area until then. It was probable behind a flag in previous versions but I didn't pay attention to it. It's been two years since I wrote that post without being able to test it ...

English

1

0

34

一丝@yisibl·2 Tem

@ChallengesCss Yes, this was added to make it easier for developers. #issuecomment-2474360495" target="_blank" rel="nofollow noopener">github.com/w3c/csswg-draf… What does “since two days” mean?

English

1

0

59

一丝@yisibl·2 Tem

You can omit `border-box` because it's the default value in shorthand.

CSS by T. Afif@ChallengesCss

They just released @ChromiumDev V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradien… Two lines of code and you are done! 🤩

English

5

2

11

2.9K

CSS by T. Afif@ChallengesCss·1 Tem

They just released @ChromiumDev V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradien… Two lines of code and you are done! 🤩

English

3

13

66

17.9K

CSS by T. Afif@ChallengesCss·30 Haz

To avoid any confusion, let's add a tooltip showing the current value. An ugly one that bounces in all directions! css-tip.com/wiggly-range-s… Now, the range slider is perfect, no one can say otherwise!

CSS by T. Afif@ChallengesCss

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range-s… Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

English

3

12

181

25.2K

CSS by T. Afif@ChallengesCss·26 Haz

💡 CSS Tip! An old design pattern solved by a modern CSS feature. css-tip.com/responsive-sep… Learn how Gap Decorations makes it easy to add a separator between items using simple code with no hacks. It works with different alignment settings, and you can easily adjust the shape.

English

4

11

65

4.6K

CSS by T. Afif@ChallengesCss·26 Haz

@myfonj I have the same on desktop as well.

English

1

0

41

myf (formerly myf)@myfonj·26 Haz

@ChallengesCss Getting curious stochastic glitches in the demo on mobile:

English

1

0

1

46

CSS by T. Afif@ChallengesCss·26 Haz

@D7460N The design is old, not the solution nor the code. There is no old solution as long as it works fine (except if we have better and modern ways that have the same browser support)

English

1

0

38

D7460N@D7460N·26 Haz

@ChallengesCss If it works, is it old?

English

2

0

42

CSS by T. Afif@ChallengesCss·24 Haz

📝 New CSS Article! I did a quick exploration of the new "Gap Decorations" thing, and I ended up doing a lot of fancy stuff except for decorating the gaps 😅 master.dev/blog/lets-play… Read my latest article to learn a lot of nice tricks around this feature.

English

1

7

21

1.4K

CSS by T. Afif@ChallengesCss·23 Haz

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range-s… Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)