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:
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.
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
Subscribe to our email newsletter for useful tips and freebies.
