正在加载视频...

视频加载失败

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:

188,168 次观看 • 3 年前 •via X (Twitter)

10 条评论

Geoffrey Shepard 的头像
Geoffrey Shepard3 年前

Woah, never seen anything like it. Cool trick, a little distracting, but has a use case somewhere

Wes Bos 的头像
Wes Bos3 年前

Ha def could be distracting. Use case is to make you say "Woah, never seen anything like it" 😀

John Hooks 的头像
John Hooks3 年前

Thanks for breaking that down. It’s a really cool effect.

Wei Su 的头像
Wei Su3 年前

Thank u Wes, I’m gonna steal the green one.

Karol Głomski ⌨ 🐍 的头像
Karol Głomski ⌨ 🐍3 年前

how do I save a tweet for later?

Hagai Bloch 的头像
Hagai Bloch3 年前

Damn, that's cool, now I will put it anywhere I can unnecessarily until my product manager yell at me.

Lucas Nunes | Lukinh4Z 的头像
Lucas Nunes | Lukinh4Z3 年前

@Reimanzzzzzzzz

Tyler Freedman 的头像
Tyler Freedman3 年前

Is there a way to make this effect happen in intervals by itself? I'm fairly new to CSS

Wes Bos 的头像
Wes Bos3 年前

Yep, you would use a setInterval to run code every 5 seconds, and each time that runs you toggle a class of “start”

Odii 的头像
Odii3 年前

Amazing 🔥 Trust the full version is on YouTube now, need to try this!

相关视频

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 次观看 • 2 年前