Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Design Engineering Tip Your tooltip doesn’t always end up where you placed it? When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction. @ container anchored(fallback: flip-block)...

gabriell_lab's profile picture

Gabriel

12,970 subscribers

12,010 görüntüleme • 3 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

hardcoded tooltip CSS works until it meets the edge bad (gets clipped): position absolute left 100% translateY(-50%) good: (collision aware) measure viewport space choose placement set top/left move the arrow animate from the correct origin
0:17

hardcoded tooltip CSS works until it meets the edge bad (gets clipped): position absolute left 100% translateY(-50%) good: (collision aware) measure viewport space choose placement set top/left move the arrow animate from the correct origin

Tanvir

54,846 görüntüleme • 5 ay önce

💡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,924 görüntüleme • 1 yıl önce

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer
0:11

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer

Aceternity

43,806 görüntüleme • 3 yıl önce

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.
0:19

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 görüntüleme • 10 ay önce

Base UI Tooltip with the detached triggers API
0:12

Base UI Tooltip with the detached triggers API

Colm Tuite

15,228 görüntüleme • 5 ay önce

Timing is a small aspect that changes how an interaction feels When every tooltip has a hover delay, reading a whole toolbar takes 6.9s. With a delay only on the first one, it takes 3.7s The first tooltip waits ~500ms so it doesn't appear by accident. Once you move between icons, you're clearly exploring, so the rest appear instantly. Move away for ~300ms and the delay resets
0:16

Timing is a small aspect that changes how an interaction feels When every tooltip has a hover delay, reading a whole toolbar takes 6.9s. With a delay only on the first one, it takes 3.7s The first tooltip waits ~500ms so it doesn't appear by accident. Once you move between icons, you're clearly exploring, so the rest appear instantly. Move away for ~300ms and the delay resets

Juliette

21,385 görüntüleme • 16 gün önce

design tip: scaling everyone scales things from the center. scaling from the exact point you clicked/hovered feels 10x better, and it's basically one property: 1. transform-origin: pointer's position as % of container 2. animate scale from 0 to 1 more details below ↓
0:13

design tip: scaling everyone scales things from the center. scaling from the exact point you clicked/hovered feels 10x better, and it's basically one property: 1. transform-origin: pointer's position as % of container 2. animate scale from 0 to 1 more details below ↓

Harsh Singh

16,405 görüntüleme • 4 ay önce

On your open perpetual position can become an NFT and live in your wallet. You open a position like normal than mint it. The program issues a token 2022 nft, that points to your exact position. Normally your open position lives inside the protocol. With Percolator Trade your able to wrap it into an NFT that sits in your own wallet. A real, ownable object instead of a line in a dashboard. Because it’s a token, it moves like one. Send the NFT to another wallet and the position goes with it. Whoever holds the NFT owns the trade. One NFT = one position If you burn it, your back to holding the position directly. That’s the composable part, a position use to be stuck inside one account. Because it’s a token, it can now be sold OTC or used by anything that speaks tokens. Why does it matter? Because the position is bound to the NFT, it can’t be drained out from under whoever holds it so there is no middleman that holds your position. The NFT does, and the NFT is yours. One important safety detail; transfers run through a token 2022 hook that checks the positions health first, so it can’t be handed off in a broken state & the NFT layer is a separate program so it can never touch the funds the core engine holds.
0:13

On your open perpetual position can become an NFT and live in your wallet. You open a position like normal than mint it. The program issues a token 2022 nft, that points to your exact position. Normally your open position lives inside the protocol. With Percolator Trade your able to wrap it into an NFT that sits in your own wallet. A real, ownable object instead of a line in a dashboard. Because it’s a token, it moves like one. Send the NFT to another wallet and the position goes with it. Whoever holds the NFT owns the trade. One NFT = one position If you burn it, your back to holding the position directly. That’s the composable part, a position use to be stuck inside one account. Because it’s a token, it can now be sold OTC or used by anything that speaks tokens. Why does it matter? Because the position is bound to the NFT, it can’t be drained out from under whoever holds it so there is no middleman that holds your position. The NFT does, and the NFT is yours. One important safety detail; transfers run through a token 2022 hook that checks the positions health first, so it can’t be handed off in a broken state & the NFT layer is a separate program so it can never touch the funds the core engine holds.

Percolator

12,359 görüntüleme • 4 ay önce

The magic of clip paths. Animated tooltip component in NextJS and Matt Perry's motion.
0:12

The magic of clip paths. Animated tooltip component in NextJS and Matt Perry's motion.

Seyi

42,833 görüntüleme • 1 yıl önce

This tooltip by ⁦Dima Belyaev⁩ 🤯
0:15

This tooltip by ⁦Dima Belyaev⁩ 🤯

Hakim El Hattab

89,100 görüntüleme • 3 yıl önce

Excited to publish my first skill: Prefer Container Queries It makes components respond to their container's width, not the viewport - so the same component adapts anywhere you drop it. npx skills add flornkm/skills
0:18

Excited to publish my first skill: Prefer Container Queries It makes components respond to their container's width, not the viewport - so the same component adapts anywhere you drop it. npx skills add flornkm/skills

Florian

79,209 görüntüleme • 3 ay önce

CSS tip: stop your layout from jumping sideways when the scrollbar appears. html { scrollbar-gutter: stable; } The browser reserves space for the scrollbar ahead of time, so nothing shifts.
0:18

CSS tip: stop your layout from jumping sideways when the scrollbar appears. html { scrollbar-gutter: stable; } The browser reserves space for the scrollbar ahead of time, so nothing shifts.

Marko Denic

12,938 görüntüleme • 6 gün önce

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };
0:16

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };

Gabriel

19,660 görüntüleme • 2 ay önce

None! 🙌 TVs ship as large items . No container needed. Shopping in the app? Just select the sea option and we’ll detect if the items will fit into a container or ship as a large item automatically, works even for a mixed cart, where large items ship on their own and the rest goes into a container. Buying elsewhere and sending to your locker address? Just pick the large item option when you create the shipment.
0:16

None! 🙌 TVs ship as large items . No container needed. Shopping in the app? Just select the sea option and we’ll detect if the items will fit into a container or ship as a large item automatically, works even for a mixed cart, where large items ship on their own and the rest goes into a container. Buying elsewhere and sending to your locker address? Just pick the large item option when you create the shipment.

Golly Express

16,633 görüntüleme • 3 ay önce

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar
0:12

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar

dmytro

54,436 görüntüleme • 11 ay önce

If you can dream it, you can build it. From a plain shipping container to a glass flower house in the wild
0:15

If you can dream it, you can build it. From a plain shipping container to a glass flower house in the wild

Architecture Presentation

207,302 görüntüleme • 10 ay önce

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️
0:13

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

67,744 görüntüleme • 6 ay önce

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:
0:16

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:

Ahmad Shadeed

25,953 görüntüleme • 2 yıl önce

came up with this idea where you can take a selfie with your position, prototyped it in a day, and it's now in the app.
0:10

came up with this idea where you can take a selfie with your position, prototyped it in a day, and it's now in the app.

Kevin Shay

88,290 görüntüleme • 5 ay önce

I have compiled the Top 25 of the most Successful Start-Up Landing Pages. You can use it to: • Find inspirations for your product • Learn how to position your product • Learn the Landing Page layout that works Want the figma design file? To receive, Like + Comment "FIGMA" and I'll DM it to you. (Must be following for priority)
0:12

I have compiled the Top 25 of the most Successful Start-Up Landing Pages. You can use it to: • Find inspirations for your product • Learn how to position your product • Learn the Landing Page layout that works Want the figma design file? To receive, Like + Comment "FIGMA" and I'll DM it to you. (Must be following for priority)

Alfi

64,684 görüntüleme • 1 yıl önce