Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildungKunst
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche 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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 3 Jahren

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,825 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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

Create responsive holy grail layout with CSS grid 💪🚀

David Mráz

133,448 Aufrufe • vor 2 Jahren

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

📌 2 lines of CSS to create a responsive Grid

andrej

404,459 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 11 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr