Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

144,226 subscribers

85,634 Aufrufe • vor 1 Jahr •via X (Twitter)

Bildung Kunst Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von trav

travvor 1 Jahr

dude fucking a

Profilbild von Juan

Juanvor 1 Jahr

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

Profilbild von Λbstract

Λbstractvor 1 Jahr

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

Profilbild von Narek

Narekvor 1 Jahr

You're doing a fantastic job!

Profilbild von Shine Dark

Shine Darkvor 1 Jahr

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

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 1 Jahr

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 🤙

Profilbild von Lethabo Sekoto

Lethabo Sekotovor 1 Jahr

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

Profilbild von @drip

@dripvor 1 Jahr

thanks for showing behind the scenes.

Profilbild von Tyler Pashigian

Tyler Pashigianvor 1 Jahr

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

Profilbild von Paschal

Paschalvor 1 Jahr

Wizardry

Ähnliche Videos

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

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

jhey ʕ•ᴥ•ʔ

160,713 Aufrufe • vor 1 Jahr

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 ʕ•ᴥ•ʔ

99,976 Aufrufe • vor 1 Jahr

Liquid Glass with CSS and SVG

Liquid Glass with CSS and SVG

Andreas Storm

71,027 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 1 Jahr

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

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

ravarcheon

24,707 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 10 Monaten

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

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

jhey ʕ•ᴥ•ʔ

103,624 Aufrufe • vor 1 Jahr

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,183 Aufrufe • vor 1 Jahr

"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 Aufrufe • vor 1 Jahr

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

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,215 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

382,207 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

66,297 Aufrufe • vor 1 Jahr

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:

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 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

97,263 Aufrufe • vor 1 Jahr

text-wrap - CSS

text-wrap - CSS

Ali Reza

38,294 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

176,569 Aufrufe • vor 7 Monaten

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!

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,801 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 2 Monaten