Click on the image to view the demo.

This is David Walsh‘s clever technique in creating one of the commonly used shapes in design – the circle — using only CSS and without any help of Photoshop.

CSS

This sets the border-radius that creates any size of circle display.

.circle {

border-radius: 50%;

width: 200px;

height: 200px;

/* width and height can be anything, as long as they're equal */

}

Spin animation and CSS gradients

/* Create the animation blocks */

@-webkit-keyframes spin {

from { -webkit-transform: rotate(0deg); }

to { -webkit-transform: rotate(360deg); }

}

@-moz-keyframes spin {

from { -moz-transform: rotate(0deg); }

to { -moz-transform: rotate(360deg); }

}

@-ms-keyframes spin {

from { -ms-transform: rotate(0deg); }

to { -ms-transform: rotate(360deg); }

}

/* Spinning, gradient circle; CSS only! */

#advanced {

width: 200px;

height: 200px;

background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);

background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);

background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);

/* webkit chrome, safari, mobile */

-webkit-animation-name: spin;

-webkit-animation-duration: 3s; /* 3 seconds */

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

/* mozilla ff */

-moz-animation-name: spin;

-moz-animation-duration: 3s; /* 3 seconds */

-moz-animation-iteration-count: infinite;

-moz-animation-timing-function: linear;

/* microsoft ie */

-ms-animation-name: spin;

-ms-animation-duration: 3s; /* 3 seconds */

-ms-animation-iteration-count: infinite;

-ms-animation-timing-function: linear;

}

Incoming search terms for the article:

• css circle animation
• creating circles css
• css circle
• circles photoshop
• circular border photoshop
• CIRCLE SHAPE PHOTOSHOP
• circles css
• creating circles for the web
• jquery css circle
• css circles