Sunday, February 22, 2015

How does the CSS for those circular avatars at vine.co and ello.co behave?

.sidebar.user .icon {
   width: 94px;
   height: 94px;
   border-radius: 50%;
   margin-bottom: 15px;
   cursor: pointer;
   background-size: cover;
   background-color: transparent;
}

...seems to be slapped on my avatar at Vine:

As best as I can tell, the combinaton of the border-radius and the background-color settings allow for a square shape (94 by 94 pixels) to have its rounded off corners disapper while the background-size does the magic of making a background image resizable!

No comments:

Post a Comment