Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

tried recreating the dropdown from Aave 's liquid glass component page i was not able to nail the exact 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑 animation but implemented a few interesting details - svg filter for gooey dropdown transition (gaussian blue + color-matrix) - CSS clip-path 𝚜𝚑𝚊𝚙𝚎() morphing a rounded rect into the panel... show more

Manu Arora

43,434 subscribers

15,160 просмотров • 2 месяцев назад •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,348 просмотров • 3 месяцев назад

Had early access to Opus 4.6, here is the results from same prompt to create the control panel for a spaceship in the distant future, done using the standard Claude interface (not Code). I had to zoom into a few of the subsystems so you can see the details.

Had early access to Opus 4.6, here is the results from same prompt to create the control panel for a spaceship in the distant future, done using the standard Claude interface (not Code). I had to zoom into a few of the subsystems so you can see the details.

Ethan Mollick

105,700 просмотров • 6 месяцев назад

🔥🇨🇳 A video showcasing Tesla FSD (Supervised) v14 in China has leaked on social media! The video is intended for FSD (Supervised) page in China, which has not yet been published. I was able to access it a few days ago thanks to Arda Çebi, but decided not to share it at the time. Here is the video, extracted directly from Tesla’s official website:

🔥🇨🇳 A video showcasing Tesla FSD (Supervised) v14 in China has leaked on social media! The video is intended for FSD (Supervised) page in China, which has not yet been published. I was able to access it a few days ago thanks to Arda Çebi, but decided not to share it at the time. Here is the video, extracted directly from Tesla’s official website:

The Tesla Newswire

49,316 просмотров • 2 месяцев назад

Being able to move fluidly between Figma Make and the canvas is a pretty big deal Recent example 👇 1️⃣ Started exploring a minified recording toolbar directly on the canvas 2️⃣ Once I had some rough shapes I moved it into Make, imported my style guide, and started bringing it to life with expandable controls, hover states, and tooltips for keyboard shortcuts 3️⃣ A few prompts later, I had something interesting… but the layout wasn’t quite right. 4️⃣ So I jumped back into the canvas and made ~8 quick variations with a bigger video container. 5️⃣ Once I got somewhere interesting I brought that back into Make. All I had to do was copy and paste the frames for my default and hover state of the component and it pretty much nailed the core layout 6️⃣ Then I layered on the timer and made it interactive. But once I got it back into Make I thought "hmm... what if the toolbar layout was based on which quadrant of the screen the component was in 🤔" I was able to one shot this interaction and after playing with it a bunch I kinda love it? 7️⃣ Sent it to the team in Inflight so everyone could play with the prototype. 8️⃣ Brought the up to date UI back into the canvas to polish some of the tooltip details Before this, it always felt like I had to choose between two very different workflows. Now I can bounce between them seamlessly and it’s genuinely changing how I explore ideas.

Being able to move fluidly between Figma Make and the canvas is a pretty big deal Recent example 👇 1️⃣ Started exploring a minified recording toolbar directly on the canvas 2️⃣ Once I had some rough shapes I moved it into Make, imported my style guide, and started bringing it to life with expandable controls, hover states, and tooltips for keyboard shortcuts 3️⃣ A few prompts later, I had something interesting… but the layout wasn’t quite right. 4️⃣ So I jumped back into the canvas and made ~8 quick variations with a bigger video container. 5️⃣ Once I got somewhere interesting I brought that back into Make. All I had to do was copy and paste the frames for my default and hover state of the component and it pretty much nailed the core layout 6️⃣ Then I layered on the timer and made it interactive. But once I got it back into Make I thought "hmm... what if the toolbar layout was based on which quadrant of the screen the component was in 🤔" I was able to one shot this interaction and after playing with it a bunch I kinda love it? 7️⃣ Sent it to the team in Inflight so everyone could play with the prototype. 8️⃣ Brought the up to date UI back into the canvas to polish some of the tooltip details Before this, it always felt like I had to choose between two very different workflows. Now I can bounce between them seamlessly and it’s genuinely changing how I explore ideas.

Ridd 🤿

27,665 просмотров • 10 месяцев назад

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

426,530 просмотров • 2 лет назад

🖨️ Little progress: I generated a dot matrix printer with GPT Image 2 and then some Photopea'ing to make the paper go through And I got COM1 to work for dial up internet to (my ISP) while COM2 still works for the printer (that was a challenge) Which means I can now print anything from the internet, like Hacker News! Some todo fixes: - page should scroll out not already be there - we need some perspective so the paper slowly goes into distance - integrate it into pieter .com page fully - add a local print command so you can actually IRL print your printed dot matrix print You can try it the current WIP here:

🖨️ Little progress: I generated a dot matrix printer with GPT Image 2 and then some Photopea'ing to make the paper go through And I got COM1 to work for dial up internet to (my ISP) while COM2 still works for the printer (that was a challenge) Which means I can now print anything from the internet, like Hacker News! Some todo fixes: - page should scroll out not already be there - we need some perspective so the paper slowly goes into distance - integrate it into pieter .com page fully - add a local print command so you can actually IRL print your printed dot matrix print You can try it the current WIP here:

@levelsio

43,147 просмотров • 2 месяцев назад

Meta released SAM3 a model to reconstruct objects from segmented images. I tried it and here are 4 things I found out - The generation is incredibly fast when compared with other 3D GenAI models - The models generated are not meshes but Gaussian Splatting. I was surprised that in the paper it was not mentioned anywhere - When generating multiple objects the arrangement is a bit messed up. - Unfortunately, it is impossible to download any of the .ply generated 😔 I cannot stop thinking about the implications of this in XR. Objects in the real world could be almost instantly turned into photorealistic copies and even rearranged to the user's wish.

Meta released SAM3 a model to reconstruct objects from segmented images. I tried it and here are 4 things I found out - The generation is incredibly fast when compared with other 3D GenAI models - The models generated are not meshes but Gaussian Splatting. I was surprised that in the paper it was not mentioned anywhere - When generating multiple objects the arrangement is a bit messed up. - Unfortunately, it is impossible to download any of the .ply generated 😔 I cannot stop thinking about the implications of this in XR. Objects in the real world could be almost instantly turned into photorealistic copies and even rearranged to the user's wish.

Gabriele Romagnoli

32,441 просмотров • 9 месяцев назад

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,157 просмотров • 3 лет назад

I keep seeing people say Gemini 3.0 cannot replace designers. That might be true for big companies with large teams and complex design systems. But if your goal is to ship an MVP in the next few days, Gemini 3.0 is more than enough. I was able to one shot the entire UI of a mobile app with it. Here is the exact process I used ↓

I keep seeing people say Gemini 3.0 cannot replace designers. That might be true for big companies with large teams and complex design systems. But if your goal is to ship an MVP in the next few days, Gemini 3.0 is more than enough. I was able to one shot the entire UI of a mobile app with it. Here is the exact process I used ↓

Prajwal Tomar

237,361 просмотров • 8 месяцев назад

Seth Rogen reveals he smoked a bong for 45 minutes then saw The Matrix the day Freaks and Geeks wrapped "The day the show wrapped, me and Jason Segel drove to a movie theater in the valley, smoked weed out of a glass bong in his car for like 45 minutes, and then went and saw The Matrix, and it was a mind-blowing experience" "And then a few weeks later, I went to Vancouver and did a ton of shrooms and saw The Matrix again, and it was an even more mind-blowing experience" "But the scene where your mouth ran away, I was with my friend, and he got up and ran out of the theater. He was just like, f*ck this"

Seth Rogen reveals he smoked a bong for 45 minutes then saw The Matrix the day Freaks and Geeks wrapped "The day the show wrapped, me and Jason Segel drove to a movie theater in the valley, smoked weed out of a glass bong in his car for like 45 minutes, and then went and saw The Matrix, and it was a mind-blowing experience" "And then a few weeks later, I went to Vancouver and did a ton of shrooms and saw The Matrix again, and it was an even more mind-blowing experience" "But the scene where your mouth ran away, I was with my friend, and he got up and ran out of the theater. He was just like, f*ck this"

Casper

260,256 просмотров • 1 месяц назад

Stumbled on Vercel’s creative design team page and instantly fell in love with the design, animations, and micro-interactions. So I decided to take a shot at it, recreating the experience for a fictional company called Varxell, with my own spin on everything except the design itself + I didn’t touch any of their assets. Everything was hand-coded from scratch, and every single asset was recreated in Figma. It was a fun challenge. Built with: • React • TypeScript • Vite • Framer Motion Live site: • • Repo: • Every page functionality and animation was implemented as a reusable hook, with internal JSDoc to make it easy to reuse in your own projects or remix however you like. Got any questions? Feel free to shoot me a DM

Stumbled on Vercel’s creative design team page and instantly fell in love with the design, animations, and micro-interactions. So I decided to take a shot at it, recreating the experience for a fictional company called Varxell, with my own spin on everything except the design itself + I didn’t touch any of their assets. Everything was hand-coded from scratch, and every single asset was recreated in Figma. It was a fun challenge. Built with: • React • TypeScript • Vite • Framer Motion Live site: • • Repo: • Every page functionality and animation was implemented as a reusable hook, with internal JSDoc to make it easy to reuse in your own projects or remix however you like. Got any questions? Feel free to shoot me a DM

David Herbert👨🏽‍💻🚀

23,755 просмотров • 1 год назад

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

331,438 просмотров • 2 лет назад

Day 90: From the lowest point of my life to the Bridle Path. A year ago I was battling depression. Ten days into my OPEN trade, a major investor forced me to liquidate everything because he thought it was a meme stock. But you turn the page. You trust God. You trust yourself. One step at a time. That’s how you OWN the future — not rent it.

Day 90: From the lowest point of my life to the Bridle Path. A year ago I was battling depression. Ten days into my OPEN trade, a major investor forced me to liquidate everything because he thought it was a meme stock. But you turn the page. You trust God. You trust yourself. One step at a time. That’s how you OWN the future — not rent it.

Eric Jackson

186,524 просмотров • 9 месяцев назад

Finally, after a long time, I was able to finish the animation. It’s not really that interesting, and it looks pretty bad in some parts XD Anyway, I made it because Lights Out was originally supposed to be a game, but it ended up just being another simple comic. I had tons of ideas for this one, but I’m content with what I have now. #MurderDrones #mdtwt #HaloArt #ProjectLightsOut #SerialDesignationV #ODST

Finally, after a long time, I was able to finish the animation. It’s not really that interesting, and it looks pretty bad in some parts XD Anyway, I made it because Lights Out was originally supposed to be a game, but it ended up just being another simple comic. I had tons of ideas for this one, but I’m content with what I have now. #MurderDrones #mdtwt #HaloArt #ProjectLightsOut #SerialDesignationV #ODST

Ricky

22,048 просмотров • 3 месяцев назад

Vanilla Ice Bought 50 Cent's $500,000 Lamborghini 👀 50 Cent used to have a Lamborghini Murcielago in a really cool blue color but sold it awhile back for roughly $500,000 and the person that ended up with the car is Vanilla Ice and his investment partner. The partner says 50 Cent destroyed the wheels from curb rash but other than that it was in excellent condition. He also had the car come in a special blue color that was known as "50 Cent Blue" around shops. When they brought 50's Lambo to Lamborghini service center they were all looking at it in amazement that it was 50's former car. Would you buy this?

Vanilla Ice Bought 50 Cent's $500,000 Lamborghini 👀 50 Cent used to have a Lamborghini Murcielago in a really cool blue color but sold it awhile back for roughly $500,000 and the person that ended up with the car is Vanilla Ice and his investment partner. The partner says 50 Cent destroyed the wheels from curb rash but other than that it was in excellent condition. He also had the car come in a special blue color that was known as "50 Cent Blue" around shops. When they brought 50's Lambo to Lamborghini service center they were all looking at it in amazement that it was 50's former car. Would you buy this?

Diverse Mentality

920,028 просмотров • 6 месяцев назад

I unfortunately did not win, but I came very close to making it into the finals also bonus clip with my terrible mic because I was playing from a PC cafe in Japan in the middle of the night (I’m the Dr. Strange) ggs everyone, I had so much fun

I unfortunately did not win, but I came very close to making it into the finals also bonus clip with my terrible mic because I was playing from a PC cafe in Japan in the middle of the night (I’m the Dr. Strange) ggs everyone, I had so much fun

Iron Pineapple

82,827 просмотров • 3 месяцев назад

So all of you guys know, the earlier video was not hidden cause I didn't stand by the video or the tweet. It was a concern for the algorithm and wanting my youtube main page to stay focused on pure gameplay stuff. So now here it is, not to be deleted, on twitter. Tear into it if you like, but I wanted you to know the logic behind the privating the video.

So all of you guys know, the earlier video was not hidden cause I didn't stand by the video or the tweet. It was a concern for the algorithm and wanting my youtube main page to stay focused on pure gameplay stuff. So now here it is, not to be deleted, on twitter. Tear into it if you like, but I wanted you to know the logic behind the privating the video.

David Jaffe

33,359 просмотров • 9 месяцев назад

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

257,631 просмотров • 2 лет назад

This just happened. As I was driving to the gym I saw a fire ablaze. I got off to record but quickly realized I could potentially stop it from spreading. I jumped on to action and became a firefighter for a few minutes. I don’t understand how not 1 person tried to stop this fire, it took a guy from Texas to stop it. Everyone else was just watching.. Don’t mind my heavy breathing.,

This just happened. As I was driving to the gym I saw a fire ablaze. I got off to record but quickly realized I could potentially stop it from spreading. I jumped on to action and became a firefighter for a few minutes. I don’t understand how not 1 person tried to stop this fire, it took a guy from Texas to stop it. Everyone else was just watching.. Don’t mind my heavy breathing.,

Anthony Aguero Live 🇺🇸

41,853 просмотров • 1 год назад

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

283,498 просмотров • 2 лет назад