{"id":380,"date":"2009-02-23T21:33:22","date_gmt":"2009-02-24T02:33:22","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=380"},"modified":"2009-02-23T21:33:22","modified_gmt":"2009-02-24T02:33:22","slug":"css-art-the-flower","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-art-the-flower\/","title":{"rendered":"CSS Art: The Flower"},"content":{"rendered":"

\"css<\/a><\/p>\n

Today\u2019s article is probably not the most practical tutorial I\u2019ve 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\u2019s a great workhorse, at that), it can also have a lighthearted, eccentric side as well. Today\u2019s tutorial is about how to use CSS to create art.<\/p>\n

Now, as I\u2019ve mentioned numerous times, I am not an artist. If true CSS artists were likened to Salvador Dali or someone similar, I\u2019d be more akin to the guy watching Bob Ross on public television and following along at home, creating wobbly little smudges and pretending they\u2019re happy little trees. But! What my example above (and you can skip ahead and see the final version<\/a>) shows is that it doesn\u2019t take very many CSS rules to create some pretty cool CSS art.<\/p>\n

And the best part about tackling CSS art is you\u2019re 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 \u2013 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.<\/p>\n

To warn:<\/strong> my example flower makes extensive use of the border-radius property (which I\u2019ve covered more in-depth here<\/a>), which doesn\u2019t 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.<\/p>\n

So let\u2019s get to the code!<\/p>\n

The XHTML<\/h3>\n

I\u2019ve attempted to keep my code as simple as possible, while still keeping each of my flower\u2019s segments separated for easy adjustment. Here\u2019s what my code looks like:<\/p>\n

<div id="background">\n\t<div id="flower">\n\t\t<div id="topleft" class="petal"><\/div>\n\t\t<div id="topright" class="petal"><\/div>\n\t\t<div id="center"><\/div>\n\t\t<div id="bottomleft" class="petal"><\/div>\n\t\t<div id="bottomright" class="petal"><\/div>\n\t\t<div id="leftleaf" class="leaf"><\/div>\n\t\t<div id="stem"><\/div>\n\t\t<div id="rightleaf" class="leaf"><\/div>\n\t<\/div>\n<\/div><\/pre>\n
The \u201cbackground\u201d div creates the blue sky and green grass, while the \u201cflower\u201d 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\u2019t have a class assigned.<\/p>\n
I\u2019ve 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.<\/p>\n
The CSS<\/h3>\n
And now for the fun part! I\u2019ll break my CSS into several parts so you can see how it all comes together. First, we\u2019ll set up the background and the main flower div:<\/p>\n
#background {\n\tposition: relative;\n\tbackground-color: #9cf;\n\twidth: 600px;\n\theight: 476px;\n\tborder-bottom: 10px solid #090;\n\tmargin: 0 auto; }\n#flower {\n\tposition: absolute;\n\ttop: 20px;\n\tleft: 172px;\n\twidth: 256px; }<\/pre>\n
The background has been relatively positioned so that I can absolutely position my flower inside it, using the relative-absolute positioning trick.<\/a> I\u2019ve also given it a width and height, to provide my image\u2019s frame. Then I\u2019ve 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.<\/p>\n
Then we have the flower petals:<\/p>\n
.petal {\n\tbackground-color: #f33;\n\tfloat: left;\n\tmargin: 1px 1px 0 0;\n\twidth: 125px;\n\theight: 125px;\t\t\n\t-moz-border-radius: 20px;\n\t-webkit-border-radius: 20px; }\n#topleft {\n\t-moz-border-radius-bottomright: 0;\n\t-webkit-border-bottom-right-radius: 0;\n\tborder-bottom: 2px solid #c33;\n\tborder-right: 2px solid #c33; }\n#topright {\n\t-moz-border-radius-bottomleft: 0;\n\t-webkit-border-bottom-left-radius: 0;\n\tborder-bottom: 2px solid #c33;\n\tborder-left: 2px solid #c33;  }\n#bottomleft {\n\t-moz-border-radius-topright: 0;\n\t-webkit-border-top-right-radius: 0;\n\tborder-top: 2px solid #c33;\n\tborder-right: 2px solid #c33; }\n#bottomright {\n\t-moz-border-radius-topleft: 0;\n\t-webkit-border-top-left-radius: 0;\n\tborder-top: 2px solid #c33;\n\tborder-left: 2px solid #c33; }<\/pre>\n
This is the largest chunk of CSS (because each petal is slightly different), but it\u2019s fairly repetitive in nature (because each petal is fundamentally the same). The \u201cpetal\u201d 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.<\/p>\n
The following four sets of rules simply specialize each of the petals to make them unique. I\u2019m doing two things. First, I\u2019m 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\u2019m 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.<\/p>\n
Next we have the center circle and the stem:<\/p>\n
#center {\n\t\tposition: absolute;\n\t\tleft: 112px;\n\t\ttop: 112px;\n\t\tbackground-color: #ff3;\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\t-moz-border-radius: 15px;\n\t\t-webkit-border-radius: 15px; }\n\t#stem {\n\t\tfloat: left;\n\t\twidth: 12px;\n\t\theight: 200px;\n\t\tmargin: 0 1px;\n\t\tbackground-color: #093; }<\/pre>\n
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\u2019ve 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.<\/p>\n
The stem was the most straightforward of my elements. It\u2019s 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.<\/p>\n
And speaking of the leaves, here\u2019s how they were created:<\/p>\n
.leaf {\n\tfloat: left; \n\tmargin-top: 80px; \n\tbackground-color: #093;\n\twidth: 60px;\n\theight: 30px; }\n#leftleaf {\n\tclear: left;\n\tmargin-left: 10px;\n\t-moz-border-radius-bottomleft: 30px;\n\t-webkit-border-bottom-left-radius: 30px;\n\t-moz-border-radius-topright: 30px;\n\t-webkit-border-top-right-radius: 30px; }\n#rightleaf {\n\t-moz-border-radius-bottomright: 30px;\n\t-webkit-border-bottom-right-radius: 30px;\n\t-moz-border-radius-topleft: 30px;\n\t-webkit-border-top-left-radius: 30px; }<\/pre>\n
I was particularly proud of how the leaves turned out, even though they\u2019re fairly simple in design. The leaf class sets some defaults: they\u2019re 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.<\/p>\n
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\u2019t show up to the right of the petals, and has a left margin to push the stem exactly where I wanted it.<\/p>\n
And that\u2019s all there is to this flower!<\/a> Even though it may seem complex, I\u2019ve 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\u2019s a lot of fun for the border-radius property as well).<\/p>\n
Additional Challenges<\/h3>\n
So that\u2019s what I was able to accomplish<\/a> 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:<\/p>\n