Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 🧑‍🍳

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,476 subscribers

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

Bilim & TeknolojiEğitimSanat
LIVE

Anya Rossi• Live Now

Private livecam show

8 Yorum

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ1 yıl önce

here's the @CodePen for this one — always fun playing with these 🤙

Mobile Scanner profil fotoğrafı
Mobile Scanner1 yıl önce

Scan any documents, convert images into text, PDF files, etc. 👍

ErreTheBig profil fotoğrafı
ErreTheBig1 yıl önce

Are you using css layers?

ray profil fotoğrafı
ray1 yıl önce

You're a CSS wizard

Elaroui Mohammed profil fotoğrafı
Elaroui Mohammed1 yıl önce

Can you share Code ?!

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ1 yıl önce

sure can 🤙

Hydra profil fotoğrafı
Hydra1 yıl önce

Sick, definitely using this

Alexis Mora profil fotoğrafı
Alexis Mora1 yıl önce

Hey jhey, what do u use to edit/record the videos? 👁️

Benzer Videolar

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 👇🎬
0:42

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

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

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,354 görüntüleme • 10 ay önce

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @​keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇
0:59

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @​keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

279,699 görüntüleme • 2 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

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 • 5 ay önce

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇
0:26

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

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

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇
0:33

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇

jhey ʕ•ᴥ•ʔ

28,685 görüntüleme • 1 yıl önce

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,034 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 multiplayer stack masking 🤙 – create a radial gradient circle mask that cuts out the previous disc – on :hover, transition mask of the sibling – let the background shine through the border space 🎉
0:41

CSS multiplayer stack masking 🤙 – create a radial gradient circle mask that cuts out the previous disc – on :hover, transition mask of the sibling – let the background shine through the border space 🎉

jhey ʕ•ᴥ•ʔ

122,529 görüntüleme • 1 yıl önce

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇
0:20

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

490,227 görüntüleme • 3 yıl önce

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

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

CM

21,214 görüntüleme • 2 ay önce

placeholder for an intro video we were gonna have playing when you boot up the game it was gonna be so fucking peak........................
1:20

placeholder for an intro video we were gonna have playing when you boot up the game it was gonna be so fucking peak........................

cyn

22,152 görüntüleme • 9 ay önce

ICEMAN WITH THE CLEAN SHERIFF ACE 🥶 Jimzo 🔸enter below for your chance to win! #UnlockYourAce #VCTAmericas Riot Games Placeholder
0:20

ICEMAN WITH THE CLEAN SHERIFF ACE 🥶 Jimzo 🔸enter below for your chance to win! #UnlockYourAce #VCTAmericas Riot Games Placeholder

iBUYPOWER

79,098 görüntüleme • 2 yıl önce

A placeholder of a post, to thank you all for your kind condolences in the wake of my mother's passing. 🙏
1:45

A placeholder of a post, to thank you all for your kind condolences in the wake of my mother's passing. 🙏

S. Anil Kumar

149,629 görüntüleme • 1 ay önce

New Electric Charge BR Showcase The BR class name is placeholder for now. Subject to change until official release. Credit to @/Temp for the clip. #CODMobile #callofdutymobile #codm #codmnews #codmleaks
0:36

New Electric Charge BR Showcase The BR class name is placeholder for now. Subject to change until official release. Credit to @/Temp for the clip. #CODMobile #callofdutymobile #codm #codmnews #codmleaks

Leakers On Duty

30,657 görüntüleme • 1 ay önce

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇
0:47

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

258,625 görüntüleme • 2 yıl önce