Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below

BalintFerenczy's profile picture

balint

2,691 subscribers

1,578,110 görüntüleme • 11 ay önce •via X (Twitter)

Bilim & TeknolojiEğitimSanat
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

I made a design tool. 95% of it was coded by Claude AI. You can design, animate SVG patterns and export to vectors, png, video or GIF. Use presets, save designs and share urls. Works great on mobile and web. 10k lines of code. The future is insanely fun.
0:59

I made a design tool. 95% of it was coded by Claude AI. You can design, animate SVG patterns and export to vectors, png, video or GIF. Use presets, save designs and share urls. Works great on mobile and web. 10k lines of code. The future is insanely fun.

Meng To

236,950 görüntüleme • 2 yıl önce

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇
0:24

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,440 görüntüleme • 2 yıl önce

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇
0:55

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

215,359 görüntüleme • 3 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

i removed the tail on my character a while ago cause it was causing some issues.... and was kinda annoying to animate but i always wanted it to come back so now its physics based !! still needs a bunch of tweakin but yeeeee
0:20

i removed the tail on my character a while ago cause it was causing some issues.... and was kinda annoying to animate but i always wanted it to come back so now its physics based !! still needs a bunch of tweakin but yeeeee

naniel

45,820 görüntüleme • 6 ay önce

A U.S Border Patrol officer started harassing a Canadian tourist by honking and pointing to this man’s Ontario license plate when he was about two miles from the border then got on his butt and then pulled up next to him and saw his camera and took off! They’re doing it all over!
0:39

A U.S Border Patrol officer started harassing a Canadian tourist by honking and pointing to this man’s Ontario license plate when he was about two miles from the border then got on his butt and then pulled up next to him and saw his camera and took off! They’re doing it all over!

Suzie rizzio

208,007 görüntüleme • 9 ay önce

I was given the chance to animate and model for Hakos Baelz's trip to NinjaTokyo! 🎲🐀 #BaelzBrush Here's a little segment of it! You can watch the full version on her youtube channel! (link below)
1:01

I was given the chance to animate and model for Hakos Baelz's trip to NinjaTokyo! 🎲🐀 #BaelzBrush Here's a little segment of it! You can watch the full version on her youtube channel! (link below)

Yoolie

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

Frankston VFL fans weren’t thrilled by the Pies stars getting off the ground very quickly escorted by security guards post match but given the fans are allowed on the ground at times and it was late on a Saturday night it was forward planning by Collingwood. Both pulled up well
0:20

Frankston VFL fans weren’t thrilled by the Pies stars getting off the ground very quickly escorted by security guards post match but given the fans are allowed on the ground at times and it was late on a Saturday night it was forward planning by Collingwood. Both pulled up well

Jon Ralph

111,030 görüntüleme • 11 ay önce

RFK Jr: “They recommended putting masks on babies.” “The CDC told us it was science-based.” “It wasn't, it was a political decision.” “They allowed all of our schools to be closed and that order was written by the teachers union and it hurt working people all across this country.” “They said it was science-based, but it was a political decision.” “We're getting the politics out of the CDC and returning it to a science-based agency.”
0:34

RFK Jr: “They recommended putting masks on babies.” “The CDC told us it was science-based.” “It wasn't, it was a political decision.” “They allowed all of our schools to be closed and that order was written by the teachers union and it hurt working people all across this country.” “They said it was science-based, but it was a political decision.” “We're getting the politics out of the CDC and returning it to a science-based agency.”

End Tribalism in Politics

360,961 görüntüleme • 10 ay önce

Found a method to see inside some chips, without having to unmount or destroy the chips. Best part - the method only relies on lightly modded off-the-shelf cameras and lenses. Read more at
0:35

Found a method to see inside some chips, without having to unmount or destroy the chips. Best part - the method only relies on lightly modded off-the-shelf cameras and lenses. Read more at

bunnie

192,696 görüntüleme • 3 yıl önce

He sent it. I was in complete shock when he flew by on the inside, knew he was going to hit the wall, and still almost pulled it off. That moment definitely inspired some wild moves like Chastain at Martinsville.
0:53

He sent it. I was in complete shock when he flew by on the inside, knew he was going to hit the wall, and still almost pulled it off. That moment definitely inspired some wild moves like Chastain at Martinsville.

Jimmie Johnson

181,222 görüntüleme • 1 yıl önce

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇
0:36

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,795 görüntüleme • 2 yıl önce

We’d gone 12 matches without getting one over France. In ’94, everything changed. The Arms Park was alive, the energy was electric, and every pass felt like it carried a nation with it. Proud to have played my part in a win that meant more than most. #NeverGiveUp #WALvFRA
2:51

We’d gone 12 matches without getting one over France. In ’94, everything changed. The Arms Park was alive, the energy was electric, and every pass felt like it carried a nation with it. Proud to have played my part in a win that meant more than most. #NeverGiveUp #WALvFRA

Rupert Moon

21,359 görüntüleme • 5 ay önce

A Switzerland-based startup Flexion has created a robotic brain that helps the Unitree G1 move smoothly and work on its own. It uses reinforcement learning, where the robot trains in simulations to learn walking, balancing, and picking objects. In tests, it cleaned a space by finding and placing items in a basket without human help.
0:47

A Switzerland-based startup Flexion has created a robotic brain that helps the Unitree G1 move smoothly and work on its own. It uses reinforcement learning, where the robot trains in simulations to learn walking, balancing, and picking objects. In tests, it cleaned a space by finding and placing items in a basket without human help.

Space and Technology

17,557 görüntüleme • 3 ay önce

Finally released my animated short film NOXIOUS, made in Blender 🔶! After nearly two years of keeping it tucked away, my graduation short film is finally out on YouTube. Link to the full film in the replies below. 👇 Incredible music and sound design by Kuz #b3d
0:23

Finally released my animated short film NOXIOUS, made in Blender 🔶! After nearly two years of keeping it tucked away, my graduation short film is finally out on YouTube. Link to the full film in the replies below. 👇 Incredible music and sound design by Kuz #b3d

Kay Hilman

19,828 görüntüleme • 7 gün ö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! 👇
1:23

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

190,822 görüntüleme • 2 yıl önce

I've been working on this thing on and off for a little over 2 years now, and I think I'm finally going to call it done. Everything was done by myself, except a couple of materials & the song. Link below #TheAmazingDigitalCircus
0:35

Sensitive content

I've been working on this thing on and off for a little over 2 years now, and I think I'm finally going to call it done. Everything was done by myself, except a couple of materials & the song. Link below #TheAmazingDigitalCircus

Poole

42,062 görüntüleme • 1 ay önce

In my AI filming career, there is a niche I really enjoy working with and where AI Video brings lots of value. That niche is Real Estate. AI is perfect to animate 3D renders and to create b-role for mood. Here I will try to answer two questions: 1 - How to make a real estate video? 2- How to sell a house? This was a work done based on 3D Renders (provided by The Creative Farm, more on them below). Sound design made by noon (feel free to DM her for great sound design) Below I will break down a bit of the process, the prompts, timespans, the tools I used as well as some secrets this time around (feeling pretty today) It will be a bit long, so bookmark it or save it for later if you have the interest but lack the time.
0:42

In my AI filming career, there is a niche I really enjoy working with and where AI Video brings lots of value. That niche is Real Estate. AI is perfect to animate 3D renders and to create b-role for mood. Here I will try to answer two questions: 1 - How to make a real estate video? 2- How to sell a house? This was a work done based on 3D Renders (provided by The Creative Farm, more on them below). Sound design made by noon (feel free to DM her for great sound design) Below I will break down a bit of the process, the prompts, timespans, the tools I used as well as some secrets this time around (feeling pretty today) It will be a bit long, so bookmark it or save it for later if you have the interest but lack the time.

FERA

218,120 görüntüleme • 11 ay önce

The moment in LIVE AND LET DIE when Bond runs across crocodiles was filmed for real. The stuntman was a crocodile farm owner called Ross Kananga, whose own father was eaten by crocodiles. He pulled it off on the 5th attempt, as you can see below.
0:52

The moment in LIVE AND LET DIE when Bond runs across crocodiles was filmed for real. The stuntman was a crocodile farm owner called Ross Kananga, whose own father was eaten by crocodiles. He pulled it off on the 5th attempt, as you can see below.

All The Right Movies

63,276 görüntüleme • 5 ay önce