Drawing in CSS – Parrot

August 29, 2008
A parrot made of right-triangles in pure CSS

A parrot made of right-triangles in pure CSS

So as I said in the previous post, I’ve started taking interest in making real drawings using just CSS.

This had led me to create a parrot, which is made purely in CSS. It consists only of axis-aligned right-triangles, and so can be articulated using only DIVs and borders.

Go see the parrot!

And be sure to have a glimpse at the source.

Note it won’t work in IE6.0, but should work on any real web browser (IE7, FF2+, Opera, etc.).

Special thanks goes to ragestorm.net for hosting my page (WordPress.com won’t allow it). It’s also an interesting website for programmers, so check it out.

On Drawing the Parrot

I produced the parrot from this picture.

Drawing the parrot was in many ways a puzzle. Since I could only use axis-aligned right-triangles, I had to figure out how to produce many basic shapes. I tried to keep the count of the triangles low — I could just as well get a program to produce a pixel-by-pixel copy of the parrot — but what I wanted was a rough sketch that browsers can download and draw quickly.

The beak was paricularly challenging. I wanted to make a convincing curve, without using too many angles. The lighting on the beak helped me get a good effect with very few triangles (considering).

I had a constant battle between detailing and using few triangles. I used creative superimposing to create several details with the same triangle.

In a “blurry” picture, detail represents focus. I left the origin of the wing undetailed on purpose. I didn’t want it to draw attention from what I think are the main features of the image: the face and the tip of the wing (I now regret detailing the stand so much).

What I found curious in the process of drawing it, is that there seemed to be a certain order of drawing which was right to follow. Because it’s made of layers on top of layers, the drawing order is affected by the z-placement. In what way – depends on your method. I found it easier — in the parrot’s case — to draw the top-level triangles first, and background triangles last.

Deciding which details fit in and which don’t, was a completely artistic choice. You’ll notice the legs are rather blurry in that aspect. In the original image you could see the leg in much more detail, and also a hint of another leg. I thought it’s not really relevant to the Big Picture. However, the little yellowish strip on the wing I not only drew, but even emphasized it. I thought it adds realism to an otherwise rather abstract body.

Comments and ideas are welcome.

I’m also planning on making another drawing, so if you have a picture which you think I should reproduce, I’d be happy to consider it.

Advertisements

Look what I found

August 28, 2008

Using the same technique I described in a previous post:

http://snessiram.uni.cc/draw.html

Pretty cute.

You can probably do some really amazing drawings with it. I’m thinking of taking such a project, it would be interesting.


Drawing Diagonal Lines with CSS

July 31, 2008

CSS allows you to specify so many bizarre graphical properties, that I couldn’t believe it doesn’t support drawing simple lines. Well, it doesn’t. And googling for how to draw a diagonal line was not effective. The closest result I got was how to draw a trapezoid.

So how to draw lines? The first idea that crossed my mind was stretching images of diagonal lines (which this site suggests as well, after suggesting to implement Breshenham ­čÖé ). However, all resulting lines ┬áhave popping pixels, missing pixels, and a general unevenness.

So, I present a new way. It’s purely in CSS, involves little code, draws very quickly and can be used for almost any diagonal line possible.

Of course it has its problems as well, and I will discuss them later.

Drawing Diagonal Lines

Diagonals Example

Demonstration of my diagonals technique

Lines can be drawn by improving on the trapezoid technique, and placing a “white triangle” (a trapezoid without a width) with a slight offset on top a “solid triangle” to erase its body.

Here’s how the HTML and CSS look (make sure you understand how the trapezoid is done before you continue reading, so you’ll understand the rest):

<style type="text/css">
  .line {
    position:absolute; /* doesn't have to be absolute */
    z-index: -1;         /* places the line behind other elements */
  }

  .line div {
    position:absolute;
    left: 0px; top: 0px;
    border-left-color: transparent;
    border-style: solid;
  }
</style>
<!-- a line from A to B -->
<div class="line" style="left:50px; top:40px; /* point A */">
<div style="
    border-width: 0px 0px 150px 100px;        /* point B (minus A) */
    border-bottom-color: red;                 /* line color */
  "></div>
<div style="
    left: 2px;                                /* line width */
    border-width: 0px 0px 150px 100px;        /* point B (minus A) */
    border-bottom-color: white;               /* background color */
  "></div>
</div>

Explanation

The outer div contains the line. Position it as you wish (I chose absolute positioning and this is probably what you want too. left and top can be used to set the coords for the beginning of the line).
Putting it in the background (using a negative z-index) is very important, or the erasing-triangle will erase your content as well.

Inside it, are two inner divs. The first one is the solid-triangle. Its border-width determines the end-point of the line (meaning: its angle and length). Its border-bottom-color is the color of the line.

The second div is the eraser-triangle. Its border-width must match the first div’s, unless you want your line to have a varying width (practically rendering it a triangle). The left property specifies the width of the line (by actually deciding the offset of the erasing-triangle). Now, this is not so simple: It specifies the horizontal width. So as the line leans more and more to the right, the line will seem thinner. It is important to increase left proportionally to maintain desired line-width. Another important issue is the erasing-color (that is, the border-bottom-color). Its color should match that of the background.

Suggestions

This only demonstrates a rising line, but can be as easily used for a falling line by using right borders and a negative left for the erasing triangle.

To save the trouble of calculations, a simple JavaScript function can be used to draw these lines.

Limitations

Nothing is perfect, and this technique is not even close to being so.

  • Background must be solid – I can’t think of a way to allow the lines on top of an image background.
  • Lines cannot intersect – This is basically the same as the previous, but worth mentioning
  • Cannot draw horizontal and vertical lines. They’re easy to draw, but it’s less pretty (for the programmer).
  • Must distinguish between rising and falling lines – again, less pretty.
  • Lines have to be declared in a specific order: Lower lines should appear later in the HTML (unless you specify their z-index manually)

Conclusion (just for fun)

I presented here a novel method for drawing lines using CSS. It has certain strengths and weaknesses. In general, I think it is very useful.

Enjoy!

Diagonals Example 2

Another demonstration