Ajax Loader
×
HTML
<div class="container">
1
<div class="container">
2
    <div class="statbox">
3
      <h2>20<span>%</span></h2>
4
      <p>
5
        These are just a few numb ers that represents the overall performance of 
6
your company ads.
7
      </p>
8
    </div>
9
      <div class="statbox">
10
      <h2>19<span>%</span></h2>
11
      <p>
12
        These are just a few numb ers that represents the overall performance of 
13
your company ads.
14
      </p>
15
    </div>
16
      <div class="statbox">
17
      <h2>43<span>%</span></h2>
18
      <p>
19
        These are just a few numb ers that represents the overall performance of 
20
your company ads.
21
      </p>
22
    </div>
23
  
24
  <div class="statbox">
25
      <h2>72<span>%</span></h2>
26
      <p>
27
        These are just a few numb ers that represents the overall performance of 
28
your company ads.
29
      </p>
30
    </div>
31
      <div class="statbox">
32
      <h2>08<span>%</span></h2>
33
      <p>
34
        These are just a few numb ers that represents the overall performance of 
35
your company ads.
36
      </p>
37
    </div>
38
      <div class="statbox">
39
      <h2>99<span>%</span></h2>
40
      <p>
41
        These are just a few numb ers that represents the overall performance of 
42
your company ads.
43
      </p>
44
    </div>
45
</div>
 
CSS
body { background: #f9f9f9; }
1
body { background: #f9f9f9; }
2
 
3
.container { 
4
  width: auto;
5
  padding: 50px;
6
}
7
 
8
.statbox {
9
  width: 220px;
10
  height: 220px;
11
  text-align: center;
12
  color: #FFFFFF;
13
  display: inline-block;
14
  margin-right: 40px;
15
  margin-bottom: 40px;
16
  cursor: default;
17
  
18
  background: #297FB8;
19
background-image:-moz-linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%); 
20
background-image:-webkit-gradient(linear,color-stop(0, rgb(81,163,217)),color-stop(1, rgb(41,127,184)));
21
background-image:-webkit-linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
22
background-image:-o-linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
23
background-image:-ms-linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
24
background-image:linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
25
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff51a3d9,endColorstr=#ff297fb8)";
26
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff51a3d9,endColorstr=#ff297fb8);
27
 
28
  
29
  -webkit-border-top-right-radius: 30%;
30
  -webkit-border-bottom-left-radius: 30%;
31
  -moz-border-radius-topright: 30%;
32
  -moz-border-radius-bottomleft: 30%;
33
  border-top-right-radius: 30%;
34
  border-bottom-left-radius: 30%;
35
  -moz-box-shadow:7px 7px 0px rgb(23,73,106);
36
-webkit-box-shadow:7px 7px 0px rgb(23,73,106);
37
box-shadow:7px 7px 0px rgb(23,73,106);
38
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=7,OffY=7,Color=#ff17496a,Positive=true)";
39
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=7,OffY=7,Color=#ff17496a,Positive=true);
40
}
41
 
42
.statbox:hover {
43
  background: #666;
44
}
45
 
46
.statbox h2 {
47
  font-size: 120px;
48
  line-height: 100%;
49
  font-weight: 300;
50
  margin: 0;
51
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
52
}
53
 
54
.statbox h2 span {
55
  font-size: 50px;
56
}
57
 
58
.statbox p {
59
  margin: 0;
60
  padding: 0 20px 20px;
61
  text-align: right;
62
  margin-top: -20px;
63
  font-size: 14px;
64
  line-height: 140%;
65
}
 

Sales boxes

CSSDeck G+