Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

lazy exclusion tabs using CSS :has() 🤙 transition custom properties for a clip-path give one a slight delay .track { clip-path: inset(0 var(--x2) 0 var(--x1)); transition: --x1 0.2s, --x2 0.2s 0.1s; } .tabs:has(input:nth-of-type(1):checked) .track { --x1: 0; --x2: 89%; }

jhey ʕ•ᴥ•ʔ

146,401 subscribers

134,390 views • 2 years ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

jhey ʕ•ᴥ•ʔ

79,987 views • 2 years ago

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

731,049 views • 3 years ago

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

437,855 views • 2 years ago

Intentional CSS :hover effects 🎈 Add a small transition-delay so you know the :hover is intentional. See the difference below 🎞️ a::after { transition: scale 0.2s ease-in-out; } vs. a::after { transition: scale 0.2s 0.125s ease-in-out; } Can be useful for some designs 🤙

Intentional CSS :hover effects 🎈 Add a small transition-delay so you know the :hover is intentional. See the difference below 🎞️ a::after { transition: scale 0.2s ease-in-out; } vs. a::after { transition: scale 0.2s 0.125s ease-in-out; } Can be useful for some designs 🤙

jhey ʕ•ᴥ•ʔ

109,813 views • 2 years ago

👤 508 Apps ⚽ 17 Goals 🎯 56 Assists 🏆 x2 Premier League 🏆 x1 FA Cup 🏆 x1 EFL Cup 🏆 x1 Champions League 🏆 x2 Europa League 🏆 x1 Super Cup 🏆 x1 Club World Cup 🏅 x1 Chelsea Players POTY Happy 33rd Birthday to Cesar Azpilicueta 🎉

👤 508 Apps ⚽ 17 Goals 🎯 56 Assists 🏆 x2 Premier League 🏆 x1 FA Cup 🏆 x1 EFL Cup 🏆 x1 Champions League 🏆 x2 Europa League 🏆 x1 Super Cup 🏆 x1 Club World Cup 🏅 x1 Chelsea Players POTY Happy 33rd Birthday to Cesar Azpilicueta 🎉

CFC-Blues

497,815 views • 3 years ago

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

jhey ʕ•ᴥ•ʔ

90,716 views • 2 years ago

Modi x2 Amit Shah x1 #ShyamRangeela

Modi x2 Amit Shah x1 #ShyamRangeela

Shyam Rangeela

21,094 views • 2 months ago

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

70,821 views • 2 years ago

#OnThisDay: Leroy Sané left #ManCity [2020] 🔵 135 Apps ⚽️ 39 Goals 🅰️ 45 Assists 🏆 League Cup [x2] 🏆 Premier League [x2] 🏆 Community Shield [x2] 🏆 FA Cup [x1] 🏅 PFA Young Player of the Year [x1] 🏅 Premier League Player of the Month [x1]

#OnThisDay: Leroy Sané left #ManCity [2020] 🔵 135 Apps ⚽️ 39 Goals 🅰️ 45 Assists 🏆 League Cup [x2] 🏆 Premier League [x2] 🏆 Community Shield [x2] 🏆 FA Cup [x1] 🏅 PFA Young Player of the Year [x1] 🏅 Premier League Player of the Month [x1]

City Xtra

35,577 views • 4 months ago

Benzema x2 Asensio x1 Just perfection 🤭

Benzema x2 Asensio x1 Just perfection 🤭

LALIGA English

10,290 views • 4 months ago

Everyone's upgrading for TOTY. Don't be the one that didn't. 📂 FC26 TOTY Stream package └ 📂 TOTY Webcam Overlay (x4) └ 📂 TOTY Stream Screen (x4) └ 📂 TOTY Alerts (x3) └ 📂 TOTY Intermission Screen (x2) └ 📂 TOTY Counters (x2) └ 📂 TOTY Scene Transition (x1) └ 📂 TOTY Scoreboard (x1) Link bellow ↓ #TOTY | #FC26

Everyone's upgrading for TOTY. Don't be the one that didn't. 📂 FC26 TOTY Stream package └ 📂 TOTY Webcam Overlay (x4) └ 📂 TOTY Stream Screen (x4) └ 📂 TOTY Alerts (x3) └ 📂 TOTY Intermission Screen (x2) └ 📂 TOTY Counters (x2) └ 📂 TOTY Scene Transition (x1) └ 📂 TOTY Scoreboard (x1) Link bellow ↓ #TOTY | #FC26

Visuape

21,321 views • 10 months ago

Joyeux anniversaire à Angel Di Maria 🇦🇷 qui fête ses 38 ans aujourd’hui. 🎂 🏆x1 Liga Portugal 🏆x1 LDC 🏆x1 Liga 🏆x2 Copa del Rey 🏆x1 Supercoupe UEFA 🏆x5 Ligue 1 🏆x5 Coupe de France 🏆x4 Coupe de la Ligue 🏆x1 CDM 🏆x2 Copa America

Joyeux anniversaire à Angel Di Maria 🇦🇷 qui fête ses 38 ans aujourd’hui. 🎂 🏆x1 Liga Portugal 🏆x1 LDC 🏆x1 Liga 🏆x2 Copa del Rey 🏆x1 Supercoupe UEFA 🏆x5 Ligue 1 🏆x5 Coupe de France 🏆x4 Coupe de la Ligue 🏆x1 CDM 🏆x2 Copa America

Actu Foot

65,629 views • 9 months ago

👤 290 Appearances 🏆 x2 Premier Leagues 🏆 x1 Champions League 🏆 x2 FA Cups 🏆 x2 Europa Leagues 🏆 x1 League Cup 🏅 x3 PFA Team of the Year On This Day in 2012, Gary Cahill signed for the club for a fee around £7m. 💙 #CFC

👤 290 Appearances 🏆 x2 Premier Leagues 🏆 x1 Champions League 🏆 x2 FA Cups 🏆 x2 Europa Leagues 🏆 x1 League Cup 🏅 x3 PFA Team of the Year On This Day in 2012, Gary Cahill signed for the club for a fee around £7m. 💙 #CFC

CFC-Blues

33,367 views • 1 year ago

subtle css border pulse effect w/ :active + offset opacity transition 🧑‍🍳 button::after { border: 1px solid #000; opacity: 0; transition: opacity 0.6s 0.1s var(--ease); } button:active::after { opacity: 1; transition-duration: 0s; }

subtle css border pulse effect w/ :active + offset opacity transition 🧑‍🍳 button::after { border: 1px solid #000; opacity: 0; transition: opacity 0.6s 0.1s var(--ease); } button:active::after { opacity: 1; transition-duration: 0s; }

jhey ʕ•ᴥ•ʔ

45,121 views • 11 months ago

#OnThisDay: #ManCity signed Manuel Akanji for £15M [2022] 🔵 136 Appearances ⚽️ 5 Goals 🅰️ 3 Assists 🏆 Premier League [x2] 🏆 Champions League [x1] 🏆 Community Shield [x1] 🏆 Club World Cup [x1] 🏆 Super Cup [x1] 🏆 FA Cup [x1]

#OnThisDay: #ManCity signed Manuel Akanji for £15M [2022] 🔵 136 Appearances ⚽️ 5 Goals 🅰️ 3 Assists 🏆 Premier League [x2] 🏆 Champions League [x1] 🏆 Community Shield [x1] 🏆 Club World Cup [x1] 🏆 Super Cup [x1] 🏆 FA Cup [x1]

City Xtra

81,598 views • 2 months ago

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

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

358,016 views • 1 year ago

#OnThisDay: #ManCity signed Pablo Zabaleta for £6.5M from Espanyol [2008] 🔵 333 Apps ⚽️ 12 Goals 🅰️ 28 Assists 🚫 124 Clean Sheets 🏆 Premier League [x2] 🏆 League Cup [x2] 🏆 FA Cup [x1] 🏆 Charity Shield [x1] 🏅 PFA TOTY [x1] 🏅 Manchester City POTM [x3]

Sensitive content

#OnThisDay: #ManCity signed Pablo Zabaleta for £6.5M from Espanyol [2008] 🔵 333 Apps ⚽️ 12 Goals 🅰️ 28 Assists 🚫 124 Clean Sheets 🏆 Premier League [x2] 🏆 League Cup [x2] 🏆 FA Cup [x1] 🏆 Charity Shield [x1] 🏅 PFA TOTY [x1] 🏅 Manchester City POTM [x3]

City Xtra

64,480 views • 2 months ago

𝐕𝐈𝐂𝐓𝐎𝐑𝐈𝐀 7-5 🆚 1K Fútbol Club 💛 3 de 3 en la Copa Amistosos 🏆 ⚽️x2 Jacobo ⚽️x1 Fuad El Amrani ⚽️x1 Pablo Beguer ⚽️x1 Carrazzo ⚽️x1 Oribe ⚽️x1 en propia puerta. Seguimoooooooos.

𝐕𝐈𝐂𝐓𝐎𝐑𝐈𝐀 7-5 🆚 1K Fútbol Club 💛 3 de 3 en la Copa Amistosos 🏆 ⚽️x2 Jacobo ⚽️x1 Fuad El Amrani ⚽️x1 Pablo Beguer ⚽️x1 Carrazzo ⚽️x1 Oribe ⚽️x1 en propia puerta. Seguimoooooooos.

xBuyer Team

72,097 views • 1 year ago