#sibling-index

[ follow ]
#css #responsive-design #sibling-count #hexagon-grid #corner-shape #css-offset-path #circular-avatar-layout
#css
fromCSS-Tricks
1 week ago
Web development

Responsive Hexagon Grid Using Modern CSS | CSS-Tricks

Modern CSS features (corner-shape, sibling-index(), unit-division) enable a simpler, media-query-free responsive hexagon grid implementation currently supported in Chrome.
fromUtilitybend
3 months ago
Web development

Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend

sibling-index() and sibling-count() enable selecting elements by position among siblings, simplifying staggered animations and conditional CSS logic.
fromUtilitybend
3 months ago
Web development

Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend

more#css
Web development
fromCSS-Tricks
1 month ago

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

Use CSS offset-path with offset-distance calculated from sibling-index()/sibling-count() to arrange responsive avatar images evenly around a circle.
Web development
fromCSS-Tricks
3 months ago

Sequential linear() Animation With N Elements | CSS-Tricks

Use sibling-index() and sibling-count() with the linear() timing function to create automatically staggered sequential animations for any number of sibling elements.
[ Load more ]