Images with Round Corners
The effect of giving an images round corners is becoming increasingly popular lately, as the human eye really likes soft curves. The recent redesign of Facebook utilizes images with round corners very well, despite the backlash to the constant UI changes at the popular social network.
To give List Central a better aesthetic, I decided to also utilize round corners on the avatars to be displayed all over the site. Ia quite like the effect of mixing roundness with straight lines in a design. The effort put into implementing the small images with round corners was well worth it, and now, I can share my knowledge of how to do it with you:
Creating an image with round rectangles in your favourite image editor is fairly easy by using a round rectangle as a mask, but that solution lacks flexibility, and doesn’t suit List Central’s purposes at all! I can’t be sitting around setting up each and every List Central avatar with pretty round corners in Photoshop! In order to achieve the aesthetic effect, a combination of html an css has to be used.
| . .  |
. .  .. . |
| . . . |
. . . |
.
.
.
.RoundAvatarWrapper{
/* Avatar positioning CSS goes here */
}
.AvatarImage {
position:absolute;
width:100px;
height:100px;
z-index:0;
}
.RoundCorners{
position:absolute;
width:100px;
height:100px;
z-index:1;
}
</style>
<div class=’RoundAvatarWrapper’>
<img class=’AvatarImage’ src=’/images/avatar.jpg’
width=’100′ height=’100′ />
<img src=’/images/round_corners.png’
class=’RoundCorners’/>
</div>
As you can see above, the avatar image that is used is completely intact. The round corner effect is achieved by layering another image on top of the avatar that has a transparent middle, and round corners of the same colour as the background. I opted for an round outline in my overlay image, which is completely optional.
The CSS classes “RoundCorners” and “RoundAvatarWrapper” is where the magic happens. Most importantly, the sizing and absolute positioning of the wrapping divs force the round corners image and the avatar image to appear in the same space. Then, specifying the z-index for each allows you to force the round corners image, with the transparent middle, to appear above the avatar image, give the appearance of an image with round corners.
Discussion