Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,463 subscribers

152,812 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 profil fotoğrafı
Gustav Ekerot1 yıl önce

jhey you’re like 83% of my bookmarks

Joe Attardi profil fotoğrafı
Joe Attardi1 yıl önce

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 ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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

Ayan Patel profil fotoğrafı
Ayan Patel1 yıl önce

It's look Clean 🗿

Dennis Plucinik profil fotoğrafı
Dennis Plucinik1 yıl önce

@chrispian Very clean

Adnan Muttaqin profil fotoğrafı
Adnan Muttaqin1 yıl önce

That is awesome!

Hüseyin profil fotoğrafı
Hüseyin1 yıl önce

CSS can be pure art sometimes

Gemma Black profil fotoğrafı
Gemma Black1 yıl önce

Just with CSS?! Nice!

Benzer Videolar

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 🧑‍🍳
0:27

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 ʕ•ᴥ•ʔ

54,936 görüntüleme • 1 yıl önce

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

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

dashase

477,117 görüntüleme • 10 ay önce

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

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

Miziziziz

11,556 görüntüleme • 1 yıl önce

Placeholder Pose for Boyfriend's Results Screen.
0:27

Placeholder Pose for Boyfriend's Results Screen.

Funkin' Remnants

11,415 görüntüleme • 1 yıl önce

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

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

MOD Yo-kai Watch 3: Extremal Calamity

23,035 görüntüleme • 6 ay önce

placeholder containers
0:51

placeholder containers

Andrei Mishanin

43,096 görüntüleme • 1 yıl önce

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

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

subject_0

25,242 görüntüleme • 1 yıl önce

replaced the placeholder hit particle finally yyyy
0:21

replaced the placeholder hit particle finally yyyy

naniel

23,041 görüntüleme • 2 ay önce

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

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

Kashiiera

18,438 görüntüleme • 4 ay önce

opponent is placeholder
0:41

opponent is placeholder

d4rkwinged

71,676 görüntüleme • 1 yıl önce

Oguri BearCat (Placeholder)
0:24

Oguri BearCat (Placeholder)

Frug

63,750 görüntüleme • 1 ay önce

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
0:20

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,425 görüntüleme • 1 yıl önce

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

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

Kitamiya

36,904 görüntüleme • 1 yıl önce

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

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

Squeaks D’Corgeh

23,050 görüntüleme • 6 ay önce

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

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 görüntüleme • 3 yıl önce

Stop designing with placeholder content
0:20

Stop designing with placeholder content

Zander Whitehurst

130,087 görüntüleme • 2 yıl önce

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

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

Molag

25,763 görüntüleme • 9 ay önce

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! 👇
0:37

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 görüntüleme • 2 yıl önce

Easy DIY Name Placeholder Ideas For Your Dream Wedding!🤵👰‍♀💍
3:03

Easy DIY Name Placeholder Ideas For Your Dream Wedding!🤵👰‍♀💍

Craft Gallery

201,635 görüntüleme • 11 ay önce