Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,361 subscribers

190,822 görüntüleme • 2 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Here's that @CodePen link! 🚀 Really worth messing with the values in DevTools and seeing what a difference it makes and the kind of effects you can create 🤓

Robert McGovern profil fotoğrafı
Robert McGovern2 yıl önce

Neat effect, made me wonder if could be used for a CSS Lava lamp On off chance searched Codepen and guess who was the top hit

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Haha 😅 That one could probably do with a revisit at some point. Funny because these trends go round in cycles. Have a bunch of "Gooey" filter demos from the first time I saw SVG filters which would be wayyyy back now 🥲

abelardoit🐦 profil fotoğrafı
abelardoit🐦2 yıl önce

007? :d

doug chang profil fotoğrafı
doug chang2 yıl önce

wow!!!!

Alexander Schranz profil fotoğrafı
Alexander Schranz2 yıl önce

Maybe with some kind of filter you even can create other colors. Not sure yet why the second bubble isnt showing.

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Exactly that! 🤙 People tend to reach for the SVG filter for ease of use. Like that use of sepia and then the hue-rotate to finish. If you reduce the blur on the level up, it should come back 🤞

Álvaro Montoro profil fotoğrafı
Álvaro Montoro2 yıl önce

It's not limited to black and white in CSS. It works with other colors too, which also makes it easier to generate other colors by applying additional filters like sepia() and hue-rotate().

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Not "limited" but it is in the sense that you can't just use "background-color" which is what most people would want to use to change color.

Ahmad Fathy profil fotoğrafı
Ahmad Fathy2 yıl önce

This brings back some memories 🥹

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Right?! Love that demo by the way, when they merge it reminds me of Dr. Mario 😅

Benzer Videolar

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug
0:29

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

Delba

160,204 görüntüleme • 1 yıl önce

Damn, this is some amazing action and effects animation. 3DBg is in 30fps with motion blur but the cg camera is animated on 1s with the drawings themselves being on 2s and 3s. Interesting 0:00 Spencerwan 0:05 Uncredited 0:07 Weilin 0:13 Tam 0:25 Alaine
0:27

Damn, this is some amazing action and effects animation. 3DBg is in 30fps with motion blur but the cg camera is animated on 1s with the drawings themselves being on 2s and 3s. Interesting 0:00 Spencerwan 0:05 Uncredited 0:07 Weilin 0:13 Tam 0:25 Alaine

Sterling

465,927 görüntüleme • 2 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 ʕ•ᴥ•ʔ

148,525 görüntüleme • 1 yıl önce

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨
0:59

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨

Simon Vrachliotis

12,802 görüntüleme • 1 yıl önce

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙
0:27

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙

jhey ʕ•ᴥ•ʔ

104,078 görüntüleme • 2 yıl önce

A CSS scroll version of the gooey island 🤙 .island { filter: url(#​svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @​keyframes hide { to { translate: -50% -80px; scale: 0.3; } }
0:24

A CSS scroll version of the gooey island 🤙 .island { filter: url(#​svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @​keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,768 görüntüleme • 2 yıl önce

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; }}
0:25

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

You can create the outer radius with CSS alone and no SVG 🤙 1. Create 2 elements 2x the radius size 2. Pin each side 3. Clip segment: clip-path: inset(50% 50% 0 0) 4. Radial gradient mask a pseudo 5. Border the other 6. Flip one side with scale: -1 1; Easier to watch 👇😅
0:28

You can create the outer radius with CSS alone and no SVG 🤙 1. Create 2 elements 2x the radius size 2. Pin each side 3. Clip segment: clip-path: inset(50% 50% 0 0) 4. Radial gradient mask a pseudo 5. Border the other 6. Flip one side with scale: -1 1; Easier to watch 👇😅

jhey ʕ•ᴥ•ʔ

100,645 görüntüleme • 2 yıl önce

quick tutorial (?) on blur with soft edges: if you select using lasso, selection pen etc and gaussian blur, the edges of the blur are sharp but if you use an airbrush to mark the areas on a new layer and use it as selection to blur, you can get a soft effect instead
0:54

quick tutorial (?) on blur with soft edges: if you select using lasso, selection pen etc and gaussian blur, the edges of the blur are sharp but if you use an airbrush to mark the areas on a new layer and use it as selection to blur, you can get a soft effect instead

tomato🍅

146,420 görüntüleme • 6 ay önce

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇
0:31

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

jhey ʕ•ᴥ•ʔ

189,653 görüntüleme • 1 yıl önce

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅
0:46

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,075 görüntüleme • 1 yıl önce

Here's a tip for the new Vertical Streamers! You can source clone your game play and use a composite blur filter to make your backdrop aesthetically pleasing!
3:08

Here's a tip for the new Vertical Streamers! You can source clone your game play and use a composite blur filter to make your backdrop aesthetically pleasing!

Miss Dusk ✧Cosmic Enchantress 🌙

66,726 görüntüleme • 22 gün önce

CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #​fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.​style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #​fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇
1:09

CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #​fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.​style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #​fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

1,179,837 görüntüleme • 2 yıl önce

🟢Substance Painter Tip: The Passthrough blend mode in combination with the Smudge tool lets you adjust generated/filter results in a non-destructive way. E.g.: The Blur filter operates in 2D space, which can cause visible seams at the UV island borders. A fix for that is to add Paint above the Blur and use the Passthrough blend mode. Passthrough allows you to smudge the output below it. Works the same for standard layers!
0:51

🟢Substance Painter Tip: The Passthrough blend mode in combination with the Smudge tool lets you adjust generated/filter results in a non-destructive way. E.g.: The Blur filter operates in 2D space, which can cause visible seams at the UV island borders. A fix for that is to add Paint above the Blur and use the Passthrough blend mode. Passthrough allows you to smudge the output below it. Works the same for standard layers!

Keeki | 3D Artist

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

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.
0:20

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

matia 🇭🇷

290,664 görüntüleme • 2 yıl önce

messin' with CSS + SVG filter sticker effects 🧑‍🍳
0:36

messin' with CSS + SVG filter sticker effects 🧑‍🍳

jhey ʕ•ᴥ•ʔ

160,723 görüntüleme • 1 yıl önce

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)
0:22

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

Framer University

10,450 görüntüleme • 1 yıl önce

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

Spoiler: It's a stack of empty elements using CSS backdrop-filter: blur() with varying strengths/mask 🤙
0:51

Spoiler: It's a stack of empty elements using CSS backdrop-filter: blur() with varying strengths/mask 🤙

jhey ʕ•ᴥ•ʔ

275,529 görüntüleme • 2 yıl önce