Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

Wissenschaft & TechnologieBildungKunst
LIVE

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 1 Jahr

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

Profilbild von Mobile Scanner
Mobile Scannervor 1 Jahr

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

Profilbild von ErreTheBig
ErreTheBigvor 1 Jahr

Are you using css layers?

Profilbild von ray
rayvor 1 Jahr

You're a CSS wizard

Profilbild von Elaroui Mohammed
Elaroui Mohammedvor 1 Jahr

Can you share Code ?!

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 1 Jahr

sure can 🤙

Profilbild von Hydra
Hydravor 1 Jahr

Sick, definitely using this

Profilbild von Alexis Mora
Alexis Moravor 1 Jahr

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

Ähnliche Videos

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 10 Monaten

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

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 Aufrufe • vor 6 Monaten

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

Placeholder Pose for Boyfriend's Results Screen.

Funkin' Remnants

11,415 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 1 Jahr

replaced the placeholder hit particle finally yyyy
0:21

replaced the placeholder hit particle finally yyyy

naniel

23,041 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 1 Jahr

Stop designing with placeholder content
0:20

Stop designing with placeholder content

Zander Whitehurst

130,087 Aufrufe • vor 2 Jahren

placeholder containers
0:51

placeholder containers

Andrei Mishanin

43,096 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 1 Jahr

progress on the game is going great (PLEASE NOTE THAT: MOST THINGS SHOWN HERE ARE PLACEHOLDER OR UNFINISHED) [#roblox #robloxdev]
1:55

progress on the game is going great (PLEASE NOTE THAT: MOST THINGS SHOWN HERE ARE PLACEHOLDER OR UNFINISHED) [#roblox #robloxdev]

FEARBOUND

39,326 Aufrufe • vor 1 Jahr

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