In modern Mobile apps, RIA or fancy websites like to display thumb images with a little rounded corners. We can do it on web with very little effort using a little CSS3 technique.
Just 3 simple 3 steps:
- Instead of using img, use a placeholder like a or span. Make it display:block.
- Place the image as background image of this placeholder.
- Set a border radius and a little shadow for the placeholder.
Sample CSS and HTML code:
<style type="text/css"> | |
a.user-image { | |
background: transparent no-repeat top left; | |
display: block; | |
text-indent: -999em; | |
width: 50px; | |
height: 50px; | |
border-radius: 5px; | |
box-shadow: 0px 0px 3px #666; | |
} | |
</style> | |
<a class="user-image" href="http://www.facebook.com/ajaxray" style="background-image: url(http://graph.facebook.com/667896332/picture)" title="Visit Anis's profile">Anis Ahmad</a> | |
<!-- | |
Post: http://ajaxray.com/blog/rounded-thumb-image-with-css-3 | |
Demo: http://ajaxray.com/Examples/cropped-thumb.html | |
--> |
See code on Gist.
You’re done! Check the live demo.