Why Limit Media

CSS Art: The Flower

Today’s arti­cle is prob­a­bly not the most prac­ti­cal tuto­r­ial I’ve ever writ­ten, but it was def­i­nitely one of the most fun to cre­ate. It also shows that, while CSS is often treated as a straight­for­ward web devel­op­ment work­horse (and it’s a great work­horse, at that), it can also have a light­hearted, eccen­tric side as well. Today’s tuto­r­ial is about how to use CSS to cre­ate art.

Now, as I’ve men­tioned numer­ous times, I am not an artist. If true CSS artists were likened to Sal­vador Dali or some­one sim­i­lar, I’d be more akin to the guy watch­ing Bob Ross on pub­lic tele­vi­sion and fol­low­ing along at home, cre­at­ing wob­bly lit­tle smudges and pre­tend­ing they’re happy lit­tle trees. But! What my exam­ple above (and you can skip ahead and see the final ver­sion) shows is that it doesn’t take very many CSS rules to cre­ate some pretty cool CSS art.

And the best part about tack­ling CSS art is you’re likely to learn a lot about CSS along the way. Sure, this art form is prob­a­bly only a step or two above the ASCII art gen­er­ated in the nineties – but play­ing around with ASCII art taught me a decent bit about let­ter forms, line lengths and the rest. Like­wise, prac­tic­ing CSS art will teach you an awful lot about siz­ing, posi­tion­ing and the use of color to cre­ate an effect.

To warn: my exam­ple flower makes exten­sive use of the border-​​radius prop­erty (which I’ve cov­ered more in-​​depth here), which doesn’t work in Inter­net Explorer. The net result is that the IE ver­sion of my flower looks a bit Atari-​​esque… but the rest of the code still works fine.

So let’s get to the code!

The XHTML

I’ve attempted to keep my code as sim­ple as pos­si­ble, while still keep­ing each of my flower’s seg­ments sep­a­rated for easy adjust­ment. Here’s what my code looks like:

<div id="background">
	<div id="flower">
		<div id="topleft" class="petal"></div>
		<div id="topright" class="petal"></div>
		<div id="center"></div>
		<div id="bottomleft" class="petal"></div>
		<div id="bottomright" class="petal"></div>
		<div id="leftleaf" class="leaf"></div>
		<div id="stem"></div>
		<div id="rightleaf" class="leaf"></div>
	</div>
</div>

The “back­ground” div cre­ates the blue sky and green grass, while the “flower” div con­tains the rest of my work. Each petal and leaf gets its own ID, while each group shares a class to reduce the num­ber of rules I have to write. The stem and cen­ter cir­cle are unique, and thus don’t have a class assigned.

I’ve writ­ten my code in the same order that it is to appear on the screen (assum­ing I move top to bot­tom, left to right). How­ever, if you were will­ing to make more exten­sive use of posi­tion­ing than I have, you could con­ceiv­ably place the indi­vid­ual divs in any order you so chose.

The CSS

And now for the fun part! I’ll break my CSS into sev­eral parts so you can see how it all comes together. First, we’ll set up the back­ground and the main flower div:

#background {
	position: relative;
	background-color: #9cf;
	width: 600px;
	height: 476px;
	border-bottom: 10px solid #090;
	margin: 0 auto; }
#flower {
	position: absolute;
	top: 20px;
	left: 172px;
	width: 256px; }

The back­ground has been rel­a­tively posi­tioned so that I can absolutely posi­tion my flower inside it, using the relative-​​absolute posi­tion­ing trick. I’ve also given it a width and height, to pro­vide my image’s frame. Then I’ve used a back­ground color to sim­u­late the blue sky and a bor­der to pro­vide the ground. My flower is absolutely posi­tioned (which also means it becomes the con­tain­ing div for any posi­tioned divs nested inside), and is placed on top of the background.

Then we have the flower petals:

.petal {
	background-color: #f33;
	float: left;
	margin: 1px 1px 0 0;
	width: 125px;
	height: 125px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px; }
#topleft {
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0;
	border-bottom: 2px solid #c33;
	border-right: 2px solid #c33; }
#topright {
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0;
	border-bottom: 2px solid #c33;
	border-left: 2px solid #c33;  }
#bottomleft {
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	border-top: 2px solid #c33;
	border-right: 2px solid #c33; }
#bottomright {
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	border-top: 2px solid #c33;
	border-left: 2px solid #c33; }

This is the largest chunk of CSS (because each petal is slightly dif­fer­ent), but it’s fairly repet­i­tive in nature (because each petal is fun­da­men­tally the same). The “petal” class sets our basic rules: our petals are dark red, floated left, have a tiny bit of space on their top and left sides, are 125 pix­els wide and tall, and have rounded corners.

The fol­low­ing four sets of rules sim­ply spe­cial­ize each of the petals to make them unique. I’m doing two things. First, I’m remov­ing the curved bor­der on the inner­most cor­ner; tech­ni­cally the cen­ter cir­cle cov­ers almost the entire inner cor­ner, but it looks cleaner with­out the curve, and it also allows me to resize the cen­ter area with­out wor­ry­ing about whether the curved bor­der will show through. Then I’m adding a 2-​​pixel wide darker red bor­der to the inner two sides of the flower petals, which adds a sense of depth and a bit of visual interest.

Next we have the cen­ter cir­cle and the stem:

#center {
		position: absolute;
		left: 112px;
		top: 112px;
		background-color: #ff3;
		width: 30px;
		height: 30px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px; }
	#stem {
		float: left;
		width: 12px;
		height: 200px;
		margin: 0 1px;
		background-color: #093; }

Although the cen­ter area looks like a cir­cle, like all XHTML ele­ments, it is tech­ni­cally a rec­tan­gle. This par­tic­u­lar rec­tan­gle is a square, 30 pix­els wide and tall. And then all I’ve done is given each side a 15 pixel bor­der radius, result­ing in a per­fect cir­cle. Once the cir­cle was made, I used absolute posi­tion­ing to cen­ter the cir­cle over the inter­sec­tion of the four flower petals.

The stem was the most straight­for­ward of my ele­ments. It’s a true unrounded rec­tan­gle, given a green back­ground color, a width, height, and mar­gin, then floated left so I could place my leaves directly against it with­out hav­ing to resort to absolute positioning.

And speak­ing of the leaves, here’s how they were created:

.leaf {
	float: left;
	margin-top: 80px;
	background-color: #093;
	width: 60px;
	height: 30px; }
#leftleaf {
	clear: left;
	margin-left: 10px;
	-moz-border-radius-bottomleft: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius-topright: 30px;
	-webkit-border-top-right-radius: 30px; }
#rightleaf {
	-moz-border-radius-bottomright: 30px;
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-topleft: 30px;
	-webkit-border-top-left-radius: 30px; }

I was par­tic­u­larly proud of how the leaves turned out, even though they’re fairly sim­ple in design. The leaf class sets some defaults: they’re floated left, given a top mar­gin to push them down the stem, the back­ground color matches the stem color, and the width and height give them a long, slen­der (if blocky) appearance.

The indi­vid­ual leaf IDs are what make them look so nice. Each leaf has two rounded cor­ners on oppo­site sides. The rounded cor­ners con­tinue for exactly half the width of the box. The result is a very visu­ally appeal­ing curve. The left leaf also received two addi­tional treat­ments: it gets a clear to ensure it doesn’t show up to the right of the petals, and has a left mar­gin to push the stem exactly where I wanted it.

And that’s all there is to this flower! Even though it may seem com­plex, I’ve really only used a dozen or so CSS prop­er­ties in a vari­ety of dif­fer­ent ways. As I said, this is a great exer­cise to tackle in order to gain a greater under­stand­ing of how posi­tion­ing ele­ments works (and it’s a lot of fun for the border-​​radius prop­erty as well).

Addi­tional Challenges

So that’s what I was able to accom­plish in less than 100 lines of code. So what can you do? I encour­age you to show me up and share links to your mas­ter­pieces in the com­ments below. Here are some sug­ges­tions for challenges:

• Recre­ate my flower using pro­por­tional units instead of pix­els. That would allow you to resize the flower and still keep it look­ing pretty!
• With a bit of absolute posi­tion­ing and more rounded cor­ners, try adding clouds to the oth­er­wise bland background.
• My flower’s leaves remind me of cat eyes. Try cre­at­ing a cat or sim­i­lar beast using pure CSS.

And no mat­ter what: have fun!