Balkendiagramm mit DIVs

KrickelD

Hallo Leute,

habe ein Balkendiagramm mit divs gebastelt. Ein äußeres bildet den Maximalwert (100%), jedes innere div bekommt per width die entsprechenden Wert übergeben.

Wie könnte man es nun elegant lösen, dass die Balken einen 3D-Effekt bekommen? Ich meine keinen Schatten, sondern dass es nach außen zum Rand hin dunkler wird, es also nur so wirkt... Wichtig dabei ist, dass ich die Hintergrundfarbe per CSS bestimmen muss/kann...

Ideen?

€dit: Mit mehreren verschachtelten divs könnte man es erreichen, jeder erhält eine PNG mit Farbverlauf (Transparenz von 100% auf 0%) als Hintergrundbild. Schön finde ich diese Lösung allerdings nicht...

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

<html>
<head>
	<title>Bar3D</title>
	<style type="text/css">
	body { padding: 50px; }
	.bar { background: transparent url(bar_top.png) top left repeat-x; }
	.bar div { background: transparent url(bar_left.png) top left repeat-y; width: 100%; height: 100%; }
	.bar div div { background: transparent url(bar_bottom.png) bottom left repeat-x; width: 100%; height: 100%; }
	.bar div div div { background: transparent url(bar_right.png) top right repeat-y; width: 100%; height: 100%; }
	</style>
</head>
<body>

	<div class="bar" style="width: 400px; height: 80px; background-color: #f00;">
		<div>
			<div>
				<div>
					&nbsp;
				</div>
			</div>
		</div>
	</div>

</body>
</html>

(hier klicken, um zum Original Thread zu gelangen)