Categories

How to Create CSS Circles

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

How to create really nice circles with css

Few days ago we wanted to create some nice circles for the the button on one of our projects, and we were using this really neat way of doing it.

Check out how you can create easy circles with pure css very easily:

Setting the border-radius of each side of an element to 50 % will create the circle display at and size:

.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}

It's really that simple... but i can't let this post go without touching on CSS gradients and basic animations:

/* Create the animation blocks */
@keyframes spin {
from { transform: rotate(0deg); }
to { 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%);
animation-name: spin;
animation-duration: 3s; /* 3 seconds */
animation-iteration-count: infinite;
animation-timing-function: linear;
}

Voila. There's an awesome CSS circle!

CSS circles don't immediately appear as useful as CSS triangles, but they surely have value within design.
An animated set of circles could act as a loading animation; creative use of the circle is up to you.
Can you think of a good CSS circle usage? Share!