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

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

На главную

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! 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

140,092 subscribers

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

LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

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 просмотров • 3 лет назад

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 просмотров • 7 месяцев назад

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 год назад

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

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,181 просмотров • 2 лет назад

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;
0:13

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

209,685 просмотров • 29 дней назад

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇
0:14

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East
0:17

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East

jhey ʕ•ᴥ•ʔ

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

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。 子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。 参考: #CSS #cssnite #朝までマークアップ
0:15

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。 子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。 参考: #CSS #cssnite #朝までマークアップ

鹿野 壮 Takeshi Kano

33,703 просмотров • 1 год назад

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

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

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

Los layouts más típicos para webs y apps con CSS. Usando Flex y Grid, con el código listo para copiar: →
0:16

Los layouts más típicos para webs y apps con CSS. Usando Flex y Grid, con el código listo para copiar: →

Miguel Ángel Durán

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

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

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

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`
0:15

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`

Adam Argyle

34,575 просмотров • 1 год назад

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

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

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇
0:12

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇

Shefali

29,340 просмотров • 1 год назад

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}
0:11

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}

jhey ʕ•ᴥ•ʔ

32,727 просмотров • 1 год назад

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }
0:11

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

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