Perfectly Pointed Tooltips: To The Corners
With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we’re going to get extra tricky and point them diagonally.
Temani Afif
Perfectly Pointed Tooltips: All Four Sides
Tooltips are a natural fit for the abilities of Anchor Positioning, which can help place them on *any* side or corner. It does make dealing with the pointer extra tricky though.
Perfectly Pointed Tooltips: A Foundation
The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
Infinite Marquee Animation using Modern CSS
A row of logos that animate forever perfectly and don’t have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!
Drawing CSS Shapes using corner-shape
After you’ve got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.
Creating Blob Shapes using clip-path: shape()
Blobs! Gooey weird shapes you can fill with any background and even animate.
Creating Flower Shapes using clip-path: shape()
Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.
Custom progress element using the attr() function
Now that we’re starting to be able to apply types (like `number`) to values of attributes we pull of HTML elements in CSS, doing interesting things with
Full-Bleed Layout with Modern CSS
Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue.
Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations
A single HTML `progress` element can have quite an elaborate design with custom colors, a tooltip showing the active %, and even an entrance animation.
