正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 👇🎬

jhey ʕ•ᴥ•ʔ

145,959 subscribers

152,605 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

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 placeholder shimmer ✨ - overlay a placeholder element – show when :placeholder-shown – use mask for the border – background-clip for the text - animate the gradient position love playin' with these 🧑‍🍳

CSS placeholder shimmer ✨ - overlay a placeholder element – show when :placeholder-shown – use mask for the border – background-clip for the text - animate the gradient position love playin' with these 🧑‍🍳

jhey ʕ•ᴥ•ʔ

46,356 次观看 • 1 年前

First prototype, the chain is just a placeholder for now to check the balance

First prototype, the chain is just a placeholder for now to check the balance

dashase

476,769 次观看 • 9 个月前

added some more effects when shooting, improved the vision obscuring effect, and added some placeholder sfx

added some more effects when shooting, improved the vision obscuring effect, and added some placeholder sfx

Miziziziz

11,556 次观看 • 1 年前

Placeholder Pose for Boyfriend's Results Screen.

Placeholder Pose for Boyfriend's Results Screen.

Funkin' Remnants

11,415 次观看 • 1 年前

Detective Conyan Animations Showcase!!! Ignore the soultimate, it's a placeholder for now #yokaiwatch

Detective Conyan Animations Showcase!!! Ignore the soultimate, it's a placeholder for now #yokaiwatch

MOD Yo-kai Watch 3: Extremal Calamity

23,035 次观看 • 5 个月前

placeholder containers

placeholder containers

Andrei Mishanin

42,929 次观看 • 11 个月前

replaced the placeholder hit particle finally yyyy

replaced the placeholder hit particle finally yyyy

naniel

23,041 次观看 • 1 个月前

i require survivor suggestions for the masked killah gam run and walk anim is a placeholder

i require survivor suggestions for the masked killah gam run and walk anim is a placeholder

subject_0

25,242 次观看 • 1 年前

The Spartan Laser was used as a placeholder for the sentinel beam lol Volume warning, seriously

The Spartan Laser was used as a placeholder for the sentinel beam lol Volume warning, seriously

Kashiiera

18,438 次观看 • 3 个月前

Oguri BearCat (Placeholder)

Oguri BearCat (Placeholder)

Frug

60,614 次观看 • 9 天前

opponent is placeholder

opponent is placeholder

d4rkwinged

71,624 次观看 • 1 年前

Can't show much of the game yet, but here's an alien tripod I made for it. (The map is a placeholder) #RobloxDev #Roblox

Can't show much of the game yet, but here's an alien tripod I made for it. (The map is a placeholder) #RobloxDev #Roblox

Remon

17,114 次观看 • 1 年前

Day 14 Finished Hide and Seek level Sorry for using Little snatcher asset as placeholder I will replace them

Day 14 Finished Hide and Seek level Sorry for using Little snatcher asset as placeholder I will replace them

Kitamiya

35,668 次观看 • 1 年前

It’s been long enough this was the placeholder kill animation for Comet #Shipwrecked64 #HI09 #Hotel09

It’s been long enough this was the placeholder kill animation for Comet #Shipwrecked64 #HI09 #Hotel09

Squeaks D’Corgeh

23,050 次观看 • 5 个月前

Stop designing with placeholder content

Stop designing with placeholder content

Zander Whitehurst

130,087 次观看 • 1 年前

Check out the trailer for my new thriller The Tutor, only in theaters on 3/24. So excited for this one! 🤰🏻🩸👨‍🏫 placeholder

Check out the trailer for my new thriller The Tutor, only in theaters on 3/24. So excited for this one! 🤰🏻🩸👨‍🏫 placeholder

Victoria Justice

127,313 次观看 • 3 年前

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! 👇

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 年前

oh Rouge i miss the woman you were... (put my render as a placeholder for the voice clips cuz idk)

oh Rouge i miss the woman you were... (put my render as a placeholder for the voice clips cuz idk)

Molag

25,763 次观看 • 8 个月前

The Bituary concept lmao (We need a VA for the lyrics...) Song by MeDicenKay Ray idle by legacy team (placeholder) #execommunity

The Bituary concept lmao (We need a VA for the lyrics...) Song by MeDicenKay Ray idle by legacy team (placeholder) #execommunity

CM

20,209 次观看 • 1 个月前