Jobb Smooth

a fictional character

[Neurotorium @neurotorium]

Review the brain from a 360-degree viewpoint 🔄🧠
Examine brain structures from a 360-degree viewpoint, make various incisions and slices, read more about the areas, and download images of the brain.
Access our 3D Brain Atlas here: https://t.co/2eiqTVWhDy

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Trick 🤙

You can create these tab bar controls by using :has() to count the number of tabs ⭐️

.tabs:has(input:nth-of-type(3)){--count: 3;}
.tabs:has(:checked:nth-of-type(3)){--active: 200%;}
.tabs::after{ translate:var(--active) 0;}

Let's break it down in this <noscript>! 📼

Couple of CSS :has() tricks here combined with custom properties 😎

First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏

.tabs { display: grid; grid-auto-flow: column; }

Then you use :has() to count the number of tabs and store that in a custom property 🤓

.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 🫶

Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement:

.tabs::after {
content: "";
position: absolute;
height: 100%;
width: calc(100% / var(--count));
}

See how you can use --count to determine its size 📏

Next, use :has() to determine which tab is active or :checked with 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;
}

Or you could set active to the translation:

.tabs:has(:checked:nth-of-type(2)) { --active: 100%; }

Setting the custom property allows you to use the index elsewhere if you need it 🤙

The final piece 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 link below! 👇

(There's even a @tailwindcss play for this one too 👀)

[Eckler ✦ @daniel_eckler]

Hidden Logo Designs 🧵

Toyota’s logo contains each letter in the brands name.

1/26

[Linda Dong 🍉 @lindadong]

For you aspiring Vision Pro designers!

🥽 New Human Interface Guidelines for Vision Pro (we added ~60k words of wisdom!!)
https://t.co/0yb3ruUJYp

🎨 Figma Vision Pro design kits
https://t.co/AKnnqd9MHg

🍏App icon tool (for previewing juicy 3d icons)
https://t.co/vApLWx6TjP

[Linux Handbook @LinuxHandbook]

Linux sysadmin forced to join a meeting

[Interesting @interestingaf]

Success isn’t linear

[Fabio Spampinato @fabiospampinato]

You can reduce the number of DOM elements and DOM operations _by a lot_ and speed things up as a result by highlighting things with the CSS Custom Highlight API (https://t.co/1wvwIUrjGh).

[Out Of Context Football @nocontextfooty]

https://t.co/sK9u9pVsFE

[Nature is Amazing ☘️ @AMAZlNGNATURE]

Quetzalcoatlus northropi model next to a 1.8m man. The largest known flying animal to ever exist.

[Interesting @interestingaf]

This 1840 desk is next level

[Thijs Niks @thijsniks]

The perfect pizza menu doesn’t exi… https://t.co/PrAZQ4iEnG

[SPACEFILLER @spacefillerart]

I wrote an essay called "Grid World" for the latest issue of The HTML Review (https://t.co/aOsPER98Oe). Read it here: https://t.co/9I3O8tiqD4

I had a really fun time creating the graphics that accompany the essay!

[UX Links @uxlinks]

Super useful 12 Principles Of Animation summary
by @LachinaCreative

#ux #uxdesign #motiondesign #visualdesign #uidesign #animation #css #js #code #programming #apps #uiprinciples #productdesign #usability #ios #mobile #userexperience #100daysofcode #design #art #graphicdesign #visualdesign #appdesign #webdesign

[Nick Babich @101babich]

10 Principles of Motion Design

Based on the Disney's twelve basic principles of animation

📷: @jrcanest

[Matt Jumper @mattjumper]

Launched another @framer site –– https://t.co/YXzAvCA0hp 🍸

[Morten Just @mortenjust]

It never crossed my mind that you could ease a gradient, and and how much better it looks - until Tobias did it for Rotato's new timeline
https://t.co/ISt76Otz9x

[Art อาท แบ่ค☂️ @bact]

ถ้ามีเวลา 10-20 นาที ชวนอ่านมาก่อนเด้อ

Spaces เปิดสไลด์��่ได้
ถ้าพอเห็นโครงสร้างตัวประกาศ+ตัวพรบหลัก มาก่อน จะได้จินตนาการตามได้

���น #พรบคอม หลัก มาตราที่เกี่ยวคือ
14 ฐานความผิด
15 การรับผิดไปด้วยของผู้ให้บริการ (ที่ประกาศนี้จะยกเว้นให้)
20 ขั้นตอนปิดกั้นแบบปกติ (ใช้อำนาจศาล)

[Greg Joswiak @gregjoz]

Apple Maps makes it so easy to get around Tokyo. I just scan the buildings around me with my iPhone 14 Pro camera to generate walking directions exactly as they appear.