Tomomi Imura

Tomomi Imura

An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer.

Twitter LinkedIn Instagram Github Flickr

Creative Commons License
My articles are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Quick Demo: CSS3 Fancy Avatar

css3-avatar

Now I started using jsfiddle for code snippets so I can show the code AND the actual results on browsers.

.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;
}

This fancy avatar frame is created pretty easily by using CSS box-shadow inset values.
Basically, what I did is that giving a div container (with an avatar picture as a background image) an inset shadow to bottom/right, and glare to top/left. Oh and added border-radius for the rounded corners.

This works without the vendor-specific extensions on latest Firefox, Chrome, Webkit Nightly, and Opera. Safari 5 still requires -webkit extension to make the box-shadow work.

Really easy and practical!

comments powered by