Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

messin' with text using CSS + SVG 🤌

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

144,226 subscribers

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

EğitimSanatBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

trav profil fotoğrafı
trav1 yıl önce

dude fucking a

Juan profil fotoğrafı
Juan1 yıl önce

Wooooooooooooow. Dude... how do you come with this ideas =O!!

Λbstract profil fotoğrafı
Λbstract1 yıl önce

RT @InstaMAT_io: 👀 Are you looking for an alternative to Adobe Substance tools? Do not miss out on InstaMAT from killer node-based material…

Narek profil fotoğrafı
Narek1 yıl önce

You're doing a fantastic job!

Shine Dark profil fotoğrafı
Shine Dark1 yıl önce

Are you using a grid or calculating the placement ? This is sick gives me so many ideas

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

the animated part is all SVG leveraging the fact that SVG is overflow: hidden by default and using transform-box: fill-box to animate the groups within using CSS 🤙

Lethabo Sekoto profil fotoğrafı
Lethabo Sekoto1 yıl önce

one of the animations i've seen in a while, nice!!

@drip profil fotoğrafı
@drip1 yıl önce

thanks for showing behind the scenes.

Tyler Pashigian profil fotoğrafı
Tyler Pashigian1 yıl önce

This is awesome. Kinda reminds me of been very curious how that works

Paschal profil fotoğrafı
Paschal1 yıl önce

Wizardry

Benzer Videolar

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

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

Liquid Glass with CSS and SVG
0:36

Liquid Glass with CSS and SVG

Andreas Storm

71,027 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 👇
0:39

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

figured out how to do motion blurs in the browser using svg filters and css
0:35

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 görüntüleme • 6 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.
0:34

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 • 1 ay önce

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

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

jhey ʕ•ᴥ•ʔ

103,624 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!
0:27

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 • 10 ay önce

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

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

jhey ʕ•ᴥ•ʔ

222,102 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

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

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

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" 🤞
0:39

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

jhey ʕ•ᴥ•ʔ

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

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:
0:40

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

Lichin Lin

25,124 görüntüleme • 1 yıl önce

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨
0:33

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

jhey ʕ•ᴥ•ʔ

382,207 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

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

text-wrap - CSS
0:31

text-wrap - CSS

Ali Reza

38,294 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 • 7 ay önce

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!
0:24

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

Una 🇺🇦

34,971 görüntüleme • 2 ay önce

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!
3:17

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!

Wes Bos

231,809 görüntüleme • 1 yıl önce