Styling a bar chart
We are going to use CSS to create a simple horizontal bar chart.
Exercise
- Create a figure element to hold the chart.
- Create several divs in the figure. Put a statistic in each one.
- Write styling for figure div such that each div has a border and a background.
- Optionally set a different colour for each div.
- Use a style attribute on each div to set the width as a percentage.
Further Exercise
Finesse your bar chart and create something like this:
%img{src: ‘/images/css_barchart.jpg’, style: ‘width:100%;’ }
Further exercise
- Set a drop shadow on each div using something like: box-shadow:10 10 10 rgba(0,0,0,0.3);
- Set a border radius on each div using something like: border-radius:3px;
%aside
Downloads