Lightnews — Scholar-powered news

CSS by T. Afif

@css-only.dev

6.1K followers 77 following 530 posts

𝗖𝗦𝗦 stuff by 𝗧𝗲𝗺𝗮𝗻𝗶 𝗔𝗳𝗶𝗳 (https://support.temani-afif.com) 💡 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

support.temani-afif.com)

Posts Media Videos Starter Packs

Pinned

CSS by T. Afif @css-only.dev · Apr 15

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/

Advertise with CSS Tip

Promote your product with a personalised and attractive ad starting from 150$/month.

css-tip.com

1 1 11

CSS by T. Afif @css-only.dev · 16h

Was going to post the same. Or this one as well: codepen.io/t_afif/pen/y...

same logic written differently.

1 2

Reposted by CSS by T. Afif

Aaron T. Grogg @aarontgrogg.bsky.social · 1d

So slick… 🧈

CSS by T. Afif @css-only.dev · 2d

Here is my idea with less of code

css-tip.com/tooltip-anch...

The trick is to play with the margin property to show/hide the arrows.

cc @una.im @bram.us

1 4

CSS by T. Afif @css-only.dev · 1d

shape()

1 3

CSS by T. Afif @css-only.dev · 1d

You can toggle the "debug mode" in the demo to better understand what's happening.

Demo: codepen.io/t_afif/full/... via @codepen.io

1 2 11

CSS by T. Afif @css-only.dev · 2d

Here is my idea with less of code

css-tip.com/tooltip-anch...

The trick is to play with the margin property to show/hide the arrows.

cc @una.im @bram.us

12 46

Reposted by CSS by T. Afif

Stefan Judis @stefanjudis.com · 3d

Aaaaaand it's going out. 🫣

As always, you can read Web Weekly online, too. 👇

www.stefanjudis.com/blog/web-wee...

1 3 20

CSS by T. Afif @css-only.dev · 5d

As long as they are valid unit and recognized then it means they are supported. You cannot use any random unit and do calc(5unit / 10unit)

and "1/10Hz" is, mathematically speaking, seconds so it should be valid as a duration.

CSS by T. Afif @css-only.dev · 5d

It's supported, I tried "opacity: calc(5hz / 10hz);" and the division worked

CSS by T. Afif @css-only.dev · 5d

And how can we verify? I have no idea where we can use Hz in a real code to test it😅

CSS by T. Afif @css-only.dev · 5d

There is nothing missing. "10 repeating events per second" means that the duration of the animation should be "0.1s" which mean the animation (the event) will repeat 10 times in 1sec.

Also, mathematically speaking, Hz is the inverse of second so 1/Hz = s: en.wikipedia.org/wiki/Inverse...

CSS by T. Afif @css-only.dev · 5d

In CSS, we have Frequency Units (Hertz), and since unit division is now allowed, I expect the below to work.

It doesn't work. Maybe too much for CSS, or should it be allowed? 🤔

In case you are wondering, Hertz is the inverse of Seconds, so the below is mathematically valid to calculate a duration.

The following CSS code:
.frequency {
animation: move calc(1/10Hz) infinite;
}

3 2 8

CSS by T. Afif @css-only.dev · 6d

@alvaromontoro.com and @comicss.art

1 5

Reposted by CSS by T. Afif

CSS by T. Afif @css-only.dev · 6d

A dynamic way to emulate a range selection using if() and sibling-index()

css-tip.com/range-select...

What's the point? It can be useful if you want to update the range on the fly by controlling two variables. Something you cannot do with a classic selector.

Overview of the CSS code from the linked post

1 7

CSS by T. Afif @css-only.dev · 6d

1 7

Reposted by CSS by T. Afif

Kevin Powell @kevinpowell.co · 6d

Do you have any smaller/under-the-radar CSS sites/people that you follow?

Looking for blogs, YouTube channels, or anyone who just shares cool CSS stuff.

Reply if you know any, and look at the replies for new people/sites to follow 😊

17 14 55

CSS by T. Afif @css-only.dev · 6d

It's not only about the notation but also about the fact that you can update the X Y on the fly. We always wanted to be able to control :nth-child() using variables, etc but it's not possible.

The only way is to simulate them with calculation. Another example 👇

Dynamic nth-child() using sibling-index() and if()

Use modern CSS to control the arguments of nth-child() and update them on the fly

css-tip.com

CSS by T. Afif @css-only.dev · 6d

another solution with better support but I think chrome only as well: codepen.io/t_afif/pen/Y...

the formula is ((Y +1) - i) and (i - (X + 1))

CSS by T. Afif @css-only.dev · 7d

Possible if the size of the cells is not defined by the items (especially the height part). I have a draft idea to create something like that but never had a chance to do it.

In all the cases, it would be kind of hacky and very limited.

1 1

Reposted by CSS by T. Afif

Ana Tudor @anatudor.bsky.social · 7d

For details about the how, check out my newest article: Inset Shadows Directly on `img` Elements frontendmasters.com/blog/inset-s...

#SVG #filter #CSS

1 1 17

CSS by T. Afif @css-only.dev · 8d

Do you have a product/website to promote? I am offering a 20% discount if you book a slot for the last 3 months of this year!

css-tip.com/advertise/

Hurry up! Don't miss the opportunity to reach a wide audience of web developers!

Reposted by CSS by T. Afif

CSS by T. Afif @css-only.dev · 11d

I had to try it as well!

css-tip.com/3d-box/

A perfect example to illustrate modern CSS features such as corner-shape, if(), @property, math functions, etc.

3 22

CSS by T. Afif @css-only.dev · 9d

How it looks when you program with modern CSS 😎

An overview of the CSS code used in the demo of the quoted post.

CSS by T. Afif @css-only.dev · 9d

He simply need to use any "modern CSS framework" and it's done. They already produce that kind of code.

CSS by T. Afif @css-only.dev · 11d

I had to try it as well!

css-tip.com/3d-box/

A perfect example to illustrate modern CSS features such as corner-shape, if(), @property, math functions, etc.

3 22

CSS by T. Afif @css-only.dev · 12d

indeed it's fun!
codepen.io/t_afif/pen/r...

There is some room for improvement and I need to test the edge cases but I got something 👍