Irregular-shaped Links with Subgrid
Publikováno: 16.7.2020
Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That rules out using some parent element and making the whole larger encompassing rectangle clickable, which is a common (but equally tricky) pattern.
Kicking one rectangle outside the bounds of the linked one with absolute positioning could work, but Michelle takes a path here that lays everything out on a grid, then uses pointer-events… Read article “Irregular-shaped Links with Subgrid”
The post Irregular-shaped Links with Subgrid appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That rules out using some parent element and making the whole larger encompassing rectangle clickable, which is a common (but equally tricky) pattern.
Kicking one rectangle outside the bounds of the linked one with absolute positioning could work, but Michelle takes a path here that lays everything out on a grid, then uses pointer-events to get the click areas just right. Feels more robust to me.
Yet another good example of why we need subgrid everywhere, stat.
Direct Link to Article — Permalink
The post Irregular-shaped Links with Subgrid appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.