Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @​counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

143,806 Aufrufe • vor 1 Jahr •via X (Twitter)

11 Kommentare

Profilbild von CG
CGvor 1 Jahr

what program is this?

Profilbild von Safari Web Extensions
Safari Web Extensionsvor 1 Jahr

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

Profilbild von Arthur
Arthurvor 1 Jahr

Saved and noted G!

Profilbild von Aingel ✞
Aingel ✞vor 1 Jahr

These are great if you’re hiding elements in a row or column. You can display a count of hidden elements without extra js loops

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

yeah, that's such a legit use case 💯

Profilbild von Mark Renton
Mark Rentonvor 1 Jahr

+1

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

as in, to record it?

Profilbild von Daniel Adeyemo
Daniel Adeyemovor 1 Jahr

we await The Course, sensei!

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

it's comin'! 🎈

Profilbild von Jude Boachie
Jude Boachievor 1 Jahr

I'm looking for your CSS course

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

the people have spoken – it's coming! 🎈

Ähnliche Videos

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

437,300 Aufrufe • vor 2 Jahren