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

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

На главную

Whoot! I just learned you can use animatable CSS grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.

stefanjudis's profile picture

Stefan Judis

12,373 subscribers

238,279 просмотров • 3 лет назад •via X (Twitter)

ОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

The Grid and Snap To Grid are optional. You can adjust the position, rotation, tile size (scale), height and type (hex/square) of the grid. At any time.
0:11

The Grid and Snap To Grid are optional. You can adjust the position, rotation, tile size (scale), height and type (hex/square) of the grid. At any time.

Canvas of Kings | Might of Merchants

113,972 просмотров • 1 год назад

do you build with or without a grid? use our toggle to easily switch from one to the other 🕹️‼️
0:18

do you build with or without a grid? use our toggle to easily switch from one to the other 🕹️‼️

Paralives

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

It took 40 minutes and 0 tears to create this toggle 😛 Just CSS and HTML. Link to CodePen in comments 👇
0:10

It took 40 minutes and 0 tears to create this toggle 😛 Just CSS and HTML. Link to CodePen in comments 👇

Viki ✨

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

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,527 просмотров • 1 год назад

Lingling to Orm : "i love you little babyy" Little Baby's height = 173cm 😭
0:13

Lingling to Orm : "i love you little babyy" Little Baby's height = 173cm 😭

rosie ⭑🛸๋⭑

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

Today I learnt that you can: - use arrow keys to move an object - use < and > to rotate - use Page Up and Down to move an object up and down I LOVE THE PEOPLE WHO MADE THIS A THING. Kisses for you 😘😘😘 #WoWHousing
0:17

Today I learnt that you can: - use arrow keys to move an object - use < and > to rotate - use Page Up and Down to move an object up and down I LOVE THE PEOPLE WHO MADE THIS A THING. Kisses for you 😘😘😘 #WoWHousing

Rage | Tech & RPG

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

When I play arcade games at home, I could just set them to free play, but I actually prefer inserting coins myself. The sound of the coin rolling in and the credit counter going up is a huge part of the experience for me. It really brings back the feeling of being in an arcade back then. That’s why I even use an old cigarette ashtray as a coin holder. At first, I bought a chair that looked similar to an arcade stool, but the height felt strangely uncomfortable. So I ended up ordering actual Japanese arcade stools from a company in Japan, and the height is just perfect👌 Once you own an arcade cabinet, collecting little accessories like that becomes part of the fun too. And when you hang game posters on the wall, the whole atmosphere becomes incredible😆
0:18

When I play arcade games at home, I could just set them to free play, but I actually prefer inserting coins myself. The sound of the coin rolling in and the credit counter going up is a huge part of the experience for me. It really brings back the feeling of being in an arcade back then. That’s why I even use an old cigarette ashtray as a coin holder. At first, I bought a chair that looked similar to an arcade stool, but the height felt strangely uncomfortable. So I ended up ordering actual Japanese arcade stools from a company in Japan, and the height is just perfect👌 Once you own an arcade cabinet, collecting little accessories like that becomes part of the fun too. And when you hang game posters on the wall, the whole atmosphere becomes incredible😆

Gamer_lafan

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

Just an excuse to use this unhinged transition again 🤣 GloRilla 🦍
0:19

Just an excuse to use this unhinged transition again 🤣 GloRilla 🦍

Zaynah Bear 🇹🇹

894,307 просмотров • 1 год назад

Paul Schrader says "people will pay" to watch AI actors: "I think you can create an AI star. Use a little bit of Brando, a little bit of Kevin Costner and make an exciting movie, and I think people will pay to see that movie."
0:10

Paul Schrader says "people will pay" to watch AI actors: "I think you can create an AI star. Use a little bit of Brando, a little bit of Kevin Costner and make an exciting movie, and I think people will pay to see that movie."

Emir Han

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

I saw an exploit where you could see players through smoke with NVIDIA Game Filters. I played with the filter settings and found a much better setting. Not sharing it here for obvious reasons however this is just ridiculous. CS2 You need to use -allow_third_party_software to use it. A temporary fix could be to disable MM queue for users with this launch option.
0:18

I saw an exploit where you could see players through smoke with NVIDIA Game Filters. I played with the filter settings and found a much better setting. Not sharing it here for obvious reasons however this is just ridiculous. CS2 You need to use -allow_third_party_software to use it. A temporary fix could be to disable MM queue for users with this launch option.

Thour

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

We added displacement to our terrain system this week. Using a height texture terrain materials can displace the geometry and height blend between materials. 🗻✨
0:11

We added displacement to our terrain system this week. Using a height texture terrain materials can displace the geometry and height blend between materials. 🗻✨

s&box

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

The reveal, height change, motion blur, selection... Was a joy to build and still a joy to use.
0:12

The reveal, height change, motion blur, selection... Was a joy to build and still a joy to use.

Brotzky

102,882 просмотров • 1 год назад

You can chop down any tree in Crimson Desert using an axe or magic attacks, and use the wood for crafting. An insane detail to put in a game that looks as photorealistic and huge as this.
0:15

You can chop down any tree in Crimson Desert using an axe or magic attacks, and use the wood for crafting. An insane detail to put in a game that looks as photorealistic and huge as this.

Synth Potato🥔

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

a little book i made recently for class, an ode to the beautiful works of ⁦JOSEPH HÄXAN⁩ and an experiment in working circularly
0:15

a little book i made recently for class, an ode to the beautiful works of ⁦JOSEPH HÄXAN⁩ and an experiment in working circularly

dave

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

Rug shearing, on new rugs excess wool is sheared off and brought to an even height. On older rugs this process can rejuvenate colours
0:15

Rug shearing, on new rugs excess wool is sheared off and brought to an even height. On older rugs this process can rejuvenate colours

Science girl

13,643,997 просмотров • 1 год назад

SwiftUI List row height animation is broken by design — and most fixes just avoid the problem. This deep-dive shows how to actually solve it: custom Layout, state machine decoupling, and animatable spacing — all native SwiftUI, no UIKit.
0:07

SwiftUI List row height animation is broken by design — and most fixes just avoid the problem. This deep-dive shows how to actually solve it: custom Layout, state machine decoupling, and animatable spacing — all native SwiftUI, no UIKit.

fatbobman (东坡肘子)

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

Finally rigged my depresso fanart, now you can use it for streaming for free ♥ It comes with an emote to toggle a coffee mug! #PalworldArt #Palworld #PalGiveaway
0:13

Finally rigged my depresso fanart, now you can use it for streaming for free ♥ It comes with an emote to toggle a coffee mug! #PalworldArt #Palworld #PalGiveaway

Toffee Live2D Comms OPEN

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

Christina Aguilera presenting an award to Eminem during the height of their feud.
0:17

Christina Aguilera presenting an award to Eminem during the height of their feud.

Historic Vids

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

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,594 просмотров • 1 год назад