Ajax Loader
×
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="ru">
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Рейтинг</title>
6
  </head>
7
  <body>
8
    <div class="rating" onmousedown="return false">
9
      <div class="index">9691</div>
10
      <div class="voting">
11
        <div class="minus">-</div>
12
        <div class="karma">6</div>
13
        <div class="plus">+</div>
14
      </div>
15
    </div>
16
  </body>
17
</html>
 
CSS 
body {
1
body {
2
  margin: 10px;
3
}
4
 
5
.rating {
6
  background-color: #909497;
7
  border-radius: 4px;
8
  color: white;
9
  font: 1.2em serif;
10
  height: 40px;
11
  min-width: 400px;
12
  overflow: hidden;
13
  text-align: center;
14
}
15
 
16
.index {
17
  background-color: #A3C741;
18
  float: left;
19
  line-height: 40px;
20
  width: 120px;
21
}
22
 
23
.voting {
24
  float: right;
25
  width: 120px;
26
}
27
 
28
.minus,
29
.karma,
30
.plus {
31
  display: inline-block;
32
  height: 24px;
33
  line-height: 24px;
34
  margin: 8px 2px;
35
  width: 24px;
36
}
37
 
38
.minus,
39
.plus {
40
  border-radius: 4px;
41
  box-shadow: 0 0 2px 0 black;
42
  cursor: pointer;
43
  font: bold 1.1em sans-serif;
44
}
45
 
46
.minus {
47
  background-color: #B63636;
48
}
49
 
50
.plus {
51
  background-color: #9DC538;
52
}
53
 
54
.minus:active,
55
.plus:active {
56
  box-shadow: inset 0 0px 3px 0 black;
57
}
 

Рейтинг

CSSDeck G+