Anchor

Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn’t seem like it would be possible in CSS alone… but…

An image gallery is a nice example of AIM, where the larger version of an image can “morph” out from the smaller one when opened, and back in when closed.

As it stands, you have to think about the layout engine and whether an element is “fully laid out” before an anchor is allowed to apply to it. Boooooo.

A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn’t get cut off.

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.

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.

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.

Seriously almost every “menu” and “tooltip” could and should use this when it’s ready.

A “game” where you enter the right CSS to move to the next level, teaching you CSS anchor positioning along the way. In the vein of Flexbox Froggy, which I know clicked with a ton of people. Made by Thomas Park, who’s company Codepip actually makes a ton of these experiences.

We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.