how to do drawing with css

  • pijika
  • Born
  • Born
  • pijika
  • Posts: 1

Post 3+ Months Ago

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 favourite 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.



WPDFD Browser Stats December 2003 Windows Browsers
Mac Browsers
Linux/Unix Browsers
IE6 IE5 Mozilla Safari Opera Other


Drawing





The gradients
blend into the
background lilac
so that they
harmonise with
the page
colour scheme








The bars seem to stand out
from the page because of the way
the borders are 'lit'
The bottom border is not used



The keys are recessed
by reversing the light and shade

First of all, I wanted three separate bar charts, one for each platform. I could have used pure CSS to provide the background colours 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 colour, I blended each colour between the basic blue, green or magenta into the lilac. Then I cropped off the bottom third of the gradient so that each colour blends towards lilac, but doesn't quite get there.
As these are just colour 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 colour backgrounds and the borders left, top and right provide some 3D modelling. Highlights are about 50% value of the basic colour 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 coloured 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
}

$90M


$80M


$70M


$60MMore 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 colours 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. Have a look at the style sheet.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 52 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.