Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨‍🍳

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,349 subscribers

159,868 Aufrufe • vor 9 Monaten •via X (Twitter)

Wissenschaft & TechnologieBildungKunst
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇
0:36

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,795 Aufrufe • vor 2 Jahren

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇
0:32

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇

jhey ʕ•ᴥ•ʔ

83,703 Aufrufe • vor 11 Monaten

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness
0:53

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

Simon Vrachliotis

23,445 Aufrufe • vor 1 Jahr

CSS Tip 🤙 You can create this header effect using position: sticky, clip-path, and custom properties 🔥 (Video 👀) header { position: sticky; top: var(--margin); } main { clip-path: inset(var(--header) 0 0 0);) } No mix-blend-mode or animations required ✨ What's the trick then? 🧐 Duplicate the header element first. Then fix the positioning of one behind the content. header[aria-hidden] { position: fixed; top: 0; margin-top: var(--margin); } Clip the top of the content to reveal the fixed header and put a sticky-positioned header inside it that matches up in position and size ✂️ :root { --header: calc(var(--margin) + var(--font-size)); } main { clip-path: inset(var(--header) 0 0 0); } header { position: sticky; top: var(--margin); } Make your life easier with custom properties 🙌 As the body scrolls, the fixed header gets covered by the clipped content and creates the effect ✨ And because the sticky header is "stuck" it reveals itself as the content goes out of view 😍 This one's pretty cool. You can set the font color to whatever you want. At first glance, it looked like it was a mix-blend-mode thing. It doesn't have to be! Think about it and lean into z-indexing 🫶 Watch the video to get an idea of things with the exploding view 🤯 Any questions, etc. let me know! Will likely do a YouTube video on this one too! 🙏 CodePen.IO link below! 👇
1:22

CSS Tip 🤙 You can create this header effect using position: sticky, clip-path, and custom properties 🔥 (Video 👀) header { position: sticky; top: var(--margin); } main { clip-path: inset(var(--header) 0 0 0);) } No mix-blend-mode or animations required ✨ What's the trick then? 🧐 Duplicate the header element first. Then fix the positioning of one behind the content. header[aria-hidden] { position: fixed; top: 0; margin-top: var(--margin); } Clip the top of the content to reveal the fixed header and put a sticky-positioned header inside it that matches up in position and size ✂️ :root { --header: calc(var(--margin) + var(--font-size)); } main { clip-path: inset(var(--header) 0 0 0); } header { position: sticky; top: var(--margin); } Make your life easier with custom properties 🙌 As the body scrolls, the fixed header gets covered by the clipped content and creates the effect ✨ And because the sticky header is "stuck" it reveals itself as the content goes out of view 😍 This one's pretty cool. You can set the font color to whatever you want. At first glance, it looked like it was a mix-blend-mode thing. It doesn't have to be! Think about it and lean into z-indexing 🫶 Watch the video to get an idea of things with the exploding view 🤯 Any questions, etc. let me know! Will likely do a YouTube video on this one too! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

427,736 Aufrufe • vor 2 Jahren

Photoshop trick - Fill area and blend images ( smart.graphicss )
0:44

Photoshop trick - Fill area and blend images ( smart.graphicss )

Laurent Correia Bill

194,438 Aufrufe • vor 1 Jahr

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)
0:48

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

437,426 Aufrufe • vor 2 Jahren

If you have an asset in Figma and you'd like to change it's colour to your perferred colour (quick and efficient way), layer the colour over the image in "Fill" properties and apply a *colour* mix-blend mode to it. Exporting it as an asset has a different workflow.
0:45

If you have an asset in Figma and you'd like to change it's colour to your perferred colour (quick and efficient way), layer the colour over the image in "Fill" properties and apply a *colour* mix-blend mode to it. Exporting it as an asset has a different workflow.

seyi

16,832 Aufrufe • vor 2 Jahren

Photoshop Auto-Blend Trick for Perfect Photo Composites
0:35

Photoshop Auto-Blend Trick for Perfect Photo Composites

Photoshop Tricks!

28,863 Aufrufe • vor 5 Monaten

Blend Space Assets in Unreal Engine actually have an Analysis mode that will look at the foot placement to calculate how fast a character was moving and put the animation in the correct position on the blend space. Way better results than just "eye balling it". #UETips
0:45

Blend Space Assets in Unreal Engine actually have an Analysis mode that will look at the foot placement to calculate how fast a character was moving and put the animation in the correct position on the blend space. Way better results than just "eye balling it". #UETips

Chris Murphy

18,043 Aufrufe • vor 2 Jahren

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇
0:33

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

840,382 Aufrufe • vor 7 Monaten

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎
1:12

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎

jhey ʕ•ᴥ•ʔ

93,589 Aufrufe • vor 2 Jahren

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳
0:32

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

207,140 Aufrufe • vor 7 Monaten

How to Auto Blend Layer
0:49

How to Auto Blend Layer

Photoshop Tricks!

39,954 Aufrufe • vor 1 Jahr

The Golden Honey Mix People Swear Is a Game-Changer!" This ancient blend is making a comeback - boosting energy, soothing the body, and keeping you glowing from the inside out. One spoon a day... and you'll feel the difference 👇
0:28

The Golden Honey Mix People Swear Is a Game-Changer!" This ancient blend is making a comeback - boosting energy, soothing the body, and keeping you glowing from the inside out. One spoon a day... and you'll feel the difference 👇

Michelle Labs

141,595 Aufrufe • vor 6 Monaten

another light trick for csp! use the divide blend mode with the complementary color of ur glow color (ie blue for yellow vice versa) divide preserves the relationship between your values when adding the glow effect, so you get a clean look
0:45

another light trick for csp! use the divide blend mode with the complementary color of ur glow color (ie blue for yellow vice versa) divide preserves the relationship between your values when adding the glow effect, so you get a clean look

tomato🍅

136,218 Aufrufe • vor 8 Monaten

How The Ring And Chain Trick Works 😮
0:40

How The Ring And Chain Trick Works 😮

Zack D. Films

2,368,930 Aufrufe • vor 1 Monat

The blend mode for the Glow filter is actually pretty interesting 😂
0:33

The blend mode for the Glow filter is actually pretty interesting 😂

fafa

10,232 Aufrufe • vor 8 Monaten

Auto blend layer
1:03

Auto blend layer

Photoshop Tricks!

999,486 Aufrufe • vor 3 Jahren

The mechanic's trick for the motorcycle chain.
1:01

The mechanic's trick for the motorcycle chain.

Life Fix

9,985,782 Aufrufe • vor 5 Monaten