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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Gabriel

11,976 subscribers

110,920 просмотров • 3 месяцев назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

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

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

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

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

jhey ʕ•ᴥ•ʔ

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

Design Engineering Tip If your modal scrolls like this, you’re probably missing one CSS property: overscroll-behavior: contain; It prevents the page behind the modal from scrolling when users reach the top or bottom.

Design Engineering Tip If your modal scrolls like this, you’re probably missing one CSS property: overscroll-behavior: contain; It prevents the page behind the modal from scrolling when users reach the top or bottom.

Gabriel

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

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,631 просмотров • 3 лет назад

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }

jhey ʕ•ᴥ•ʔ

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

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.

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.

Stefan Judis

238,334 просмотров • 3 лет назад

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Gabriel

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

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 ✨

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,769 просмотров • 1 год назад

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)

Dima Belyaev

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

SpaceXAI just launched a new Grok Grok Bot template marketplace. There are template categories for engineering, sales, product, operations and finance, design and more. Marketplace:

SpaceXAI just launched a new Grok Grok Bot template marketplace. There are template categories for engineering, sales, product, operations and finance, design and more. Marketplace:

Sawyer Merritt

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

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation

Victor

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

made it even better! now it uses: - native squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their height

made it even better! now it uses: - native squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their height

Kevin Grajeda

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

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

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

Create responsive holy grail layout with CSS grid 💪🚀

Create responsive holy grail layout with CSS grid 💪🚀

David Mráz

133,448 просмотров • 3 лет назад

After my previous articles, I wondered: how many other items from various CSS wishlists could I solve with scroll-driven animations? Styling rows and columns, staggered animations, wrap detection, and more — in my new article — “Position-Driven Styles”.

After my previous articles, I wondered: how many other items from various CSS wishlists could I solve with scroll-driven animations? Styling rows and columns, staggered animations, wrap detection, and more — in my new article — “Position-Driven Styles”.

Roma Komarov (inactive)

37,626 просмотров • 3 лет назад

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.

Zée

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

Got carried away with this interactive module for breaking down the CSS mask-image property

Got carried away with this interactive module for breaking down the CSS mask-image property

rauno

31,639 просмотров • 1 год назад

Hotel management dashboard template. Built with React, Tailwind CSS & shadcn/ui 👇👇

Hotel management dashboard template. Built with React, Tailwind CSS & shadcn/ui 👇👇

Toby

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

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

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