#responsive-layout

[ follow ]
#css-grid #hexagon-shapes #modern-css-features #css #image-overlap #masking
fromCSS-Tricks
3 weeks ago

Making a Responsive Pyramidal Grid With Modern CSS | CSS-Tricks

Support is limited to Chrome only because this technique uses recently released features, including corner-shape, sibling-index(), and unit division. In this article, we will explore another type of grid: a pyramidal one. We are still working with hexagon shapes, but a different organization of the elements. A demo worth a thousand words: For better visualization, open the full-page view of the demo to see the pyramidal structure. On screen resize, you get a responsive behavior where the bottom part starts to behave similarly to the grid we created in the previous article!
Web development
UX design
fromCSS-Tricks
2 months ago

Responsive List of Avatars Using Modern CSS (Part 1) | CSS-Tricks

Responsive overlapping circular images adjust overlap dynamically using CSS masks, flexbox layout, and sibling-index()/sibling-count() to maintain transparent gaps and animated interactions.
[ Load more ]