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

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

На главную

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,391 subscribers

118,488 просмотров • 10 месяцев назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

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

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

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

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }
0:26

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

jhey ʕ•ᴥ•ʔ

117,591 просмотров • 1 год назад

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~
0:26

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

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

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳
0:36

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

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

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition
0:26

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

jhey ʕ•ᴥ•ʔ

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

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →
0:56

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →

Chrome for Developers

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

CSS scroll-driven "CTA to Nav" 🗺️ nav { grid-template-columns: auto calc(var(--grow) * 240px) auto; transition: 1s var(--custom); } @​keyframes expand { to { --expand: 1; } } body { animation: expand steps(1); animation-timeline: --hero; animation-range: exit; }
0:36

CSS scroll-driven "CTA to Nav" 🗺️ nav { grid-template-columns: auto calc(var(--grow) * 240px) auto; transition: 1s var(--custom); } @​keyframes expand { to { --expand: 1; } } body { animation: expand steps(1); animation-timeline: --hero; animation-range: exit; }

jhey ʕ•ᴥ•ʔ

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

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅
0:22

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

286,001 просмотров • 1 год назад

¡Nueva forma de centrar un DIV con CSS! Sin usar display flex o grid ↓
0:22

¡Nueva forma de centrar un DIV con CSS! Sin usar display flex o grid ↓

Miguel Ángel Durán

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

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids
0:50

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids

Figma

103,767 просмотров • 1 год назад

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation
0:36

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

jhey ʕ•ᴥ•ʔ

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

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle
0:20

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

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

Three rows > two rows
0:37

Three rows > two rows

Dani

63,731 просмотров • 23 дней назад

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇
0:27

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,908 просмотров • 8 месяцев назад

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,365 просмотров • 1 год назад

CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @​container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎
0:29

CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @​container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎

jhey ʕ•ᴥ•ʔ

88,665 просмотров • 1 год назад

Another weekend project: GridStore Jean Cavallera and I are building simple but useful dApps that make LUKSO more accessible and easier to use. This is GridStore, an “app store” for Grid templates. You can choose a template you like and, with a single transaction, upload it to your Universal Profile and use it as your Grid. This is made possible by LSP28 The Grid, where the configurations of your Grid are stored in a JSON file on IPFS. The value stored under your ⁩LSP28TheGrid⁨ data key stored on your Universal Profile points to your grid configuration JSON file. By adding the value of a grid template you like under the ⁩LSP28TheGriddata key, you can set immediately that template on your Grid and start customizing it, saving you time. If you have ideas for useful templates for brands, artists, influencers, or any other use case: set up the Grid on a Universal Profile, go to look up the profile, and send me the “Raw value” together with a short explanation of the Grid so it can be added to the store. Or add your own templates to the store by opening a PR: It would really help if we can create some high-quality templates that the whole community can use. You can check out the store here:
1:21

Another weekend project: GridStore Jean Cavallera and I are building simple but useful dApps that make LUKSO more accessible and easier to use. This is GridStore, an “app store” for Grid templates. You can choose a template you like and, with a single transaction, upload it to your Universal Profile and use it as your Grid. This is made possible by LSP28 The Grid, where the configurations of your Grid are stored in a JSON file on IPFS. The value stored under your ⁩LSP28TheGrid⁨ data key stored on your Universal Profile points to your grid configuration JSON file. By adding the value of a grid template you like under the ⁩LSP28TheGriddata key, you can set immediately that template on your Grid and start customizing it, saving you time. If you have ideas for useful templates for brands, artists, influencers, or any other use case: set up the Grid on a Universal Profile, go to look up the profile, and send me the “Raw value” together with a short explanation of the Grid so it can be added to the store. Or add your own templates to the store by opening a PR: It would really help if we can create some high-quality templates that the whole community can use. You can check out the store here:

JordyDutch

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

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.
0:39

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Alamin

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

Quickly and easily create a CSS Grid layout for your website!
0:23

Quickly and easily create a CSS Grid layout for your website!

Marko Denic

211,452 просмотров • 1 год назад