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

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

На главную

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,350 subscribers

517,488 просмотров • 2 лет назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

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

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

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

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 лет назад

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

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 лет назад

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 лет назад

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }
0:18

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

jhey ʕ•ᴥ•ʔ

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

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 просмотров • 1 год назад

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

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 ʕ•ᴥ•ʔ

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

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

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

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇
0:18

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

It took 40 minutes and 0 tears to create this toggle 😛 Just CSS and HTML. Link to CodePen in comments 👇
0:10

It took 40 minutes and 0 tears to create this toggle 😛 Just CSS and HTML. Link to CodePen in comments 👇

Viki ✨

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

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

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

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 лет назад

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷
0:11

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

Adam Argyle

22,444 просмотров • 1 год назад

I made the Apple iOS and macOS Liquid Glass effect using CSS and SVG filters and it's available on GitHub #WWDC25 Link below 👇
0:14

I made the Apple iOS and macOS Liquid Glass effect using CSS and SVG filters and it's available on GitHub #WWDC25 Link below 👇

Luke

288,938 просмотров • 1 год назад

Create this responsive flex layout using just HTML and CSS 🚀
0:10

Create this responsive flex layout using just HTML and CSS 🚀

David Mráz

38,100 просмотров • 1 год назад

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

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

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 лет назад