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

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

На главную

Doing this still gives some minor layout shifts. rather use a absolute positioned flex centered element in a container with the original element to keep track of the width. Gives 0 layouts shifts and also works great with large font weights transitions

writenicecode's profile picture

Dhruvin

3,333 subscribers

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

LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

This kinda sums up better what CSS offset-path gives you 🏎️ A responsive way to animate an element along the perimeter of another 🎬 Use the rect() value to control the inset of that path ✨ And the great thing is, it's responsive 🤙
0:31

This kinda sums up better what CSS offset-path gives you 🏎️ A responsive way to animate an element along the perimeter of another 🎬 Use the rect() value to control the inset of that path ✨ And the great thing is, it's responsive 🤙

jhey ʕ•ᴥ•ʔ

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

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇
0:30

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

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 👇
1:36

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 лет назад

A New Character! ■Revolutionary Army / Officer Inazuma Element: Blue Class: Defender "Great Scissors" creates a shield that recovers the user's HP and decreases cooldown when it's attacked! Use the shield to protect the treasure, and push back the enemy with "KEEP OUT"!
0:23

A New Character! ■Revolutionary Army / Officer Inazuma Element: Blue Class: Defender "Great Scissors" creates a shield that recovers the user's HP and decreases cooldown when it's attacked! Use the shield to protect the treasure, and push back the enemy with "KEEP OUT"!

ONE PIECE Bounty Rush

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

Virgins shifts to run Dash Flood with a a Curl in the Seam. I’m starting to believe Curl > Sail in flood concepts.. Watch the OLB drop and get width thinking he’s robbing the deep out
0:33

Virgins shifts to run Dash Flood with a a Curl in the Seam. I’m starting to believe Curl > Sail in flood concepts.. Watch the OLB drop and get width thinking he’s robbing the deep out

The Spread Offense

11,244 просмотров • 4 месяцев назад

Friends! Trixie has gone home and Baby Dog is rather… sad. We are taking it in shifts to look after him. Percy is with him at the moment, and doing a great job of comforting him. We’ll make sure he’s ok - I promise ❤️ #catsanddogs
1:26

Friends! Trixie has gone home and Baby Dog is rather… sad. We are taking it in shifts to look after him. Percy is with him at the moment, and doing a great job of comforting him. We’ll make sure he’s ok - I promise ❤️ #catsanddogs

Malcolm & Baby Dog

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

Curious from an offensive perspective if there's still value in a call like this with the trend of defenses prioritizing defending the pass element of RPO's.
0:40

Curious from an offensive perspective if there's still value in a call like this with the trend of defenses prioritizing defending the pass element of RPO's.

XandOJunkie

17,916 просмотров • 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! 👇
0:38

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 лет назад

This is some of the coolest action storyboarding i've seen in a while, the way it transitions between the characters is smooth and seamless with great camera work. the animation is also superb Also bonus points for the sound effects
0:32

This is some of the coolest action storyboarding i've seen in a while, the way it transitions between the characters is smooth and seamless with great camera work. the animation is also superb Also bonus points for the sound effects

Jason Klum

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

“The enormous amount of tanking and rebuilding we saw this year does keep me up at night.. We needed to add a more random element to our draft and that’s what we’re in the process of doing” Adam Silver #PrimetimeSports
1:42

“The enormous amount of tanking and rebuilding we saw this year does keep me up at night.. We needed to add a more random element to our draft and that’s what we’re in the process of doing” Adam Silver #PrimetimeSports

Pat McAfee

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

Beau Pribula is one of the best transfer pickups this cycle for Virginia. Pribula gives UVA a real dual-threat element to the offense. He fits what they want to do and puts Virginia in position to stay at the top of the ACC ⬇️⬇️
1:09

Beau Pribula is one of the best transfer pickups this cycle for Virginia. Pribula gives UVA a real dual-threat element to the offense. He fits what they want to do and puts Virginia in position to stay at the top of the ACC ⬇️⬇️

Adam Breneman

47,713 просмотров • 7 месяцев назад

The Lounge This would probably be the widest lounge of all spas, with a view of the spa's outdoor garden. Who wouldn't want a garden view and enjoy a get-to-know chat with other spagoers before and after your massage session? The layout was just curated to build connections with each other. Really impressed by the layout and how it was positioned with large mirrors on the side and a counter on the other side for drinks and cookies.
0:28

The Lounge This would probably be the widest lounge of all spas, with a view of the spa's outdoor garden. Who wouldn't want a garden view and enjoy a get-to-know chat with other spagoers before and after your massage session? The layout was just curated to build connections with each other. Really impressed by the layout and how it was positioned with large mirrors on the side and a counter on the other side for drinks and cookies.

S͜͡i͜͡m͜͡p͜͡l͜͡y͜͡M͜͡e͜͡

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

It brings to mind Ishiro Honda’s take on Rodan in the original film. He treats it as a living creature, but quickly shifts to its reflection of societal impact and human suffering. His films often carried a sense of humanity some other kaiju works lack.
1:38

It brings to mind Ishiro Honda’s take on Rodan in the original film. He treats it as a living creature, but quickly shifts to its reflection of societal impact and human suffering. His films often carried a sense of humanity some other kaiju works lack.

ブルー

25,087 просмотров • 4 месяцев назад

A one-of-a-kind race for a great cause at Autodrome Granby! The annual Défi-Vision race is in support of the Mira Foundation and gives blind men and women the opportunity to drive on a race track with a guide providing directions from the passenger seat.
0:56

A one-of-a-kind race for a great cause at Autodrome Granby! The annual Défi-Vision race is in support of the Mira Foundation and gives blind men and women the opportunity to drive on a race track with a guide providing directions from the passenger seat.

NASCAR Regional

17,137 просмотров • 1 год назад

Just listened to the original recording from 1896 and it sounds a lot more like chanting than singing. It seems to be centered around the tone of the note A but as a dominant in the key of D minor. It makes sense then to repeat the theme centered around this note!
1:27

Just listened to the original recording from 1896 and it sounds a lot more like chanting than singing. It seems to be centered around the tone of the note A but as a dominant in the key of D minor. It makes sense then to repeat the theme centered around this note!

doctor gradus ad parnassum

699,336 просмотров • 5 месяцев назад

We keep the elders close, and this is a great compact neat and quaint tiny home that gives mom her independence AND still inviting her to be a part of her children and grandchildren lives uninterrupted.
1:10

We keep the elders close, and this is a great compact neat and quaint tiny home that gives mom her independence AND still inviting her to be a part of her children and grandchildren lives uninterrupted.

!Nspirenaire〽️

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

On Friday, Figure completed a 20-hour run of back-to-back shifts on the BMW X3 production line! We’ve been running 10-hour shifts for several weeks now and as far as we know, Figure and BMW are the first in the world to do this with humanoid robots
0:24

On Friday, Figure completed a 20-hour run of back-to-back shifts on the BMW X3 production line! We’ve been running 10-hour shifts for several weeks now and as far as we know, Figure and BMW are the first in the world to do this with humanoid robots

Brett Adcock

757,938 просмотров • 1 год назад