Skip to main content

I came across this article today that described an effect that one site uses to make their member avatars more distinctive looking:

http://www.lottejackson.com/le...ild-cicada-principle

If you like what they did there, here's some code for you to add to your own Crowdstack site that adds the "Cicada Effect" on your Members Directory and in widgets that displays grids of user avatars:

/* add blobbiness to member directory avatars */
#membersPage .h-member-box:nth-child(2n+1) img.member-avatar,
.h-members-grid:nth-child(2n+1) img.member-avatar,
.widget-box:nth-child(2n+1) img.avatar-list {
border-top-left-radius: 59%;
border-top-right-radius: 52%;
border-bottom-left-radius: 59%;
border-bottom-right-radius: 56%;
transform: rotate(-6deg);
}
#membersPage .h-member-box:nth-child(2n+1) img.member-avatar:hover,
.h-members-grid:nth-child(2n+1) img.member-avatar:hover,
.widget-box:nth-child(2n+1) img.avatar-list:hover {
border-top-left-radius: 51%;
border-top-right-radius: 67%;
border-bottom-left-radius: 64%;
border-bottom-right-radius: 56%;
transform: rotate(-4deg);
}

Tags: CSS, avatar

Replies sorted oldest to newest

Add Reply

×
×
×
Link copied to your clipboard.
×