Responsive List of Avatars Using Modern CSS (Part 2)

Ready for the second part? If you recall, last time we worked on a responsive list of overlapping avatar images featuring a cut-out between them. We are still creating a responsive list of avatars, but this time it will be a circular list. This design is less common than the horizontal list, but it’s still a good exercise to explore new CSS tricks. Let’s start with a demo. You can resize it and see how the images behave, and also hover them to get a cool reveal effect. The following demo is currently limited to Chrome and Edge, but will work in other browsers as the sibling-index() and functions gain broader support. You can track Firefox support in sibling-count() Ticket #1953973 and WebKit’s position in Issue #471 . We will rely on the same HTML structure and CSS base as the example we covered in Part 1 : a list of images inside a container with mask -ed cutouts. This time, however, the positions will be different. Responsive List of Avatars Using Modern CSS Horizontal Lists Circular Lists ( You are here! ) Placing Images Around a Circle There are several techniques for placing images around a circle . I will start with my favorite one, which is less known but uses a simple code that relies on the CSS offset property. .container { display: grid; } .container img { grid-area: 1/1; offset: circle(180px) calc(100%*sibling-index()/sibling-count()) 0deg; } The code doesn’t look super intuitive, but its logic is fairly straightforward. The offset property is a shorthand, so let’s write it the longhand way to see how breaks down: offset-path: circle(180px); offset-distance: calc(100%*sibling-index()/sibling-count()); offset-rotate: 0deg; We define a path to be a circle with a radius of 180px . All the images will “follow” that path, but will initially be on top of each other. We need to adjust their distance to change their position along the path (i.e., the circle). That’s where offset-distance comes into play, which we combine with the and sibling-index() functions to create code that works with any number of elements instead of working with exact numbers. sibling-count() For six elements, the values will be as follows: 100% x 1/6 = 16.67% 100% x 2/6 = 33.33% 100% x 3/6 = 50% 100% x 4/6 = 66,67% 100% x 5/6 = 83.33% 100% x 6/6 = 100% This will place the elements evenly around the circle. To this, we add a rotation equal to 0deg using offset-rotate to keep the elements straight so they don’t rotate as they follow the circular path. From there, all we have to do is update the circle’s radius with the value we want. That’s my preferred approach, but there is a second one that uses the transform property to combine two rotations with a translation: .container { display: grid; } .container img { grid-area: 1/1; --_i: calc(1turn*sibling-index()/sibling-count()); transform: rotate(calc(-1*var(--_i))) translate(180px) rotate(var(--_i)); } The translation contains the circle radius value and the rotations use generic code that relies on the sibling-* functions the...

Preview: ~500 words