Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Hugo Ventura
Hugo Venturavor 1 Jahr

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

Profilbild von {Bhide}.Svelte
{Bhide}.Sveltevor 1 Jahr

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

Profilbild von anotherdeveloper.dev
anotherdeveloper.devvor 1 Jahr

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

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

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)

Profilbild von Cory Simmons
Cory Simmonsvor 1 Jahr

Very cool technique 👍

Profilbild von Josh Miller
Josh Millervor 1 Jahr

Yes Captain! 🫡

Profilbild von chope
chopevor 1 Jahr

Wizard 🧙‍♂️

Profilbild von Rafael Lopes
Rafael Lopesvor 1 Jahr

Bruxo

Profilbild von Manfred Neustifter
Manfred Neustiftervor 1 Jahr

🙌

Profilbild von Voicu Apostol
Voicu Apostolvor 1 Jahr

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

Ähnliche Videos

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

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

progressive blur 💕 Figma
1:47

progressive blur 💕 Figma

Inga Hampton

46,137 Aufrufe • vor 1 Jahr

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

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

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

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

Kavsoft

16,563 Aufrufe • vor 1 Jahr

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

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

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

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

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

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

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

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

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

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

SAPPHIRE💎💎 /CybersecurityGirl

37,077 Aufrufe • vor 3 Monaten

“Blur Blur Blurship” 🤣🤣🤣
1:38

“Blur Blur Blurship” 🤣🤣🤣

NWACHINEMERE

95,751 Aufrufe • vor 5 Monaten

blur blur blurship😭😂😂😂
1:10

blur blur blurship😭😂😂😂

ABISCO

71,804 Aufrufe • vor 4 Monaten

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

Everywhere don blur blur blurship!!😭😭😭

LIVELY

51,073 Aufrufe • vor 4 Monaten

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

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