Circular Images with CSS3

I found out the other day how to use CSS3 to create a cycle of images, that this is totally awesome. The only drawback is that the image has shown as a background image. You really can not do directly effects the use of image tags, the displayed image. That means that no one can really click and drag the image onto your desktop, but it may be perfectly okay with you.

First, HTML:

HTML

<div class=“circular”></div>

Not much to it. Next comes the CSS:

.circular { width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://link-to-your/image.jpg) no-repeat; }

 

A full circle, you need to boundary radius half the width / height. Put it all together, your image now looks like this in Firefox, Safari and Chrome: …

circle-image

You can even add a border or a shadow.

circle-imag4e

I added a black shadow with an opacity of 80% to achieve the effect above. The CSS looks something like this:

.circular {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

There is a practical solution, who wants to let the people in the image and drag it to the desktop, but it requires more HTML and CSS.

<div class=”circular”><img src=”http://link-to-your/image.jpg” alt=”” /></div>

.circular {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}

.circular img {
opacity: 0;
filter: alpha(opacity=0);
}

Using the above QSS, you can now allow users to drag an image to their desktop. Try the following.

circle-image

You do not really see an image is dragged across browsers, but once you put it where it will appear on your desktop.

You can also reduce the radius of curvature of 150 pixels to anything you want to add rounded corners with CSS or more.