It’s easy to create round pictures from square ones using just CSS. It does mean using some proprietary css, but it’s relatively well supported – FireFox, Chrome, Safari, Opera, and IE9 are all OK with it.
Adding an inner-shadow to make it look like the image is embedded into the page is just as easy, but not quite as well supported with just css (Chrome has problems).
Finally adding a shine effect means creating a special image first, and it’s only supported in WebKit based browsers (Chrome and Safari).
The code below lets you achieve the effect, and it degrades gracefully for browsers that don’t support parts of the effect.
Getting started
First we create a single 60px by 60px div with an image added into the background via css. This is the basic starting block.
Html:
<div class="image"></div>
Css:
.image{
background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}
Rounding the corners
Then we round the corners enough to make our div into circle. Note: The radius is half the full width of the circle, so to get a 60px circle we have to set the radius to 30px.
Css:
.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}
Internet Explorer
Versions of Internet Explorer prior to version 9 ignore this css completely so we gracefully degrade back to the plain square image.
Adding a shadow
To make the image appear to be embedded into the page we can add an inset drop-shadow.
Css:
.image{
-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}
Problems
A problem with this layout occurs from an unexpected source; Chrome (as of version 8.0.552.224) doesn’t clip the inset shadow properly when used with rounded corners so you get an odd square with our circular image in the middle.
Normally we could just switch the shadow off the for the offending browser and degrade back to something usable. The problem with this is that Safari and Chrome both use the WebKit rendering engine, so both of them would lose the shadow. This doesn’t seem like the right thing to do when Safari supports this fine.
The fix, a new problem and a workaround
It is possible to get Chrome to play ball by doing the clipping ourselves with an image mask.
Initially I tried to do this with an SVG file so that I could apply it to any size circle without having to recreate the image each time. Unfortunately it appears that Chrome also doesn’t support SVG files being used as masks. The work around is to use a png file with a single white 60px circle.
Css:
.image{
-webkit-mask-box-image:url(../images/circle60px.png);
-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}
Mask:
Added bonus for WebKit based browsers – Glass effect
Because we’re already using a mask anyway it’s quite simple to add a shine/glow effect to the image using the mask file. This is completely ignored by FireFox, Opera etc.
New mask:
If you’ve got any comments, fixes, or suggestions on how to do this better please let me know below.
Update
I’ve created a new post showing how to add a porthole style borders onto the image.
References:
Css3 shadows and rounded corners:
http://css3please.com/
Masking:
http://webkit.org/blog/181/css-masks/