正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

jhey ʕ•ᴥ•ʔ

145,895 subscribers

44,674 次观看 • 1 年前 •via X (Twitter)

科学技术教育

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 👇🤓

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 👇

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

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 🧑‍🍳

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!!!!

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

miggi from figgi

24,103 次观看 • 1 年前

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

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.

🔥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 🤙

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. 🫆

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 🎨

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!

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

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; }}

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! 👇

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😂😂😂😂

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

SAPPHIRE💎💎 /CybersecurityGirl

37,077 次观看 • 3 个月前

“Blur Blur Blurship” 🤣🤣🤣

“Blur Blur Blurship” 🤣🤣🤣

NWACHINEMERE

95,751 次观看 • 5 个月前

blur blur blurship😭😂😂😂

blur blur blurship😭😂😂😂

ABISCO

71,804 次观看 • 4 个月前

Everywhere don blur blur blurship!!😭😭😭

Everywhere don blur blur blurship!!😭😭😭

LIVELY

51,073 次观看 • 4 个月前

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

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

Jess Chan | Coder Coder

11,606 次观看 • 1 个月前

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

jhey ʕ•ᴥ•ʔ

121,664 次观看 • 1 年前