American Flag CSS

Posted on Nov 11, 2014


During a short, one-hour Hackathon, our Hackathon ringleader was riffing on how much of a pain CSS can be. He said something about some interview questions at Apple, where they ask you to do crazy stuff, like make an American flag out with CSS. And if you can do that you are, and I quote, a “#B4D455”.

So, feeling rather confident in my CSS chops, I thought I would give it a shot to see how fast I could crank it out. And as it turns out, Tuesday is Veterans Day, so this is rather apropos.

No prob. I’ll bang this one out in a jiffy. Thirteen rows, some advances CSS selectors to color the stripes, absolute position the star-laden field, and finally drop in some CSS stars. All good.

The first three of those were cake:

Stars

Then came along the CSS stars. Those turned out to be a bit of a challenge. CSS shapes in general are a big unintuitive, but a five pointed star was a tricky one for me. Eventually I broke down and used this wonderful piece of CSS wizardry: http://enjoycss.com/start

After some tweaking with the size, I ended up with some
-browser-prefix-madness: 1000%;

Version 1

I generated my stars, but they still needed some tweaking for size, etc. By the time I had finished my first Git commit, here is what I had:
initial

Version 2

Not bad, but I’m going only from memory, so I referenced the American flag attributes on Wikipedia. The first thing I noticed is that the colors are off. The flag looks better immediately when replacing the stock red with #B22234 and the stock blue with #3C3B6E.

color

Now it’s time to fix the dimensions of the starry blue field. Wikipedia shows the dimensions thusly:

300px-Flag_of_the_United_States_specification.svg

Great. Now that jacked up the alignment of my stars. Thanks a lot, Wikipedia. Fortunately, rather than resizing the border-widths and margins of all those stars, we have transform: scaleX(n) scaleY(n) to do most of the heavy lifting. But I do have to mess with the margins around the stars as well.

Final Version

I consider this “Mission: Accomplished”, as I’m not really done. I figure the next iteration will be to make it responsive.
final

Final CSS:

HTML

And here’s the HTML, in case you were thinking I made some n00b mistake in my CSS with the star elements:

Submit a Comment

Your email address will not be published. Required fields are marked *