Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Hugo Ventura profil fotoğrafı
Hugo Ventura1 yıl önce

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

{Bhide}.Svelte profil fotoğrafı
{Bhide}.Svelte1 yıl önce

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

anotherdeveloper.dev profil fotoğrafı
anotherdeveloper.dev1 yıl önce

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 ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 profil fotoğrafı
Cory Simmons1 yıl önce

Very cool technique 👍

Josh Miller profil fotoğrafı
Josh Miller1 yıl önce

Yes Captain! 🫡

chope profil fotoğrafı
chope1 yıl önce

Wizard 🧙‍♂️

Rafael Lopes profil fotoğrafı
Rafael Lopes1 yıl önce

Bruxo

Manfred Neustifter profil fotoğrafı
Manfred Neustifter1 yıl önce

🙌

Voicu Apostol profil fotoğrafı
Voicu Apostol1 yıl önce

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

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

progressive blur 💕 Figma
1:47

progressive blur 💕 Figma

Inga Hampton

46,137 görüntüleme • 1 yıl önce

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 görüntüleme • 11 ay önce

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 görüntüleme • 1 yıl önce

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

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

Kavsoft

16,563 görüntüleme • 1 yıl önce

🔥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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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

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

SAPPHIRE💎💎 /CybersecurityGirl

37,077 görüntüleme • 3 ay önce

“Blur Blur Blurship” 🤣🤣🤣
1:38

“Blur Blur Blurship” 🤣🤣🤣

NWACHINEMERE

95,751 görüntüleme • 5 ay önce

blur blur blurship😭😂😂😂
1:10

blur blur blurship😭😂😂😂

ABISCO

71,804 görüntüleme • 4 ay önce

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

Everywhere don blur blur blurship!!😭😭😭

LIVELY

51,073 görüntüleme • 4 ay önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 1 yıl önce