Video yükleniyor...
Video Yüklenemedi
Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's... show more
532,929 görüntüleme • 2 yıl önce •via X (Twitter)
10 Yorum
Here's that @CodePen link! 🚀
Bunch of people have been quoting my Q3 post on this in response to some of those satirical posts 😅 Figured I might as well roll it back out again 🤙
If you have a border present, it's good to account for that too 💯 .panel { --nested-radius: calc( (var(--radius) - var(--padding)) - var(--border) /* Account for the border 🤙 */ ); }
also! overflow-clip-margin: content-box; no math, which can be nice
This was gonna be the follow-up 🤫😅 Purely revisiting the radius - padding trend 😅
This post is cutting edge 😄
Haha – I was almost fearful of a bug in Edge being raised there 😅
I find this oddly satisfying. should pick up border radius as a hobby 😃
Thanks for the tips @jh3yy. I found an edge case where `padding` > `radius` and got it covered with: --nested-radius: max((var(--radius) - var(--padding), min(var(--padding) / 2, (var(--radius))); I use this trick all over the place for @Joy_UI_
I just saw someone ask for exactly this the other day here
![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 👇](https://image.24vids.com/tw-1752903535488823789/ext_tw_video_thumb/1752900027591151616/pu/img/d0sViTqgbe8N-yux.jpg)
