Web Design & Inspiration
Round Avatars in CSS3

Round Avatars in CSS3

Today I’ve got another task to deal with it was necessary to do “round avatars“.

Certainly, many experienced developers have a couple of methods by means of which it is possible to realize a similar functional. I want to share with you my own realization.

I remember when I only began to take a great interest in programming and study of HTML layout bases, the articles always helped me very much – examples of different realization of one or another functional. Now I am firmly convinced that the most rapid and clear method of learning is examples.

That’s why I’ve decided to write this article.

Probably it might seem boring for professional coders. However I hope that among our visitors there will be people who only begin the way of web -developer and will be interested in the offered technology.

When searching for a decision of this problem I decided to take advantage of modern CSS3 possibilities. Realization of “round avatars” turned out simple and flexible. A method is based on border – radius property.

For the display of avatars I used the following HTML code:

<div class="avatar">
    <img src="http://autokadabra.ru/system/uploads/users/1/1938/small.png" alt="avatar" />
</div>

CSS -styles for this code look the following way:

.avatar{ /* selector for avatar class*/
    float: left; /* we press to the left edge, flow around on the right */
    background: #fff; /* background */
    width: 50px; 
    height: 50px; 
    padding: 5px; /* internal padding ( top, right, bottom, left) */
    border: 1px solid #999; /* border(width, type, color) */
    border-radius: 50%; /* border-radius is equal to 50 percent of a general width, actually 25 pixels, here and a circle was got(there is also with prefix - moz and - o) */
    box-shadow: 0px 1px 1px 1px #bbb /* across displacement, vertical displacement, smearing, increase and color */
}
.avatar img{ /* selector for a picture which is "inside" the avatar class */
    display: block; /* a picture is being displayed as a block, by a width it will be equal to the parent(in the div) */
    width: 100%; /* width 100% */
    border: 0; /* zero border */
    margin: 0; /* external margin is lacking */
    border-radius: 50%; /* read above */
}

That’s it. As a result we get such picture:
example_round_avatar_css3 in Round Avatars in CSS3

Here you can see the example: http://jsfiddle.net/XVtMh/25/
I intentionally dropped the description of css -styles for different browsers, not to encumber the code.

You might also be interested in..

Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
Sprite animation in CSS3
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • kulakowka,
  • December 6, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • http://twitter.com/lydiawil Ly

    You 

  • http://www.webmentor.cr/ Marco

    I tried this recently but have some consistency issues with older versions of Opera and Firefox mostly. I think it’s the 50% radius. Going to try this approach next time.

    Thanks!

  • Enrique Moreno Tent

    Even easier:

    img{
        border-radius: 50%;
        box-shadow: 0 0 0 5px white, 0 0 0 6px #999, 0 2px 2px 6px #bbb;
    }

  • Ric

    I’d probably leave out the stylistic elements for the sake of clarity for the tutorial.

    Nothing wrong with something as simple as:

    .round {
       width: 75px;
       height: 75px;
       border-radius: 75px;
    }

  • http://www.iammakingprogress.com Patrick Bradley

    What if you don’t have a square aspect ration to begin with? This will warp the picture.