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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.
nice idea!!!