Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
CSS by T. Afif :verified:
CSS by T. Afif :verified:
@css@front-end.social  路  activity timestamp 2 weeks ago

馃摑 New CSS Article!

Learn how I made that responsive list of overlapping images using modern CSS.

https://css-tricks.com/responsive-list-of-avatars-using-modern-css-part-1/

A perfect use case for the new sibling-index() and sibling-count() functions.

#CSS #HTML

CSS-Tricks

Responsive List of Avatars Using Modern CSS (Part 1)

A list of rounded images that slightly overlap each other is a classic web design pattern. The main idea is not complex, but the new thing is the responsive part. that dynamically adjusts the overlap between the images so they fit inside the container.
Your browser does not support the video tag.
GIF
GIF
Sorry, no caption provided by author
Sorry, no caption provided by author
  • Copy link
  • Flag this post
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About 路 Code of conduct 路 Privacy 路 Users 路 Instances
Bonfire social 路 1.0.1-alpha.41 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct