Since the beginning of dawn websites, developers have used images when they wanted to show circles on their pages. But today, I bring you a technique so awesome, it’ll blow your socks off, well stop you using images at least.
The only problem is that this requires your visitor to be using a CSS3 compatible web browser, something a lot of people don’t have. At any rate, this technique is something you can definitely use when CSS3 is a common standard, or even just to mess around with.
The first thing we need to do is create a box, 100px by 100px or of course whatever size circle you want. If you’re thinking “SQUARES ARE NOT CIRCLES IDIOT!”, you’re right, good for you. However we haven’t finished, idiot.
Random insight into CSS3
CSS3 standards are currently being discussed (perhaps not right now, but they are or have been) and as such, this means that they are not current standards. This means that, browsers don’t have to support them, but many people will criticize it, but they need to get out more.
Anyway, one of the new attributes they’re discussing is border-* or more specifically border-radius – obviously being able to control, top left, bottom right et cetera. The part we’re interested in is the border-radius, however as it’s not implemented (except IE9 Developer Preview), we need to use the browser specific functions, -moz-border-radius and -webkit-border-radius these are the only two I ever use – mainly because I dislike touching Opera.
Back to making circles out of squares
This is when we start to add some clever web developer skills to our square. Our square is 100px wide and 100px tall. Here is when some people tend to get confused; if we were to add a border radius – which keep in mind affects every side – of 100px, then the browser works its magic and we end up with a circle. How? Well, that is something I don’t quite understand myself. If you try a 50px border radius, we end up with a curved square – so if someone can work out how it’s working, explain!
Final code
If you haven’t worked out the code yet, go home. I kid. Here is the example code! No demo since it’s straightforward!
.circle {
width: 100px;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
Set the background, image, whatever. It’s a pretty cool effect, but when it comes to older unsupported browsers when it comes to IE, they’ll only see a square, so if you label it a circle, careful your visitors will think you’re special.
Recent Comments