How to create CSS
Circles
Here’s a clever technique in creating one of the commonly
used shapes in design – the circle. Using only CSS and without any help of
Photoshop, you can also make a nice circle for your design elements. Let us
take a look at this cool demo (
http://davidwalsh.name/dw-content/css-circles.php)
which is the masterpiece of David Walsh.
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;
}
