Today’s article is probably not the most practical tutorial I’ve ever written, but it was definitely one of the most fun to create. It also shows that, while CSS is often treated as a straightforward web development workhorse (and it’s a great workhorse, at that), it can also have a lighthearted, eccentric side as well. Today’s tutorial is about how to use CSS to create art.
Now, as I’ve mentioned numerous times, I am not an artist. If true CSS artists were likened to Salvador Dali or someone similar, I’d be more akin to the guy watching Bob Ross on public television and following along at home, creating wobbly little smudges and pretending they’re happy little trees. But! What my example above (and you can skip ahead and see the final version) shows is that it doesn’t take very many CSS rules to create some pretty cool CSS art.
And the best part about tackling CSS art is you’re likely to learn a lot about CSS along the way. Sure, this art form is probably only a step or two above the ASCII art generated in the nineties – but playing around with ASCII art taught me a decent bit about letter forms, line lengths and the rest. Likewise, practicing CSS art will teach you an awful lot about sizing, positioning and the use of color to create an effect.
To warn: my example flower makes extensive use of the border-radius property (which I’ve covered more in-depth here), which doesn’t work in Internet Explorer. The net result is that the IE version 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 simple as possible, while still keeping each of my flower’s segments separated for easy adjustment. 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 “background” div creates the blue sky and green grass, while the “flower” div contains the rest of my work. Each petal and leaf gets its own ID, while each group shares a class to reduce the number of rules I have to write. The stem and center circle are unique, and thus don’t have a class assigned.
I’ve written my code in the same order that it is to appear on the screen (assuming I move top to bottom, left to right). However, if you were willing to make more extensive use of positioning than I have, you could conceivably place the individual divs in any order you so chose.
The CSS
And now for the fun part! I’ll break my CSS into several parts so you can see how it all comes together. First, we’ll set up the background 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 background has been relatively positioned so that I can absolutely position my flower inside it, using the relative-absolute positioning trick. I’ve also given it a width and height, to provide my image’s frame. Then I’ve used a background color to simulate the blue sky and a border to provide the ground. My flower is absolutely positioned (which also means it becomes the containing div for any positioned 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 different), but it’s fairly repetitive in nature (because each petal is fundamentally 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 pixels wide and tall, and have rounded corners.
The following four sets of rules simply specialize each of the petals to make them unique. I’m doing two things. First, I’m removing the curved border on the innermost corner; technically the center circle covers almost the entire inner corner, but it looks cleaner without the curve, and it also allows me to resize the center area without worrying about whether the curved border will show through. Then I’m adding a 2-pixel wide darker red border 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 center circle 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 center area looks like a circle, like all XHTML elements, it is technically a rectangle. This particular rectangle is a square, 30 pixels wide and tall. And then all I’ve done is given each side a 15 pixel border radius, resulting in a perfect circle. Once the circle was made, I used absolute positioning to center the circle over the intersection of the four flower petals.
The stem was the most straightforward of my elements. It’s a true unrounded rectangle, given a green background color, a width, height, and margin, then floated left so I could place my leaves directly against it without having to resort to absolute positioning.
And speaking 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 particularly proud of how the leaves turned out, even though they’re fairly simple in design. The leaf class sets some defaults: they’re floated left, given a top margin to push them down the stem, the background color matches the stem color, and the width and height give them a long, slender (if blocky) appearance.
The individual leaf IDs are what make them look so nice. Each leaf has two rounded corners on opposite sides. The rounded corners continue for exactly half the width of the box. The result is a very visually appealing curve. The left leaf also received two additional treatments: it gets a clear to ensure it doesn’t show up to the right of the petals, and has a left margin to push the stem exactly where I wanted it.
And that’s all there is to this flower! Even though it may seem complex, I’ve really only used a dozen or so CSS properties in a variety of different ways. As I said, this is a great exercise to tackle in order to gain a greater understanding of how positioning elements works (and it’s a lot of fun for the border-radius property as well).
Additional Challenges
So that’s what I was able to accomplish in less than 100 lines of code. So what can you do? I encourage you to show me up and share links to your masterpieces in the comments below. Here are some suggestions for challenges:
- Recreate my flower using proportional units instead of pixels. That would allow you to resize the flower and still keep it looking pretty!
- With a bit of absolute positioning and more rounded corners, try adding clouds to the otherwise bland background.
- My flower’s leaves remind me of cat eyes. Try creating a cat or similar beast using pure CSS.
And no matter what: have fun!