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

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

На главную

CSS placeholder shimmer effect ✨ – overlay a placeholder element – set aria-hidden and pointer-events: none – show when :placeholder-shown – visually hide actual :placeholder – use mask for the border – background-clip for the text 🤙 Check the debug 👇🎬

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

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

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

little text shimmer was used here 👇 and there was a request for how to do it 🤙 you could use :placeholder and @​property too. gets a little tricky with browser inconsistency though 🥲

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

if you're interested in learning more about building things like this and other awesome UI on the web... first issue goes out this week 🤙 (support has been awesome btw, thank you people 🙏)

Фото профиля Gustav Ekerot
Gustav Ekerot1 год назад

jhey you’re like 83% of my bookmarks

Фото профиля Joe Attardi
Joe Attardi1 год назад

That is awesome! It's not as cool as yours but I did something similar a while back ,a button with a shine effect on hover:

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

Like that with the twist 🤙 Did this one with a link to play with that shine bar effect 🤓

Фото профиля Ayan Patel
Ayan Patel1 год назад

It's look Clean 🗿

Фото профиля Dennis Plucinik
Dennis Plucinik1 год назад

@chrispian Very clean

Фото профиля Adnan Muttaqin
Adnan Muttaqin1 год назад

That is awesome!

Фото профиля Hüseyin
Hüseyin1 год назад

CSS can be pure art sometimes

Фото профиля Gemma Black
Gemma Black1 год назад

Just with CSS?! Nice!

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

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 просмотров • 2 лет назад