Create multiple elements with CSS generated content? - css

Question

I have a div (blue in the image below). I need to create a number of equally spaced circles within it. Can this be done with CSS generated content? I could create 2 with the :before and :after pseudo classes, but as I need more would a CSS solution requite more html elements?
I was hoping to not have to use an image to improve loading times and to optimize the site for different display density devices.
UPDATE This is for a responsive design so the width of the blue div will vary. They also need to remain equally spaced.

Answer 1

Well, we could create only two pseudo-elements for each element.
However, we could fake the effect by multiple box-shadow values, as follows:
.box:after {
content: '';
display: block;
margin: 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
box-shadow: 25px 0 0 0 orange, /* Or use positive offsets if needed */
-25px 0 0 0 orange,
50px 0 0 0 orange,
-50px 0 0 0 orange;
}
WORKING DEMO.
Update
Unfortunately, it's not possible to set a box-shadow offset relative to the width of the containing block. (The best try would be using relative em/rem units, but the font-size itself can not be changed per the width of the container)
Therefore, using radial-gradient background is the best option you'd have (as #Michal has suggested).
In order to keep the aspect ratio of the blue box, you could set the height to 0 and use a percentage value for padding-top which relies on the width of the containing box.
.box {
background: orange radial-gradient(closest-side, transparent 40%, skyblue 0%);
background-size: 20% 100%;
width: 100%;
height: 0; /* Make sure that the box has no height */
padding-top: 20%; /* Keep 5:1 aspect ratio */
}
Here is the WORKING DEMO.

Answer 2

You could simply use radial-gradient.
.circles {
/* red: color of the circles */
background-color: red;
/* 40%: size of circles proportionally to size of an element they reside in */
/* blue: color of the background */
background-image: radial-gradient(closest-side, transparent 40%, blue 0%);
/* 20%: width of circle, so 5 in row */
/* 100%: height of circle, so 1 in column */
background-size: 20% 100%;
/* 20%: keep the aspect ration 5:1 for dynamic layout */
padding-bottom: 20%; /* or padding-top */
/* 100%: fill up given space */
width: 100%;
/* 0: so the possible content doesn't distort the aspect ratio */
height: 0;
}
Demo on http://jsfiddle.net/Gobie/t6X3Z/3/

Answer 3

If you place several nested divs inside your container div you can use border-radius to create the circles. Something like this should do the trick:
HTML
<div id="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
CSS
#container {
width: 300px;
height: 100px;
background-color: blue;
}
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
margin: 10px;
display: inline-block;
}
Here is a fiddle of it in action: http://jsfiddle.net/GXL3w/