A Fancy Avatar with CSS3 Box-shadow

A practical example of creating fancy avatars with CSS3 box-shadow, using the inset values. should work on Firefox 4, Webkit, and Opera 10.x without the vendor specific extensions.

by J. Albert Bowden

HTML

<div class="avatar" style="background-image:url()"></div>

<div class="avatar" style="background-image:url(http://a1.twimg.com/profile_images/1217736467/me1_reasonably_small.jpg)"></div>
    
<div class="avatar" style="background-image:url(http://a1.twimg.com/profile_images/77537329/IMG_3738_reasonably_small.JPG)"></div>


<h1>Creating a fancy avatar with CSS3 Box-shadow</h1>
<h2>by @girlie_mac</h2>

CSS

.avatar {
    width: 80px; height: 80px; margin: .5em; display: inline-block;
    
    background-repeat: none; 
    background-size: 100% 100%;
    
    border-radius: 8px;
    
    /* ext needed for Safari5 */
    -webkit-box-shadow: inset -1px -1px 8px #000, inset 2px 3px 1px #fff; 
    /* for recent Webkit, Chrome, FF and Opera */
    box-shadow: inset -1px -1px 8px #000, inset 2px 3px 1px #fff;
}