Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-options: flip-block, flip-inline; } That's all 👆 Keeps the menu tethered to the button

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,293 subscribers

112,008 Aufrufe • vor 2 Jahren •via X (Twitter)

BildungWissenschaft & TechnologieKunst
LIVE

Anya Rossi• Live Now

Private livecam show

9 Kommentare

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

Here's the @CodePen link! 🚀 Starting to piece together these demos for @figma Config 2024 🫡 This demo should be good everywhere. Where Anchoring isn't supported, it uses floating-ui 🤙

Profilbild von Arunabh Verma
Arunabh Vermavor 2 Jahren

Cool, I tried something similar with React Native. I had to find the distance between the edge and the menu, then change its position. Curious about the throwing menu—how is it so smooth? Did you nail that with CSS or need some JS?

Profilbild von 𝓈𝓃𝑜𝓌𝓎 𝚙𝚑𝚒𝚕 🌌✨❄️🫂
𝓈𝓃𝑜𝓌𝓎 𝚙𝚑𝚒𝚕 🌌✨❄️🫂vor 2 Jahren

@chrrynobaka

Profilbild von Daniel Vaughn
Daniel Vaughnvor 2 Jahren

One gotcha that I’ve noticed is that source order matters. You can’t reference an anchor name before it’s declared. Makes sense, but depending the scenario, it can definitely be a pain.

Profilbild von wsk
wskvor 2 Jahren

Can this be animated? Like here:

Profilbild von Agrim Sharma
Agrim Sharmavor 2 Jahren

So cool

Profilbild von Nine
Ninevor 2 Jahren

My G haha

Profilbild von Nir Galon
Nir Galonvor 2 Jahren

Cool 😎

Profilbild von Alex Inkin
Alex Inkinvor 2 Jahren

Is it possible to shrink height up to some point before flipping vertically?

Ähnliche Videos

3 lines of CSS to make your tooltips/menus stay in view 🤯 (Check it! 👇) [popover] { top: anchor(top); left: anchor(right); position-try-options: flip-block, flip-inline; } Responds to scroll, layout change, etc. Watch the nested menu 👇 Anchor Positioning is coming 🚀
1:12

3 lines of CSS to make your tooltips/menus stay in view 🤯 (Check it! 👇) [popover] { top: anchor(top); left: anchor(right); position-try-options: flip-block, flip-inline; } Responds to scroll, layout change, etc. Watch the nested menu 👇 Anchor Positioning is coming 🚀

jhey ʕ•ᴥ•ʔ

484,069 Aufrufe • vor 2 Jahren

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀
0:26

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀

jhey ʕ•ᴥ•ʔ

88,069 Aufrufe • vor 2 Jahren

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,851 Aufrufe • vor 3 Jahren

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! 👇
0:25

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

729,633 Aufrufe • vor 2 Jahren

💡 CSS Tip! In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀 No one can memorize them all, so I've created an interactive demo from where you can get the code.
0:46

💡 CSS Tip! In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀 No one can memorize them all, so I've created an interactive demo from where you can get the code.

CSS by T. Afif

43,046 Aufrufe • vor 11 Monaten

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️
0:33

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️

jhey ʕ•ᴥ•ʔ

91,134 Aufrufe • vor 2 Jahren

The Turkish news anchor ended the live broadcast by switching to Spanish and thanked Spain for "standing on the right side of history," a clip that has already gathered over a million views on X.
0:30

The Turkish news anchor ended the live broadcast by switching to Spanish and thanked Spain for "standing on the right side of history," a clip that has already gathered over a million views on X.

𝕊𝕡𝕣𝕚𝕟𝕥𝕖𝕣 𝕻𝕣𝕖𝕤𝕤

125,518 Aufrufe • vor 6 Monaten

New Keeta Anchor incoming The interface is still buggy but the underlying functionality is almost ready Send and receive from your favorite chain right inside your Keeta Wallet Anything to anywhere, all at once
0:53

New Keeta Anchor incoming The interface is still buggy but the underlying functionality is almost ready Send and receive from your favorite chain right inside your Keeta Wallet Anything to anywhere, all at once

xescure

12,520 Aufrufe • vor 6 Monaten

🚨 BREAKING: The Supreme Court has just agreed to hear President Trump’s case BANNING birthright citizenship in the U.S. LET’S GO!!! Anchor babies from illegals have NO RIGHT to be automatic citizens The case will be heard by February 2026
1:02

🚨 BREAKING: The Supreme Court has just agreed to hear President Trump’s case BANNING birthright citizenship in the U.S. LET’S GO!!! Anchor babies from illegals have NO RIGHT to be automatic citizens The case will be heard by February 2026

Nick Sortor

1,133,008 Aufrufe • vor 9 Monaten

"I cannot believe that right now in the United States... a reporter asking tough questions and that the government decides to arrest him. That's exactly what's happening, the same thing that happened (to me) in Venezuela." Former Univision anchor Jorge Ramos, who was once detained by Nicholas Maduro, speaks to Erin Burnett about Trump DOJ arresting Don Lemon.
5:48

"I cannot believe that right now in the United States... a reporter asking tough questions and that the government decides to arrest him. That's exactly what's happening, the same thing that happened (to me) in Venezuela." Former Univision anchor Jorge Ramos, who was once detained by Nicholas Maduro, speaks to Erin Burnett about Trump DOJ arresting Don Lemon.

Erin Burnett OutFront

48,589 Aufrufe • vor 7 Monaten

Right now, Democrats in Michigan and around the country are organizing to win this seat and flip the Senate. Meanwhile, my opponent Haley Stevens is fundraising with a Republican Senator who could block the Democratic Senate Majority.
1:11

Right now, Democrats in Michigan and around the country are organizing to win this seat and flip the Senate. Meanwhile, my opponent Haley Stevens is fundraising with a Republican Senator who could block the Democratic Senate Majority.

Mallory McMorrow

170,714 Aufrufe • vor 4 Monaten

Ime Udoka was asked by Varun Shankar about the Reed Sheppard-Alperen Sengun defensive combination. "We have all the data to show what lineups work well, what rotations, what two-man coverages. That's one that's not at the top of our list defensively." He talked about how they can try to make that work, putting the right pieces around them to cover that.
1:11

Ime Udoka was asked by Varun Shankar about the Reed Sheppard-Alperen Sengun defensive combination. "We have all the data to show what lineups work well, what rotations, what two-man coverages. That's one that's not at the top of our list defensively." He talked about how they can try to make that work, putting the right pieces around them to cover that.

ClutchFans

45,593 Aufrufe • vor 6 Monaten

TrueNorth x Derive Options Intelligence now builds you a trading plan. Powered by Derive.xyz options data, it reads the full options structure (call walls, put walls, max pain, GEX flip) and generates scenario-based plans with exact triggers and actions. Range play, regime flip, squeeze setup. Each one mapped to specific levels on your chart. No more staring at Greeks trying to figure out what to do. The plan is right there. DM Derive.xyz for an invite code to try it out.
0:39

TrueNorth x Derive Options Intelligence now builds you a trading plan. Powered by Derive.xyz options data, it reads the full options structure (call walls, put walls, max pain, GEX flip) and generates scenario-based plans with exact triggers and actions. Range play, regime flip, squeeze setup. Each one mapped to specific levels on your chart. No more staring at Greeks trying to figure out what to do. The plan is right there. DM Derive.xyz for an invite code to try it out.

TrueNorth AI

11,972 Aufrufe • vor 5 Monaten

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @​property --value { syntax: ' '; } @​keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document​.documentElement​.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇
0:40

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @​property --value { syntax: ' '; } @​keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document​.documentElement​.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

251,867 Aufrufe • vor 2 Jahren

100% autonomous 1x speed. Exact moves not explicitly trained. Physical common sense from pretraining Top left: putting it back in a grab-able position after it drop Bottom right: Notice the nudge to get it away from the edge Top right: orientation correction & light tap to end
0:32

100% autonomous 1x speed. Exact moves not explicitly trained. Physical common sense from pretraining Top left: putting it back in a grab-able position after it drop Bottom right: Notice the nudge to get it away from the edge Top right: orientation correction & light tap to end

Evan Morikawa

12,943 Aufrufe • vor 7 Monaten

CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @​keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇
0:52

CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @​keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,509 Aufrufe • vor 2 Jahren

They're trying to deport "ANCHOR BABIES,"... immigrants who gave birth in the U.S. so their kids, like this man ⬇️, can be automatic citizens. Even though his parents are immigrants. That's why TRUMP is ending birth right citizenship. Your babies will still be immigrants
0:25

They're trying to deport "ANCHOR BABIES,"... immigrants who gave birth in the U.S. so their kids, like this man ⬇️, can be automatic citizens. Even though his parents are immigrants. That's why TRUMP is ending birth right citizenship. Your babies will still be immigrants

Cornbread Mafioso 🖕🏾

32,128 Aufrufe • vor 10 Monaten

Anchor: I'm surprised that India did not position itself as a mediator in the US-Iran war. Why not? Shashi Tharoor: That's a very fair question. India has channels to all the key players. But Pakistan had a little more directly at stake. Also their mediation doesn't diminish us
0:57

Anchor: I'm surprised that India did not position itself as a mediator in the US-Iran war. Why not? Shashi Tharoor: That's a very fair question. India has channels to all the key players. But Pakistan had a little more directly at stake. Also their mediation doesn't diminish us

Shashank Mattoo

124,350 Aufrufe • vor 4 Monaten

“Rufai is insvlting people on national TV all in the name of journalism. He doesn’t have the right to speak where men of integrity are talking.”👀👀 –Yul Edochie slams Rufai Oseni, an anchor at Arise TV, over his conduct toward guests on TV
4:16

“Rufai is insvlting people on national TV all in the name of journalism. He doesn’t have the right to speak where men of integrity are talking.”👀👀 –Yul Edochie slams Rufai Oseni, an anchor at Arise TV, over his conduct toward guests on TV

CHUKS 🍥

28,706 Aufrufe • vor 6 Monaten