Загрузка видео...

Не удалось загрузить видео

На главную

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,895 subscribers

44,674 просмотров • 1 год назад •via X (Twitter)

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Hugo Ventura
Hugo Ventura1 год назад

Combine that with easing gradients for the mask ( and you get the cleanest progressive blur possible

Фото профиля {Bhide}.Svelte
{Bhide}.Svelte1 год назад

😍😍 Your work blows me away every single time...Amazing 👌🏻

Фото профиля anotherdeveloper.dev
anotherdeveloper.dev1 год назад

So this is how Phamous does all that cool stuff? I thought he was using svg filters or something. Amazing thanks for sharing Jhey :)

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

yep - it is jus little overlay stacks for a cross browser compatible solution 🤙 issue with using an SVG filter for overlay is that it isn't cross browser compatible because url doesn't play ball in WebKit 🥲 (works fine if you're applying it direct through filter though)

Фото профиля Cory Simmons
Cory Simmons1 год назад

Very cool technique 👍

Фото профиля Josh Miller
Josh Miller1 год назад

Yes Captain! 🫡

Фото профиля chope
chope1 год назад

Wizard 🧙‍♂️

Фото профиля Rafael Lopes
Rafael Lopes1 год назад

Bruxo

Фото профиля Manfred Neustifter
Manfred Neustifter1 год назад

🙌

Фото профиля Voicu Apostol
Voicu Apostol1 год назад

Are you using opacity? The main image still shows, so it might not be fully progressive. Not sure..

Похожие видео

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓
0:31

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

jhey ʕ•ᴥ•ʔ

75,476 просмотров • 1 год назад

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇
0:27

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,494 просмотров • 6 месяцев назад

progressive blur 💕 Figma
1:47

progressive blur 💕 Figma

Inga Hampton

46,137 просмотров • 1 год назад

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#​displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳
0:32

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#​displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳

jhey ʕ•ᴥ•ʔ

133,639 просмотров • 11 месяцев назад

Smart animate + Texture + Progressive blur in Figma LETS GOOOOOO!!!!
0:36

Smart animate + Texture + Progressive blur in Figma LETS GOOOOOO!!!!

miggi from figgi

24,103 просмотров • 1 год назад

Expandable Search Bar + Progressive Blur Effect | SwiftUI | Xcode 16
0:23

Expandable Search Bar + Progressive Blur Effect | SwiftUI | Xcode 16

Kavsoft

16,563 просмотров • 1 год назад

🔥We are adding Progressive Blur + Gradients to Hana! All interactive, all real-time. Demo in the comments.
0:49

🔥We are adding Progressive Blur + Gradients to Hana! All interactive, all real-time. Demo in the comments.

Spline

50,383 просмотров • 1 год назад

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙
0:36

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

jhey ʕ•ᴥ•ʔ

495,678 просмотров • 2 лет назад

I built a smooth progressive blur generator for the web. Super fun to build. 🫆
1:03

I built a smooth progressive blur generator for the web. Super fun to build. 🫆

Voicu Apostol

48,342 просмотров • 3 месяцев назад

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨
0:28

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

jhey ʕ•ᴥ•ʔ

154,954 просмотров • 1 год назад

Blur - For Tomorrow (1993) One of the best Blur songs!
2:17

Blur - For Tomorrow (1993) One of the best Blur songs!

Jonny Mitchell

19,996 просмотров • 2 месяцев назад

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight
0:33

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

jhey ʕ•ᴥ•ʔ

104,890 просмотров • 2 лет назад

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @​keyframes in { 0% { mask-position: -6ch 0; }}
0:39

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @​keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

125,904 просмотров • 1 год назад

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇
1:23

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

186,673 просмотров • 2 лет назад

Blur Blur Blur sheep are u feeling good😂😂😂😂
0:47

Blur Blur Blur sheep are u feeling good😂😂😂😂

SAPPHIRE💎💎 /CybersecurityGirl

37,077 просмотров • 3 месяцев назад

“Blur Blur Blurship” 🤣🤣🤣
1:38

“Blur Blur Blurship” 🤣🤣🤣

NWACHINEMERE

95,751 просмотров • 5 месяцев назад

blur blur blurship😭😂😂😂
1:10

blur blur blurship😭😂😂😂

ABISCO

71,804 просмотров • 4 месяцев назад

Everywhere don blur blur blurship!!😭😭😭
2:21

Everywhere don blur blur blurship!!😭😭😭

LIVELY

51,073 просмотров • 4 месяцев назад

Quick tutorial on how to stack elements using CSS grid instead of position absolute:
2:21

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Jess Chan | Coder Coder

11,606 просмотров • 1 месяц назад

Nice blur transition to expose the CoT without overwhelming the conversation scroll view.
0:20

Nice blur transition to expose the CoT without overwhelming the conversation scroll view.

Gavin Nelson

152,378 просмотров • 1 год назад