Skip to content

Instantly share code, notes, and snippets.

@tkheyfets tkheyfets/chart.html
Last active Mar 23, 2016

Embed
What would you like to do?
Interactive chart with html and css http://jsbin.com/zoginax/5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title>CSS Chart</title>
</head>
<body>
<div class="bars-wrapper">
<div style="width: 25%;" class="bar primary"></div>
<div style="width: 50%;" class="bar dark"></div>
<div class="labels-wrapper">
<ul class="labels">
<li class="overall"><strong class="accent-color">30</strong> out of <small>40</small> games played</li>
<li data-label="primary"><strong class="primary-color">10</strong> out of <small>40</small> games lost</li>
<li data-label="dark"><strong class="dark-color">20</strong> out of <small>40</small> games won</li>
</ul>
</div>
</div>
</body>
</html>
html {
font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
}
html * { box-sizing: border-box; }
.clearfix {
height: 1%;
display: table;
}
.clearfix:after,
.clearfix:before { clear: both; }
.bars-wrapper {
background-color: transparent;
width: 240px;
height: 40px;
margin-top: 40px;
position: relative;
}
.bars-wrapper:before {
content: '';
display: block;
width: 100%;
background-color: #DCEDC8;
height: 20px;
position: absolute;
top: 20px;
}
.bar {
position: relative;
height: 20px;
margin-top: 20px;
-moz-transition: all ease-in .25s;
-webkit-transition: all ease-in .25s;
transition: all ease-in .25s;
float: left;
cursor: pointer;
}
.bar:hover {
height: 40px;
margin-top: 0;
}
.bar.primary { background-color: #8BC34A; }
.bar.dark { background-color: #689F38; }
.primary-color { color: #8BC34A; }
.dark-color { color: #689F38; }
.accent-color { color: #8BC34A; }
strong {
font-size: 18px;
}
small {
font-size: 15px;
color: #727272;
}
.labels-wrapper {
overflow: hidden;
position: absolute;
height: 32px;
width: 100%;
padding: 0;
margin: 0;
top: -40px;
}
.labels {
list-style: none;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
-moz-transition: top ease-in .25s;
-webkit-transition: top ease-in .25s;
transition: top ease-in .25s;
color: #B6B6B6;
font-size: 12px;
}
.labels li {
height: 32px;
position: relative;
opacity: 0;
-moz-transition: all ease-in .25s .125s;
-webkit-transition: all ease-in .25s .125s;
transition: all ease-in .25s .125s;
}
.labels li.overall { opacity: 1; }
.bar.dark:hover ~ .labels-wrapper [data-label="dark"],
.bar.primary:hover ~ .labels-wrapper [data-label="primary"] {
opacity: 1;
}
.bar.primary:hover ~ .labels-wrapper .labels {
top: -32px;
}
.bar.dark:hover ~ .labels-wrapper .labels {
top: -64px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.