Another UI piece in CSS. Hover over the stat box for a nice scale etc. This does need tidying up slightly and i will make it responsive at some point so it looks top banana on mobile.
Forked from Jamie Coulter's Pen UI Statistic Pop Out CSS.
.title | |
%h1 | |
Swagtastic UI Stat Pop out | |
%h2 | |
Hover over each stat. Pure CSS...of course! | |
.ui | |
.ui_box | |
.ui_box__inner | |
%h2 | |
Conversion Rate | |
%p Lorem ipsum dolor sit amet | |
.stat | |
%span 58% | |
.progress | |
.progress_bar | |
%p Lorem ipsum dolor sit amet. Some more super groovy information about this stat. | |
.drop | |
%p Take a closer look | |
.arrow | |
.ui_box | |
.ui_box__inner | |
%h2 | |
Sales By Type | |
%p Lorem ipsum dolor sit amet | |
.stat_left | |
%ul | |
%li | |
Electical | |
%li | |
Clothing | |
%li | |
Entertainment | |
%li | |
Kitchen | |
.progress_graph | |
.progress_graph__bar--1 | |
.progress_graph__bar--2 | |
.progress_graph__bar--3 | |
.progress_graph__bar--4 | |
%p Lorem ipsum dolor sit amet. Some more super groovy information. | |
.drop | |
%p Take a closer look | |
.arrow | |
.ui_box | |
.ui_box__inner | |
%h2 | |
Total Sales | |
%p Lorem ipsum dolor sit amet | |
.stat | |
%span $34,403.93 | |
.progress | |
.progress_bar--two | |
%p Lorem ipsum dolor sit amet. Some more super groovy information about this stat. | |
.drop | |
%p Take a closer look | |
.arrow |
/* Nope, not today */ |
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600); | |
$background:#4FA584; | |
body{ | |
background:#ededeb; | |
.title{ | |
width:600px; | |
margin:0 auto; | |
text-align:center; | |
h1{ | |
margin:30px 0px 0px 0px; | |
font-family: 'Source Sans Pro', sans-serif; | |
font-weight:400; | |
color: #3d3d3d; | |
} | |
h2{ | |
margin:10px 0px 0px 0px; | |
font-size:18px; | |
color: #8B8B8B; | |
font-weight:400; | |
font-family: 'Source Sans Pro', sans-serif; | |
} | |
} | |
.ui{ | |
width:900px; | |
margin:0 auto; | |
margin-top:50px; | |
font-family: 'Source Sans Pro', sans-serif; | |
color:white; | |
box-shadow:none; | |
ul{ | |
margin:0px 30px 10px 0px; | |
padding:0; | |
list-style-type:none; | |
font-size:11px; | |
font-weight:400; | |
line-height:20px; | |
} | |
.drop{ | |
z-index:-3; | |
opacity:0; | |
width: 240px; | |
height: 10px; | |
background: darken($background,10%); | |
position: absolute; | |
color:white; | |
bottom: 0; | |
padding:12px 30px 21px 30px; | |
transition-property:bottom,opacity; | |
transition-duration:.3s; | |
p{ | |
color:lighten($background,50%); | |
} | |
} | |
&_box{ | |
width:300px; | |
height:220px; | |
position:relative; | |
background:#3d3d3d; | |
float:left; | |
box-shadow:-1px 0px rgba(255, 255, 255, 0.07); | |
cursor:pointer; | |
transform:scale(1); | |
transition-property:transform,background; | |
transition-duration:.3s; | |
&__inner{ | |
padding:30px; | |
span{ | |
font-size:36px; | |
font-weight:700; | |
} | |
.progress{ | |
width:100%; | |
margin-top:10px; | |
height:6px; | |
background:rgba(0, 0, 0, 0.3); | |
margin-bottom:15px; | |
&_graph{ | |
float: right; | |
border-bottom: 1px solid rgba(255, 255, 255, 0.09); | |
width: 85px; | |
text-align: center; | |
position: relative; | |
padding-left: 20px; | |
top: 24px; | |
&__bar--1{ | |
width:10px; | |
height:20px; | |
background:$background;float:left;margin-right:10px;position: relative; | |
bottom: -10px;-webkit-animation:graph 1s; | |
} | |
&__bar--2{ | |
width:10px;-webkit-animation:graph2 1s; | |
height:30px;float:left; | |
margin-right:10px; | |
background:$background; | |
} | |
&__bar--3{ | |
width:10px; | |
height:24px;margin-right:10px;-webkit-animation:graph3 1s; | |
background:$background;float:left;position: relative; | |
bottom: -6px; | |
} | |
&__bar--4{ | |
width: 10px; | |
height: 14px;-webkit-animation:graph4 1s; | |
bottom: -16px; | |
position: relative; | |
background: $background; | |
float: left; | |
} | |
} | |
&_bar{ | |
height:6px;float:left; | |
width:58%; | |
background:$background; | |
-webkit-animation:bar 2s; | |
} | |
&_bar--two{ | |
height:6px;float:left; | |
width:78%; | |
background:$background; | |
-webkit-animation:bar2 2s; | |
} | |
} | |
} | |
h2{ | |
font-weight:normal; | |
font-size:16px; | |
margin:-4px 0px 3px 0px; | |
} | |
p{ | |
font-size:11px; | |
color:rgb(182, 182, 182);clear: left; | |
font-weight:300; | |
width:160px; | |
margin:2px 0px 15px 0px; | |
} | |
&:hover{ | |
background:$background; | |
transform:scale(1.1); | |
transition-property:transform,background; | |
transition-duration:.3s; | |
position:relative; | |
z-index:1 | |
} | |
} | |
} | |
} | |
.ui_box:hover > .ui_box__inner p{ | |
color:lighten($background,30%); | |
} | |
.ui_box:hover > .drop{ | |
transition-property:bottom,opacity; | |
transition-duration:.3s; | |
bottom:-42px; | |
opacity:1; | |
} | |
.ui_box:hover > .drop .arrow{ | |
transition-property:transform; | |
transition-duration:1s; | |
transform:rotate(765deg); | |
} | |
.ui_box:hover > .ui_box__inner .progress_graph > div{ | |
background:white; | |
} | |
.ui_box:hover > .ui_box__inner .progress .progress_bar,.ui_box:hover > .ui_box__inner .progress .progress_bar--two{ | |
background:white; | |
} | |
.stat_left{float:left;} | |
.arrow{ | |
width: 4px; | |
height: 4px; | |
transition-property:transform; | |
transition-duration:1s; | |
transform:rotate(45deg); | |
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
border-top: 1px solid #CDEAD3; | |
border-right: 1px solid #CDEAD3; | |
float: right; | |
position: relative; | |
top: -24px; | |
right: 0px; | |
} | |
@keyframes bar{ | |
from{width:0px} | |
to{width:58%;} | |
} | |
@keyframes bar2{ | |
from{width:0px} | |
to{width:78%;} | |
} | |
@keyframes graph{ | |
from{height:0px} | |
to{height:20px} | |
} | |
@keyframes graph2{ | |
from{height:0px} | |
to{height:30px} | |
} | |
@keyframes graph3{ | |
from{height:0px} | |
to{height:24px} | |
} | |
@keyframes graph4{ | |
from{height:0px} | |
to{height:13px} | |
} |
Another UI piece in CSS. Hover over the stat box for a nice scale etc. This does need tidying up slightly and i will make it responsive at some point so it looks top banana on mobile.
Forked from Jamie Coulter's Pen UI Statistic Pop Out CSS.