• play impossible quiz

    Drawing with CSS

    { Posted on Jun 06 2012 by seoman }
    Categories : news area

    Drawing with CSS

    how to draw simple charts using basic CSS elements

    CSS has the ability to draw rectangles with borders and fills. With a little bit of lateral thinking, it doesn’t take too much effort to draw simple business charts. Okay, it’s not as instant as Excel, but much lower in bandwidth requirements than any image file.

    To demonstrate the techniques, I’m going to use the data that you, the readers, supplied in last month’s WPDFD Browser Survey. Thank you to the 3212 of you that submitted details of your favorite browsers on Windows, Mac and Linux/Unix.

    Now, first of all, these stats only relate to last month’s WPDFD browser survey. The browsers used and their proportions do not reflect general trends but those of a very biased audience – Web designers. Nevertheless, it is very interesting to see how they score. All the chart bars are to the same scale, so that you can get a good idea of the browser usage across platforms.

    Windows Browsers

    No big surprise here, IE6 is way out in front but there is still a healthy proportion of Mozilla users. IE5 still outguns Opera though.

    Mac Browsers

    Safari rules the roost here and, interestingly, accounts for more than half the score of Windows IE6 demonstrating that WPDFD has a very high proportion of Mac users. The ‘Other’ category includes OmniWeb, iCab, Netscape 4.x and anything else.

    Linux/Unix Browsers

    Mozilla is the big one here and it is a little surprising to see such a high proportion of *nix users represented. Opera is shown in third place behind the combined, unspecified ‘Others’ but, in reality, is the second most popular browser in this group.


    First of all, I wanted three separate bar charts, one for each platform. I could have used pure CSS to provide the background colors but flat colours are a bit, well … flat, so I decided to go for gradient backgrounds.

    I made the gradients in Photoshop and to make sure they harmonise with the lilac page color, I blended each color between the basic blue, green or magenta into the lilac. Then I cropped off the bottom third of the gradient so that each color blends towards lilac, but doesn’t quite get there.

    As these are just color images with no detail whatsoever, I was able to save the gradients as 200 x 16 pixel JPEGs at maximum quality and they were still only about 750 bytes each. As background images for a CSS box, I was able to used use background-repeat: repeat-x; so that they tile horizontally to any width. If you are confused by x and y directions, think of ‘x’ as ‘a_cross’. Each ‘platform’ box is given a 3D ‘recessed’ look by making the top and left 2px borders darker and the bottom and right borders lighter.

    The three platform boxes have left and right margins of 5px and are all held together in an enclosing transparent box called ‘#chart’

    For the individual bars, I just used flat color backgrounds and the borders left, top and right provide some 3D modelling. Highlights are about 50% value of the basic color and the lowlights about half way towards black. The bars are stacked by giving them progressive z-index values – ‘IE 6′ has a z-index of 1 and ‘Others’ a z-index of 7 with the others somewhere in-between.

    The bars are positioned using absolute positioning referenced from the bottom of the enclosing platform boxes and their left hand edges. The height for each bar is proportional to the data.

    The key along the bottom is a set of alternating boxes, all set to ‘float: left;’, called ‘keyswatch’ and ‘keytext’. I could have created a definition for each key swatch colour rectangle but, instead, I just defined one keyswatch class and supplied the varying background colours using an inline style definition like this.

    <div class=keyswatch style=background-color: #00c>nbsp;</div> <div class=keytext>IE6</div>

    Other tricks

    If you want to go a little further, you can use the background image property of divs to make the bars look more interesting. Small colored GIFs can be applied as div background images set to repeat only once horizontally, but infinitely in the vertical axis, producing a 3D bar that is always exactly the height of the div.

    The background div to this chart is 120 x 120 pixels and has a repeating 10 x 10 grid. Working down from the top, each bar div is given a pixel height PLUS an invisible top-margin that is <chart height> – <bar height> so that the bottoms line-up. (For the red bar, 120 – 60 = 60 top-margin).

    #redbar { background-image: url(../img/redbar.gif); background-repeat: repeat-y; visibility: visible; width: 32px; height: 60px; margin-top: 60px; float: right }

    More elaborate GIFs can give the effect of buildings – denoting property prices, piles of coins for finance or economy charts etc. The file size overhead is very small because we are only using tiny GIF files which, along with the background repeat, make them look bigger. The trick is just to make sure that they ’tile’ vertically.

    This chart works in exactly the same way as the one above. The chart background div is called #buildingchart and holds three other divs called #illubar1, #illubar2 and #illubar3.

    Some ‘gotchas’

    Testing this chart in the various browsers threw up some problems – in IE, wouldn’t you guess! IE is very fussy about how divs are formatted within the HTML. Take the two divs that make up the key along the bottom. The tidy way to mark this up would be one key item per line:-

    <div class=keyswatch style=background-color: #00c>nbsp;</div> <div class=keytext>IE6</div><div class=keyswatch style=background-color:#39f;>nbsp;</div> <div class=keytext>IE5</div>

    Unfortunately, IE places these two floated: left divs one above the other instead of side by side. It misinterprets the carriage return in the markup as a<br>, which it shouldn’t. The only way to keep it happy is to put all the divs on one line with no space between each</div>and the following<div>. You should also avoid the temptation to use padding because this is wrongly implemented in IE as well. If you are depending on a WYSIWYG editor to get this right for you, beware!

    So, just by playing around with box colors and a simple background image, you can draw just about any chart or diagram based upon rectangles and text. If you wanted to make the chart dynamic, the bar height values could be manipulated with JavaScript, but I won’t go into that now because it’s just a one-off.


    Related Posts

    Sorry, comments for this entry are closed at this time.