Загрузка видео...

Не удалось загрузить видео

На главную

Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using

39,397 просмотров • 1 год назад •via X (Twitter)

Комментарии: 11

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

@tailwindcss it's such a minor detail but we all appreciate it when it's there 😅 reminds me that I need to finish the post for this one

Фото профиля Alfon
Alfon1 год назад

@tailwindcss Not sure about the use-case but I converted your implementation into a utility class where you can control the width like with-outline-mask-2 with-outline-mask-8 with-outline-mask-4 Using `+` selector to "sync" the mask is pretty genius 🔥

Фото профиля Bryan Berger
Bryan Berger1 год назад

@tailwindcss got tired of this in Figma, made a thing a while back, code in the thread

Фото профиля Tim
Tim1 год назад

@tailwindcss Is it more easier to use ring for masking?

Фото профиля Alfon
Alfon1 год назад

@tailwindcss Im not sure about that approach. Can you give me more clue/hint on what you mean? 👀

Фото профиля Ruy Monteiro
Ruy Monteiro1 год назад

@tailwindcss This is the kind of thing where there’s a right way to build it and a working way… I’ve always done it using outlines with the same color as the background. Your solution is so much more elegant! Loved it!

Фото профиля Mag
Mag1 год назад

@tailwindcss Here is a quick approach if your background is static color: body { --bg-color: #fff; } .cards { display: flex; } .card { margin-left: -20px; border: 10px solid var(--bg-color); border-radius: 100%; }

Фото профиля Alfon
Alfon1 год назад

@tailwindcss Thanks! I appreciate it!

Фото профиля Nuha F
Nuha F1 год назад

@tailwindcss Cakepp

Фото профиля Syofyan Zuhad 🇵🇸
Syofyan Zuhad 🇵🇸1 год назад

@tailwindcss Keren 🔥

Фото профиля Alfon
Alfon1 год назад

@tailwindcss thank you kak!

Похожие видео