Loading video...

Video Failed to Load

Go Home

how the clip + mask combo works: mask the container element using the relevant keycap image so the image is clipped on translate clip the container element so the hit area doesn't overlap other keys 🧑‍🍳

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

135,131 subscribers

115,732 views • 1 year ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;
0:13

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

211,333 views • 1 month ago

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:
0:17

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,451 views • 1 year ago

3. Modify image Use this prompt to modify the image you have chosen: "Modify image [1] with seed [1470033597]: add a parrot on her shoulder" Dall-E 3 identifies the image and makes the changes for you! Tips and tricks: - You can generate as many variations as you like. - It's also possible to remove an element from the image using the same method. - Sometimes the image isn't 100% identical, but still looks very similar.
0:10

3. Modify image Use this prompt to modify the image you have chosen: "Modify image [1] with seed [1470033597]: add a parrot on her shoulder" Dall-E 3 identifies the image and makes the changes for you! Tips and tricks: - You can generate as many variations as you like. - It's also possible to remove an element from the image using the same method. - Sometimes the image isn't 100% identical, but still looks very similar.

Paul Couvert

44,073 views • 2 years ago

🖤Jupiter🖤Live2D Rigger 🖤 The braid part is extended and inverse clipped to the green mask. The line is clipped to the braid part :D
0:11

🖤Jupiter🖤Live2D Rigger 🖤 The braid part is extended and inverse clipped to the green mask. The line is clipped to the braid part :D

🌌Soulty | Live2D Modeller

46,129 views • 1 year ago

Got carried away with this interactive module for breaking down the CSS mask-image property
0:16

Got carried away with this interactive module for breaking down the CSS mask-image property

rauno

31,639 views • 11 months ago

The 🥷 hit her so hard the clip came out the 🔫.
0:12

The 🥷 hit her so hard the clip came out the 🔫.

FightBell🔔

268,963 views • 7 months ago

The VIPER Titanium Money Clip is constructed from 100% solid American titanium and was designed using the latest 3D modelling and finite element analysis software. This premium money clip is engineered to hold up to 60 folded bill & cards without the bulk of a wallet.
0:42

The VIPER Titanium Money Clip is constructed from 100% solid American titanium and was designed using the latest 3D modelling and finite element analysis software. This premium money clip is engineered to hold up to 60 folded bill & cards without the bulk of a wallet.

Superior Titanium Products, Inc.

5,420,029 views • 3 years ago

why is the mask so high quality 😭😭
0:15

why is the mask so high quality 😭😭

nori✩

28,784 views • 6 months ago

Sonic fans using the ‘’Roll The Windows Up’’ clip on Crash is so funny because this is literally the lead up to it
0:17

Sonic fans using the ‘’Roll The Windows Up’’ clip on Crash is so funny because this is literally the lead up to it

🩷🍉 Avery 🍉🩷

1,115,773 views • 1 year ago

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 views • 2 months ago

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:
0:15

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,135 views • 1 year ago

🥷 hit her so hard the clip flew out the gun
0:12

🥷 hit her so hard the clip flew out the gun

Crazy Videos 🔞

312,744 views • 1 year ago

ProjectAlpha22 🏳️‍🌈 I hand animate it while referencing the clip, and for the camera, I have the clip for the shot in the scene camera, and I do a really silly thing where I place the blender cursor on a defined point in the image, and rotate the camera to keep the image in that "spot"
0:27

ProjectAlpha22 🏳️‍🌈 I hand animate it while referencing the clip, and for the camera, I have the clip for the shot in the scene camera, and I do a really silly thing where I place the blender cursor on a defined point in the image, and rotate the camera to keep the image in that "spot"

ummwell

11,107 views • 1 year ago

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

65,006 views • 1 year ago

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar
0:12

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar

dmytro

54,436 views • 7 months ago

How about a Container House Over the Ocean
0:14

How about a Container House Over the Ocean

Architecture Presentation

249,444 views • 6 months ago

britt removing the bed because she couldn't handle the mental image is so real
0:11

Sensitive content

britt removing the bed because she couldn't handle the mental image is so real

sky ミ☆

315,858 views • 1 month ago

how is he even smoking with the mask on?? 😭
0:11

how is he even smoking with the mask on?? 😭

Katzen ☢️

17,663 views • 1 year ago

This 🥷 hit her so hard the clip came out the gun😭
0:12

This 🥷 hit her so hard the clip came out the gun😭

#1 𝕏 Media Plug 😈 ✪

11,803,202 views • 1 year ago

Card design using Cavalry for the animation. Midjourney for the source image, turned into a 3D model using KREA AI. Then in Cavalry converted using the Image Sampler.
0:10

Card design using Cavalry for the animation. Midjourney for the source image, turned into a 3D model using KREA AI. Then in Cavalry converted using the Image Sampler.

Yianni

36,910 views • 10 months ago