Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

jhey ʕ•ᴥ•ʔ

146,209 subscribers

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

Bilim & Teknoloji Eğitim Sanat

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

never realized how easy it was to do this until sitting down to read about SVG filters last week 🤦‍♂️ for the sticker outline: 1. dilate the input with feMorphology 2. flood the color with feFlood 3. combine them with feComposite 4. overlay the input onto the outline with feMerge

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

Artur is a bit of a wizard with SVG filters and did these some time ago 👏

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

but honestly, until sitting down and reading all the MDN pages, I didn't know what was possible 😮 had only ever looked at displacement and goo 💀 like, why does SVG have a full on lighting system available with fePointLight & co.? very cool!

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

anyways - here's the @CodePen if you wanna play with it 🤙 the last thing i'd love to see is if you can like color-burn the holographic turbulence somehow 🫣 feel like you need to bake that into the SVG or do something outside on the element

Tiger Abrodi profil fotoğrafı

Tiger Abrodi1 yıl önce

Nice! Pardon if I missed, do you've a course or anything? I'd love more hardcore premium design engineering resources, hence asking.

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

this is the dream 💯☁️ I want to make a platform that includes all the things I make with breakdowns and videos 🙏 haven't even had time to sit down and do the newsletter in recent weeks 🥲

@drip profil fotoğrafı

@drip1 yıl önce

awesome man

Aleksa Mitić profil fotoğrafı

Aleksa Mitić1 yıl önce

Gotta love the SVG’s they are so good. Amount of things that can be done with it is astounding.

Aboubakar Jay profil fotoğrafı

Aboubakar Jay1 yıl önce

Amazing 🤯

Enrique Soto profil fotoğrafı

Enrique Soto1 yıl önce

Great!!! SVG Effects is magic! I´m experimenting with some basic SVG effects lately, any good source or book to learn more about?

Benzer Videolar

messin' with SVG filter burn effects 🔥

messin' with SVG filter burn effects 🔥

jhey ʕ•ᴥ•ʔ

30,164 görüntüleme • 1 yıl önce

messin' with text using CSS + SVG 🤌

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

204,870 görüntüleme • 8 ay önce

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

jhey ʕ•ᴥ•ʔ

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

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

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 ✅

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

Liquid Glass with CSS and SVG

Liquid Glass with CSS and SVG

Andreas Storm

71,079 görüntüleme • 6 ay önce

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

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

jhey ʕ•ᴥ•ʔ

43,591 görüntüleme • 1 yıl önce

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,512 görüntüleme • 11 ay önce

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

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

jhey ʕ•ᴥ•ʔ

95,479 görüntüleme • 7 ay ö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! 👇

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

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴

jhey ʕ•ᴥ•ʔ

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

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

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

jhey ʕ•ᴥ•ʔ

44,674 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

27,241 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] 🤙

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

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,714 görüntüleme • 1 yıl önce

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞

jhey ʕ•ᴥ•ʔ

66,297 görüntüleme • 1 yıl önce

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jhey ʕ•ᴥ•ʔ

97,263 görüntüleme • 1 yıl önce

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }

jhey ʕ•ᴥ•ʔ

214,634 görüntüleme • 11 ay önce

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,155 görüntüleme • 2 ay önce