Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,351 subscribers

43,682 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiSanat
LIVE

Anya Rossi• Live Now

Private livecam show

4 Yorum

Umair Ahmed profil fotoğrafı
Umair Ahmed1 yıl önce

I feel like writing wow, amazing 😍😍 etc on all your posts is sort of spam, but brooo, you are doing such amazing work. Thank you so much ❤️

Ryan Furrer profil fotoğrafı
Ryan Furrer1 yıl önce

Oh. My. God. 🔥

Jörn Zander profil fotoğrafı
Jörn Zander1 yıl önce

Wow!!!

Fat-end developer profil fotoğrafı
Fat-end developer1 yıl önce

@jh3yy u rule🥹🥹👍

Benzer Videolar

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇
0:33

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇

jhey ʕ•ᴥ•ʔ

28,641 görüntüleme • 1 yıl önce

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙
0:20

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙

jhey ʕ•ᴥ•ʔ

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

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)
0:33

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

jhey ʕ•ᴥ•ʔ

204,870 görüntüleme • 8 ay ö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

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨
0:36

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨

jhey ʕ•ᴥ•ʔ

782,437 görüntüleme • 1 yıl önce

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇
0:33

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

839,312 görüntüleme • 6 ay önce

messin' with text using CSS + SVG 🤌
0:26

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 görüntüleme • 1 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

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌
0:29

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jhey ʕ•ᴥ•ʔ

257,886 görüntüleme • 1 yıl önce

CSS placeholder shimmer effect ✨ – overlay a placeholder element – set aria-hidden and pointer-events: none – show when :placeholder-shown – visually hide actual :placeholder – use mask for the border – background-clip for the text 🤙 Check the debug 👇🎬
0:42

CSS placeholder shimmer effect ✨ – overlay a placeholder element – set aria-hidden and pointer-events: none – show when :placeholder-shown – visually hide actual :placeholder – use mask for the border – background-clip for the text 🤙 Check the debug 👇🎬

jhey ʕ•ᴥ•ʔ

152,605 görüntüleme • 1 yıl önce

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙
0:32

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,241 görüntüleme • 1 yıl önce

the trick: CSS mask, ::before/::after, background-size, animation-delay, and translate 👇 happy holidays! 🤙🎄
0:28

the trick: CSS mask, ::before/::after, background-size, animation-delay, and translate 👇 happy holidays! 🤙🎄

jhey ʕ•ᴥ•ʔ

103,712 görüntüleme • 1 yıl önce

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 • 2 yıl önce

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @​keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇
0:59

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @​keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

279,699 görüntüleme • 2 yıl önce

Clipping Mask Text Effect ( ducthangds )
0:43

Clipping Mask Text Effect ( ducthangds )

Mark Henshaw

148,325 görüntüleme • 8 ay önce

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇
0:32

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

348,255 görüntüleme • 2 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

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 • 1 yıl önce

Trick to make your art look softer! :3 -duplicate layer -filter -> glitch -> adjust color shift -Gaussian blur -set to lighten (adjust opacity) (Optional) -filter-> unsharp mask for clearer pic
0:55

Trick to make your art look softer! :3 -duplicate layer -filter -> glitch -> adjust color shift -Gaussian blur -set to lighten (adjust opacity) (Optional) -filter-> unsharp mask for clearer pic

☆bwun!★| EXAMS cms closed

130,301 görüntüleme • 4 ay önce