In this post, we will show you how to make circles using pure CSS. We will then use JavaScript to make a pretty bubbly background.
Making a circle in CSS is straight-forward. All you have to do is a square div (width=height) and add a border radius that is half the width.
Making a circle in CSS is straight-forward. All you have to do is a square div (width=height) and add a border radius that is half the width.
<style type="text/css"> div.circle1 { width:100px; height:100px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; background-color:#FF0000; float:left; margin-left:10px; margin-right:10px; } div.circle2 { width:100px; height:100px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; background-color:rgba(50,255,130,0.2); float:left; margin-left:10px; margin-right:10px; } div.circle3 { width:100px; height:100px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; border:1px dotted blue; float:left; margin-left:10px; margin-right:10px; } </style>
The above code will give:
Now that we know how to make circles using CSS, we can make a little JavaScript to fill a div with random circles ...
or with regular patterns ...