Loading video...

Video Failed to Load

Go Home

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 ✨

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,051 subscribers

270,534 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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; }
0:14

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,207 views • 6 months ago

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇
0:10

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

107,091 views • 3 years ago

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! 👇
0:18

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,561 views • 3 years ago

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,825 views • 2 years ago

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻
0:16

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻

David Mráz

13,821 views • 6 months ago

little details: the intention of CSS :hover 👆 a::after { transition: scale 0.26s; } a:is(:hover, :focus-visible)::after { transition-delay: 0.125s; } add a small transition-delay so you don't trigger :hover events whilst passing over an element unintentionally
0:16

little details: the intention of CSS :hover 👆 a::after { transition: scale 0.26s; } a:is(:hover, :focus-visible)::after { transition-delay: 0.125s; } add a small transition-delay so you don't trigger :hover events whilst passing over an element unintentionally

jhey ʕ•ᴥ•ʔ

39,646 views • 1 year ago

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻
0:12

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻

David Mráz

16,879 views • 1 year ago

Create responsive holy grail layout with CSS grid 💪🚀
0:12

Create responsive holy grail layout with CSS grid 💪🚀

David Mráz

133,448 views • 2 years ago

📌 2 lines of CSS to create a responsive Grid
0:13

📌 2 lines of CSS to create a responsive Grid

andrej

404,459 views • 3 years ago

You can rotate the grid at any time and align the elements to the rotated grid.
0:10

You can rotate the grid at any time and align the elements to the rotated grid.

Canvas of Kings | Might of Merchants

269,455 views • 1 year ago

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 views • 1 year ago

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
0:17

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

120,663 views • 1 year ago

Built a list today and tried switching between list and grid views with layout transition. Thought it’d be cool and it turned out pretty great! 🙌 Shoutout to Expo for making it so simple and Software Mansion’s reanimated for the smooth transitions. Here’s how it looks 👇
0:13

Built a list today and tried switching between list and grid views with layout transition. Thought it’d be cool and it turned out pretty great! 🙌 Shoutout to Expo for making it so simple and Software Mansion’s reanimated for the smooth transitions. Here’s how it looks 👇

Arunabh Verma

27,818 views • 1 year ago

The best way to handle responsive tables: ◇ Measure width and add scroll ◇ Sticky columns for context ◇ Pagination ◇ Keyboard (Arrow left/right)
0:13

The best way to handle responsive tables: ◇ Measure width and add scroll ◇ Sticky columns for context ◇ Pagination ◇ Keyboard (Arrow left/right)

Pontus Abrahamsson — oss/acc

36,973 views • 11 months ago

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 views • 1 year ago

introducing: magnetic grid animation for Framer use this component to create responsive image grids that react to your cursor with scale, rotation, magnetism, and more. comment 'GRID' and i’ll send you the component :)
0:13

introducing: magnetic grid animation for Framer use this component to create responsive image grids that react to your cursor with scale, rotation, magnetism, and more. comment 'GRID' and i’ll send you the component :)

Framer University

26,734 views • 10 months ago

Create responsive footer using just HTML and CSS 🚀 Code in the comments 🧑‍💻
0:11

Create responsive footer using just HTML and CSS 🚀 Code in the comments 🧑‍💻

David Mráz

28,915 views • 2 years ago

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

65,006 views • 1 year ago