Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

10 Kommentare

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

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 🥲

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

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 🙏)

Profilbild von Gustav Ekerot
Gustav Ekerotvor 1 Jahr

jhey you’re like 83% of my bookmarks

Profilbild von Joe Attardi
Joe Attardivor 1 Jahr

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:

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

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

Profilbild von Ayan Patel
Ayan Patelvor 1 Jahr

It's look Clean 🗿

Profilbild von Dennis Plucinik
Dennis Plucinikvor 1 Jahr

@chrispian Very clean

Profilbild von Adnan Muttaqin
Adnan Muttaqinvor 1 Jahr

That is awesome!

Profilbild von Hüseyin
Hüseyinvor 1 Jahr

CSS can be pure art sometimes

Profilbild von Gemma Black
Gemma Blackvor 1 Jahr

Just with CSS?! Nice!

Ähnliche Videos

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 Aufrufe • vor 2 Jahren