CSS Tip: How to Make Circles Without Images
Sunday, May 3rd, 2009
About a month ago, Jeffery Way posted an article about creating shapes with pure CSS, no images added. I've been using the CSS3 property of border radius a lot in a design I've been working on and thought, "why can't I use this to make circles?" Today, I'll show you how to make your very own CSS circles. In addition, we will use our new knowledge to create a simple jQuery plugin!
View Demo
Structure, structure, structure!
How are we suppose to make a circle without any HTML to style? Because this is just a simple shape, I'll be using an "empty" span tab — I've just put into it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Circle</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 1in;
}
.circle {
/* Everything else goes here. */
}
</style>
</head>
<body>
<span class="circle">&amp;nbsp;</span>
</body>
</html>
I'll be using inline CSS because this is just a demo, but if this were for a project you'd probably want to put it in an external style sheet. I've also reset the margins and padding, then gave the body a one inch margin to push our circle away from the sides of the page.
Basic Styles
For now, I'll give the circle a background of #333 just so we can see it. You'll also want to give it the same height and width, this is the length of the diameter. The size doesn't really matter just make sure it's en even number.
.circle {
display: block;
width: 80px;
height: 80px;
background: #333;
}
Note: If you're using an inline element (like a span tag), you'll want to give the element a display of "block". If you don't know if your element is a block level element or not, just load the file in a web browser and if it's height and width look larger than 1px it is.
Circles Are Really Made With CSS3
What really gives this circle its arcs is CSS3's -moz-border-radius and -webkit-border-radius properties. What we're going to have to do is give the border radius a value of half the height/width; this is the radius of the circle. For my example, I've used 80px for the height and width so I'll set the border radius to 40px.
.circle {
display: block;
display: block;
width: 80px;
height: 80px;
background: #333;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}
Conclusion
CSS3 is a very powerful tool to know how to use. Just make sure you don't base your entire website around it because not every browser supports it yet. However, if you can get the effect in certain browsers and still have you're design looking okay in other browsers, I think it's fine to use browser specific styles.
Create a jQuery Plugin For Our Circles
You can also take this a step further by making it into a jQuery plugin.
(function($){
$.fn.jCircle = function(options) {
var defaults = {
size: 40
},
settings = $.extend({}, defaults, options);
settings.size = parseInt(settings.size) || 40;
settings.radius = (settings.size/2) + 'px';
return this.each(function(){
var $this = $(this);
$this.css({
display: 'block',
width: settings.size + 'px',
height: settings.size + 'px'
});
$this.css('-moz-border-radius', settings.radius);
$this.css('-webkit-border-radius', settings.radius);
});
}
})(jQuery);
View Demo
If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!
Article Sponsored by:
PHP for Absolute Beginners is written for the complete novice; no previous coding knowledge is assumed, and all concepts are explained to ensure maximum understanding.
ABOUT THIS AUTHOR
18 Comments
subscribe comments feedTrackbacks/Pingbacks
Leave a Reply
Popular Series
Related Posts
Thanks a lot for this
will try this later on.
Just one question, it is not supported for every browser but the other browsers are writing an upgrade to support it, right?
If not what could be an alternative to make it look the same in every browser?
what abt IE7…
@Gaurish i am agree with you, what about IE8?
Thanks for the comments everyone!
About IE (all versions): Like I said in the last paragraph, this effect doesn’t apply to every browser, namely IE. This is why I suggested you not base your entire website around this.
@krite You could need to use images and extra markup; this would make the flexibility shrink, a lot.
Interesting article! Although I somehow pity IE6,IE7.. why am I numbering them anyway … probably all IE series
Quite experimental, bring more goodies of this kind!
Always a pity with IE
I agree though, it’s just fun to experiment and have some fun with the technologies we have available to us.
Doesn’t work under Opera either
Vedlen,
I forgot it’s hard for people to just have fun with CSS sometimes.
This would be funny to create games with haha. I can already see balls flying around websites
Too bad it’s not cross browser. But we need to experiment! Or else stuff would be boring
I say it’s now your job Gaya to use the gravity script you wrote recently with these CSS balls (I mean circles) and make a game where we can throw them at little miniature people
Why does everyone care about IE so much. I think we need to keep making sites the continue to degrade more and more and less gracefully. Browsers like the IE “shit suite” are hindering what we can do with web and creating a gap in good and bad developers. Continue to push your users to use a better browser i.e. (Safari and I guess bloated old FF). If you think coding to make IE perfect will save your day job, then you should probably look into a new one.
Downgrade for IE, use CSS3 and let IE6 burn!
Mwuhahah!
Let me reiterate:
Let all version of IE burn… haha!
CSS3 is supported by IE7 or IE8?
How about you just use:
<span class="dot">.</span>.dot { color: #333; font-size: 30em; }
Love the simplicity of your solution, and that should work fine, but I think the point of this post was to have some fun with CSS3 properties
Just tried this solution.. seems like a neat idea, but it doesn’t work, because a dot is actually a tiny little square. There would be also some problems, because it wouldn’t be antialiased..