Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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,191 subscribers

63,508 görüntüleme • 26 gün önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

a quick recording of how I approach dealing with layout shifts
3:06

a quick recording of how I approach dealing with layout shifts

James Long

60,827 görüntüleme • 23 gün önce

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

Peak, Peak and more Peak. Also, this music is absolute 🔥 Reminds me of the Fifth Element in some parts but this fits perfectly. This game....
1:48

Peak, Peak and more Peak. Also, this music is absolute 🔥 Reminds me of the Fifth Element in some parts but this fits perfectly. This game....

SuperMetalDave64

26,438 görüntüleme • 6 ay önce

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

Today we're launching the custom element. It might just be one element, but it gives you the *full* power of HTML.
0:39

Today we're launching the custom element. It might just be one element, but it gives you the *full* power of HTML.

Webflow

187,452 görüntüleme • 2 yıl önce

Announcing 4 key updates on Figma to Lottie. 🔽 1. 🖥️ Auto Layout - Animate the layout flow direction between vertical, horizontal, and wrapped layouts. - Auto-space elements as the parent element resizes.
0:57

Announcing 4 key updates on Figma to Lottie. 🔽 1. 🖥️ Auto Layout - Animate the layout flow direction between vertical, horizontal, and wrapped layouts. - Auto-space elements as the parent element resizes.

LottieFiles

12,889 görüntüleme • 2 yıl önce

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌
1:00

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

Wes Bos

23,423 görüntüleme • 1 yıl önce

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

Aliens (1986) pulled off one of the greatest tonal shifts ever. James Cameron took Ridley Scott’s quiet horror masterpiece and turned it into a pulse-pounding sci-fi action film while amplifying every element that made the original iconic.
0:45

Aliens (1986) pulled off one of the greatest tonal shifts ever. James Cameron took Ridley Scott’s quiet horror masterpiece and turned it into a pulse-pounding sci-fi action film while amplifying every element that made the original iconic.

cinesthetic.

750,762 görüntüleme • 7 ay önce

I recently released some updates to Improved tables, mermaid views, prose, lists, reduced layout shifts from the selection and markdown editing, also fixed some annoying bugs
0:22

I recently released some updates to Improved tables, mermaid views, prose, lists, reduced layout shifts from the selection and markdown editing, also fixed some annoying bugs

Joel

11,089 görüntüleme • 1 ay önce

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

Jahoda can infuse her burst with any element and apply every 2.5s, maybe we're back? She still wont be great, but maybe she has some use
0:32

Jahoda can infuse her burst with any element and apply every 2.5s, maybe we're back? She still wont be great, but maybe she has some use

Vomfee

277,059 görüntüleme • 8 ay önce

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 görüntüleme • 3 ay önce

Caleb gives Ben Johnson this element that Goff couldnt
0:25

Caleb gives Ben Johnson this element that Goff couldnt

Warren Sharp

1,036,097 görüntüleme • 9 ay önce

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 görüntüleme • 9 ay önce

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

new wip mousepad element that tracks mouse movements and works in fullscreen games by reading the rawinput buffer rather than tracking the pointer like some other overlays do
0:35

new wip mousepad element that tracks mouse movements and works in fullscreen games by reading the rawinput buffer rather than tracking the pointer like some other overlays do

dea

89,829 görüntüleme • 3 ay önce

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇
0:45

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

228,661 görüntüleme • 3 yıl önce