How To Code Unique Avatar Photo Styles Using CSS3?

The popularity of social networking has converted a lot of websites to be more user-centric. This means you can find loads of new profile features and direct-connect OAuth apps through Twitter, Facebook, Tumblr, Pinterest, and others. Typically the profile photo is a common facet to each profile webpage design. Photos or avatars can be uploaded by the user, and sometimes pulled directly from their other accounts online.

In this tutorial, I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported. This means frontend developers can start really pushing the boundaries of how we style media in webpages. The user experience of a profile page is definitely a good place to start.

Download Source Code

Creating the Webpage

When building this tutorial I specifically focused on using the smallest amount of HTML possible. Only one of the five avatar styles will use an outer container element, and that is for a glossy reflection effect. All of the techniques may be copied directly from the CSS stylesheet without much trouble. But let’s first take a peek at one of my sample index.html files.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Custom CSS3 Avatars - Demo #1</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="https://www.vandelaydesign.com/favicon.ico">
  <link rel="icon" href="https://www.vandelaydesign.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Cantora+One">
<!--[if lt IE 9]>
  <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Within the document header I am only referencing two main files, along with an IE-specific JS script. My basic styles.css will create the page effects and layout structure. Plus a custom Google Web Font is included to jazz up the design. The HTML5shiv document is only needed for older versions of Internet Explorer which do not properly render HTML5 elements on the page. It is not a requirement to keep everything working, but it doesn’t hurt to include the quick fix JS file using conditional comments.

Now I also have a bunch of excess HTML in the page which is only related to the layout structure. I want to focus on the avatar containers since these are the only differing elements on the pages. Each content area is made up of a left sidebar with the avatar and user information. This is aligned next to a content div with the navigation tabs and “user feed” block area.

<div id="leftcol">
  <div class="avatar-container">
    <!-- Avatar Source: http://vimeofaces.tumblr.com/post/932459489 -->
    <img src="images/avatar.jpg" alt="Default avatar" title="User Avatar" width="250" height="250" class="ava1">
  </div>
  <h2 class="username">Johnny Appleseed</h2>
  <h3 class="location">Boston, MA</h3>
  <div class="divider"> </div>
  <p class="desc">Frontend web developer and startup enthusiast. I would say that I like Apple products but nobody really cares anyways.</p>
</div><!-- @end #leftcol -->

<div id="rightcol">
  <nav class="profiletabs">
    <ul class="clearfix">
      <li><a href="index.html" class="sel">Demo #1</a></li>
      <li><a href="index1.html">Demo #2</a></li>
      <li><a href="index2.html">Demo #3</a></li>
      <li><a href="index3.html">Demo #4</a></li>
      <li><a href="index4.html">Demo #5</a></li>
    </ul>
  </nav>

Inside #leftcol you will find a slew of text blocks along with the div .avatar-container. If you copied over any of the HTML into your own page, just include the avatar-container div along with the internal img element.

For more web development resources, please see:

Styling the Avatar Photos

I have used the same goofy avatar for each of the profile page designs. Since the styles are fitted using border-box the photo itself may appear smaller in various styles which use internal margin/padding. But this will also keep the image tag fixed at 250×250 pixels no matter how much extra space we need to include.

.avatar-container {
  display: block;
  margin-bottom: 7px;
}

/** avatar #1 **/
.ava1 {
  border: 1px solid #cbcbcb;
  padding: 7px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
  -moz-box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
  -o-box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
  box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
}

The first sample I have used is built around an older Digg v3 style avatar. The image background is set to white so the image will stand out no matter what color is used in your website background. A small display of box-shadow properties on the image container will also stand out on the page. Each of the other styles is very similar, yet distinct in their own way.

/** avatar #2 **/
.ava2 {
  display: block;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  width: 250px;
  height: 250px;
  background: #fff;
  -webkit-box-shadow: -1px 3px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: -1px 3px 3px rgba(0,0,0,0.3);
  box-shadow: -1px 3px 3px rgba(0,0,0,0.3);
}

/** avatar #3 **/
.ava3 {
  border-radius: 14px;
  -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.4);
  box-shadow: 0 2px 1px rgba(0,0,0,0.4);
}

/** avatar #4 **/
.ava4 {
display: block;
padding: 7px;
background: #eaf0f3;
border: 2px dashed #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

The designs for avatars #02-04 are still using common CSS3 attributes. The 2nd example is a rounded circle avatar using a 100% border-radius. This should display the same in all browsers, and you can utilize vendor prefixes for even greater support. Older versions of IE also have workarounds where you can get rounded corner effects using native CSS properties.

Examples #03 and #04 also use rounded corners, but to a much smaller degree. The 3rd is similar to a full square avatar with a direct drop shadow off the image. Similarly my 4th example uses a darker background with dashed borders around the edge. It looks more like a cut-out image and quickly stands apart from the other page elements. Now my final avatar style is a bit more complicated, but presents an exceptional display.

Reflections with CSS3

I want to give credits to Dan Eden for sharing many of the following code snippets on his jsFiddle example page. We can use a property called -webkit-box-reflect to generate an Apple-style iTunes reflection for the avatar image. This is still very new to the CSS3 specifications and doesn’t seem to be supported in any versions of Internet Explorer. Firefox does have a similar property using -moz-element, but this also requires another container element to store the reflection image.

/** avatar #5 **/
/** default styles courtesy of Dan Eden http://jsfiddle.net/FwF32/19/ */
.a5container {
    border-radius: 4px;
    display: inline-block;
    position: relative;
    -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 70%, rgba(0,0,0,0.3) 90%);
}
.a5container .ava5 {
   display: block;
    box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
    border-radius: 4px;
}

.a5container:after {
  content: '';
  z-index: 999;
  display: block;
  position: absolute;
  background: -webkit-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
  background:    -moz-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
  background:     -ms-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
  background:      -o-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
  background:         linear-gradient(rgba(255,255,255,0.4),transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1px rgba(0,0,0,0.2);
  border-radius: 4px;
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 1px;
}

You should notice this is not the only unique effect added into this avatar style. Dan’s fiddle example also demonstrates how we can use a background gradient at a lesser opacity to simulate the glossy plastic-looking shine effect. This may be accomplished using a combination of inset box shadows and CSS gradients as img backgrounds with a reduced opacity. Check out my live demo sample to catch a glimpse of this effect in action.

Download Source Code

Final Thoughts

The process of creating these avatars has been chopped down and whittled to a very small amount of HTML and CSS. You should be able to quickly port any of these five styles over into your own layout. And similarly most of the codes do not require an outer container element since they directly target the img tag. But feel free to download a copy of my source codes and see what you can make! Additionally if you have any questions or comments about the tutorial you can share with us in the post discussion area below.