Loading video...
Video Failed to Load
Future CSS Tip! ๐ฎ Anchor Positioning lets you anchor elements to others with CSS alone ๐ It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" ๐คฏ .el { bottom: anchor(--link top); } Just CSS ๐
160,649 views โข 3 years ago โขvia X (Twitter)
10 Comments
If you want to see this demo in action, here's the @CodePen link! ๐ค You'll need to be in Chrome Canary with the "Experimental Web Platform Features" flag enabled โณ๏ธ This one anchors Popovers using the Popover API ๐
And here's an article I put together all about Anchor Positioning that looks into some of the main parts of this CSS API ๐
This is great! tip! thanks you for sharing
It'll be pretty cool when/if it lands in other browsers! ๐ฏ
Unrelated question but when is it the right time to implement these new css features? Browser support can widely vary and many systems will still run old browser version so what's the recommended way to go about this?
@SaveToNotion #thread #css
Wow! This will be really very helpful ๐คฉ
๐คฏ!
Whoaโฆ
A @tailwindcss version of this would be amazing
![Future CSS Tip! ๐ฎ You could combine anchor positioning + :has to create this kinda iPad style follow effect โจ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! ๐ CodePen.IO link below! ๐](https://image.24vids.com/tw-1636420648535769107/ext_tw_video_thumb/1636419242886152232/pu/img/fu92DyOAZ6bLZ3qp.jpg)
![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 ๐](https://image.24vids.com/tw-1778946758510260727/ext_tw_video_thumb/1778944346861060097/pu/img/_2J4rw0uLEwm_lIS.jpg)
![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! ๐](https://image.24vids.com/tw-1742951071473967117/ext_tw_video_thumb/1742947397649506306/pu/img/A1Su3thQr8ZQBvdt.jpg)
![CSS Tip! โจ It's 2024 and you have a new way to make animated borders ๐ .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @โkeyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others ๐ The rect() value gained support in Safari 17.2 ๐ To start, you create an element and put it inside your main element. For example, you put a span inside the button ๐ค Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @โkeyframes animation merely animates the offset-distance of that pseudoelement to 100% @โkeyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video ๐ซถ The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element ๐ค Lastly, the visuals ๐จ For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite โจ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful ๐ CodePen.IO link below ๐](https://image.24vids.com/tw-1752903535488823789/ext_tw_video_thumb/1752900027591151616/pu/img/d0sViTqgbe8N-yux.jpg)
