Mac OS X Lion avatar in CSS

dabblet.css

/* Mac OS X Lion avatar in CSS */
body {
    background: #67676a;
    padding: 100px;
}

.avatar {
    display: block;
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 100%;
    padding: 4px;
    background: -webkit-linear-gradient(#fdfdfd, #c9c9c9);
    box-shadow: 0 1px 4px 2px rgba(0,0,0,.3);
    margin: 0 auto;
}

.avatar img {
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 100%;
}

.avatar:before, .avatar:after {
    width: 128px;
    height: 128px;
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 5;
    pointer-events: none;
    border-radius: 100%;
}

.avatar:before {
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.4);
}

.avatar:after {
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,.0), rgba(255,255,255,.2)50%, rgba(255,255,255,.0) 50%);
    -webkit-mask-image: -webkit-linear-gradient(#000, rgba(0,0,0,0) 70%);
}

dabblet.html

<a href="http://daneden.me" class="avatar">
    <img src="https://en.gravatar.com/userimage/21692524/f177f8546c2d6b5fa525f83821244ca4.jpg?size=200">
</a>

settings.json

{"view":"split","prefixfree":"1","page":"html"}