Let’s be honest, CSS wouldn’t typically be the first technology you would think of using in order to build a visually eff ective and interactive graph or chart – certainly not without at least a sprinkling of JavaScript in there. There are quite a few technologies you would likely think of first, such as JavaScript (and the thousands of jQuery plug-ins you can make great use of), you may even go for an SVG chart, or perhaps you’d prefer to use a graphic editor with interactive capabilities, such as Fireworks or Photoshop.
Having said all of that, creating a pure CSS chart that is both visually appealing to users as well as highly interactive, especially with CSS3, is now very much possible. We’re going to show you exactly how you can achieve it in this tutorial. We’re going to create a graph that shows the amount of products bought from the years 2011 to 2013, so once a user has clicked on the “product 1” button, the graph will animate up or down. It isn’t as complicated as it sounds, and produces great results. So, open up your favourite editor and let’s get going!
01 Get started
Once you create a new HTML file, within the <body> tag, we need to add in a wrapper <div> and a main section. The wrapper will allow us to centre everything on the page when using CSS, while the main section <div> will allow us to style the background of our graph.
001 <div class=”wrapper”>
002 <section class=”main”>
003 </section><!-- END main -->
004 </div><!-- END wrapper -->
02 Product buttons
We’re going to need two buttons that users can click on to view the amount of products bought that year. This can be easily done by using an input type set to ‘radio’. After this we just need to make sure we give each one an id of ‘f-product1’ and ‘f-product2’.
001 <span class=”button-label”>Products:</span>
002 <input type=”radio” name=”resize-graph”
003 id=”graph-normal” checked=”checked” />
004 <input type=”radio” name=”fill-graph”
id=”f- product1” checked=”checked” />
005 <label for=”f-product1”>Product 1</label>
006 <input type=”radio” name=”fill-graph”
id=”f- product2” />
007 <label for=”f-product2”>Product 2</label>
03 Colour options
Allowing your users to choose between two colours is a nice touch. We’re going to be using a blue and yellow colour – which is up to you how this is perceived. Again, we accomplish this by using an input type button set to ‘radio’ and give each one of them an id.
001 <span class=”button-label”>Colours:</span>
002 <input type=”radio” name=”paint-graph”
003 id=”graph-blue” checked=”checked” />
004 <label for=”graph-blue”>Blue</label>
005 <input type=”radio” name=”paint-graph”
id=”graph-yellow” />
006 <label for=”graph-yellow”>yellow</label>
007
04 2011 graph
This is our first graph for the year 2011. Let’s use an unordered list, give it a class name of ‘graph container’ and use only one list item. Inside our list we can set some class names that we can target using CSS, which will eventually allow us to create our 3D-shaped graph.
05 2012-13
Let’s go over some of these classes in more detail, as we will be using the same class names on all three graphs. The ‘bar-wrapper’ class will be used to initially hide ‘bar-inner’, and ‘bar-container’ positions things relatively. ‘barinner’ is our main inner block and we initially position it 50 per cent of the way. ‘bar-background’ and ‘bar-foreground’ will allow us to style three sides of the inner block.
001 <li>
002 <span>2012</span>
003 <div class=”bar-wrapper”>
004 <div class=”bar-container”>
005 <div class=”bar-bg”></div>
006 <div class=”bar-inner”>50</div>
007 <div class=”bar-foreground”></div>
008 </div>
009 </div>
010 </li>
011
012 <li>
013 <span>2013</span>
014 <div class=”bar-wrapper”>
015 <div class=”bar-container”>
016 <div class=”bar-bg”></div>
017 <div class=”bar-inner”>100</div>
018 <div class=”bar-foreground”></div>
019 </div>
020 </div>
021 </li>
06 Percentages
Now create a new unordered list with a class name
of ‘graph-percentage-container’ with four list items. These
will be used to position the percentages over on the left
side of our graph. We use inline styles to initially position
them at the bottom and then use percentages to swap
them around (top to bottom).
07 The CSS
Now let’s create a new ‘styles.css’ file and start styling our graph. We haven’t included the CSS for the body here, so feel free to style your background any way you like. In this step we are centring our graph using the ‘wrapper’ <div> and everything else is pretty simple. Just remember we are targeting modern browsers here with the use of ‘rgba’ and so on.
08 Graph bottom and left side
Here we are going to make a shape that is positioned at the bottom of our graphs. We then give it some transparency by using the ‘rgba’ properties and making sure it spans the full width of our graph container. Then we can give it some angles by skewing it by -45 degrees. After that we do something similar to the left side. Because these are positioned absolute, we can wriggle them around until they all fit nicely together.
001 .graph-container:before {
002 position: absolute;
003 content: “”;
004 bottom: 0;
005 left: -15px;
006 width: 100%;
007 height: 2.5em;
008 background-color: rgba(183, 183, 183,
1);
009 transform: skew(-45deg);
010 }
011
012 .graph-container:after {
013 position: absolute;
014 content: “”;
015 top: 1.25em;
016 left: -2.5em;
017 width: 2.5em;
018 background-color: rgba(129, 129, 129,
0.4);
019 transform: skew(0deg, -45deg);
020 }
021
09 Style the list items
Now we need to ensure our list items within the graph container are styled. First, position them relative to their parent and give the last list item some right margin. We then position the dates at the very bottom and use ‘bottom: -2em’ and ‘left: 0’ to finish things off with that.
001 .graph-container > li {
002 float: left;
003 position: relative;
004 }
005 .graph-container > li:nth-last-child(2) {
006 margin-right: 2.5em;
007 }
008 .graph-container > li > span {
009 position: absolute;
010 left: 0;
011 bottom: -2em;
012 width: 80%;
013 text-align: center;
014 font-weight: bold;
015 text-shadow: 1px 1px 1px
016 rgba(255,255,255,0.7);
017 color: #777;
018 font-size: 1.5em;
019 }
020 .graph-container > li:last-child {
021 width: 100%;
022 position: absolute;
023 left: 0;
024 bottom: 0;
025 }
10 Percentage numbers
Now we can position our percentage numbers to the far left of our graph. We do this by first setting some default styles to our list items and then setting their positioning to absolute. We then create another CSS rule and position them over to the left by targeting the ‘span’ tag and then make them nice and bold.
001 .graph-percentage-container > li {
002 position: absolute;
003 left: -2.5em;
004 bottom: 0;
005 width: 100%;
006 margin-bottom: 2.5em;
007 list-style: none;
008 }
009 .graph-percentage-container span {
010 position: absolute;
011 font-weight: bold;
012 top: 1em;
013 left: -3.5em;
014 width: 3.5em;
015 font-size: 1.5em;
016 }
11 Percentage lines
What we’re going to do here is add some subtle dotted lines that go across the width of our graphs and connect up to our percentages over on the left. The first CSS rule will give us the default styles to our lines, and the second rule adds in the angled lines that connect up with the percentage values on the left.
12 Bar wrapper
At this point we haven’t really got anything decent to show, so let’s start tidying things up a little. We first position the ‘bar-container’ to relative and then give it some margin and width. Now we can target the front panel of our bars by styling the ‘bar-foreground’ and ‘bar-inner’ classes. Example code can be found on the resource CD.
001 input[name^=”fill-”] {
002 width: 65px;
003 height: 25px;
004 position: absolute;
005 opacity: 0;
006 cursor: pointer;
007 z-index: 100;
008 }
009 input[name^=”fill-”] + label {
010 display: inline-block;
011 margin: 0px;
012 width: 65px;
013 padding: 0px 6px;
014 color: #777;
015 line-height: 20px;
016 font-size: 13px;
017 text-shadow: 1px 1px 1px #fff;
018 border: 1px solid #fff;
019 background: #ffffff;
020 background: linear-gradient(top, #ffffff
0%,#f6f6f6 47%,#ededed 100%);
021 box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
004 bottom: 0;
005 width: 100%;
006 margin-bottom: 2.5em;
007 list-style: none;
008 }
009 .graph-percentage-container span {
010 position: absolute;
011 font-weight: bold;
012 top: 1em;
013 left: -3.5em;
014 width: 3.5em;
015 font-size: 1.5em;
016 }
13 Input buttons
In this step, we are going to style the product buttons that are located at the top and give them some functionality. At the moment they are just radio buttons, so now we need to make them look like proper buttons. By doing so, when the user clicks one, that product will animate into place according to the percentage.
001 input[name^=”fill-”] {002 width: 65px;003 height: 25px;004 position: absolute;005 opacity: 0;006 cursor: pointer;007 z-index: 100;008 }009 input[name^=”fill-”] + label {010 display: inline-block;011 margin: 0px;012 width: 65px;013 padding: 0px 6px;014 color: #777;015 line-height: 20px;016 font-size: 13px;017 text-shadow: 1px 1px 1px #fff;018 border: 1px solid #fff;019 background: #ffffff;020 background: linear-gradient(top, #ffffff0%,#f6f6f6 47%,#ededed 100%);021 box-shadow: 0px 1px 1px rgba(0,0,0,0.3);022 }023 input[name^=”fill-”]:checked + label {024 background: rgba(34, 35, 36, .7);025 border-color: #333;026 color: #fff;027 text-shadow: none;028 box-shadow: 0px 1px 1pxrgba(
14 Normal sizeThis next CSS rule will be used to set the default
size of our graph as well as hide the radio buttons. The
default size of our graph is set by the ‘graph-normal’ id; this
will point at that id because it’s the only one connected to
the ‘resize-‘ attribute set in our CSS rule.
001 input[name^=”resize-”] {
002 position: absolute;
003 opacity: 0;
004 cursor: pointer;
005 z-index: 100;
006 width: 70px;
007 height: 35px;
008 z-index: 100;
009 }
15 The graph height
All we are going to do now is set the overall height
of our graph. So when the ‘graph-normal’ input field is set
(which it always is by default) then we are going to make
the height of our graph ‘30em’ tall.
16 Spacing
Now let’s make sure we have a good amount of
spacing between each bar. We are going to target the
‘bar-container’ first and give it some right margin. Having
done that, we’re going to use the ‘first-child’ and ‘last-child’
pseudo-elements to target the ‘graph-container’ to create
margins on either side of the other bars.
001 /* spacing between bars */
002 .graph-container > li .bar-container {
003 margin-right: 2.5em;
004 }
005 /* spacing before first bar */
006 .graph-container > li:first-child {
007 margin-left: 2.5em;
008 }
009 /* spacing after last bar */
010 .graph-container > li:nth-last-child(2)
.bar- container {
011 margin-right: 1em;
012 }
17 Colours
Now we are going to give our bars some shadow
that will increase the 3D look of our bars. We can achieve
this by adding a grey bar at the front of our bars and then
decreasing the Opacity to either .2 or .1. You can play
around with this until you’re happy with how things look.
18 Product buttons
We’re going to finish off our top buttons, which
include the colour change buttons and product buttons, by
giving them some more styles. We’re going to set the font
weight to bold and then give them some line height. Lastly
let’s also give them a little margin and make sure the
content of these buttons is empty.
001 .button-label{
002 font-weight: bold;
003 color: #aaa;
004 line-height: 40px;
005 text-shadow: 1px 1px 1px
006 rgba(255,255,255,0.8);
007 display: inline;
008 margin: 0 10px 0 20px;
009 }
010 .button-label:before {
011 content: “ “;
012 white-space: wrap;
013 }
014
19 Bars
Finally we are actually going to add some bars
starting with a blue bar and a yellow bar. We’re also going
to make sure the bars are slightly transparent, so that when
we go to add the side panels, we will get a better effect. But
by all means, have a play around with this and consider
adding your own preferred colours.
20 Bar positions
This is where we position our bars by default. The
first bar will be positioned 25 per cent from the bottom and
the second bar will be positioned 50 per cent from the
bottom, with 75 per cent for the last bar. But let’s mix it up a
touch and do different percentages for the yellow bars,
which is product two.
001 /* Product 1 */
002 input#f-product1:checked ~ .graph-container
> li:nth-child(1) .bar-inner { height: 25%;
bottom: 0; }
003 input#f-product1:checked ~ .graph-container
> li:nth-child(2) .bar-inner { height: 50%;
bottom: 0; }
004 input#f-product1:checked ~ .graph-container
> li:nth-child(3) .bar-inner { height: 75%;
bottom: 0; }
005 /* Product 2 */
006 input#f-product2:checked ~ .graph-container
> li:nth-child(1) .bar-inner { height: 50%;
bottom: 0; }
007 input#f-product2:checked ~ .graph-container
> li:nth-child(2) .bar-inner { height: 100%;
bottom: 0; }
008 input#f-product2:checked ~ .graph-container
> li:nth-child(3) .bar-inner { height: 25%;
bottom: 0; }
21 Side panelsHere we’re going to add some side panels to the coloured bars. First, add a dark grey panel to the right side and skew it -45 degrees before turning down the Opacity to .30. Then, let’s add one at the very top of our bars and turn the Opacity down to .2, as this doesn’t need to be as dark. Now we are seeing some shape to our graph as these grey colours are acting like shadows.
22 Bar animations
In this step, we’re going to finish things off by flipping our bars over and positioning them at the very bottom going up. We’re also going to add a transition that will give us some nice easing animation as the product or colour buttons are clicked. To finish things off, we’re going to make the bars slightly transparent.
001 .bar-inner {
002 z-index: 2;
003 top: auto;
004 background-color: rgba(5, 62, 123, .6);
005 height: 0;
006 bottom: -2.5em;
007 color: transparent;
008 transition: height 0.8s ease-out, bottom
0.8s ease-out;
009 }
010
Hiç yorum yok:
Yorum Gönder