Ajax Loader
HTML 
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
2
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
3
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
4
 
5
<div class="wrap">
6
  <div class="section">10 NOV</div>
7
  <div class="title">Dinner Wine Service</div>
8
  <ul class="elements">
9
    <li>
10
      <div class="info">
11
        <p class="version">Version:</p>
12
        <p class="group">Group:</p>
13
      </div>
14
      <div class="values">
15
        <p class="version">11</p>
16
        <p class="group">Food and Beverage</p>
17
      </div>
18
    </li>
19
    <li>
20
      <div class="info">
21
        <p class="version">Date:</p>
22
        <p class="group">By:</p>
23
      </div>
24
      <div class="values">
25
        <p class="version">2012-10-16&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11.11.45</p>
26
        <p class="group">Joans Oldmark</p>
27
      </div>
28
    </li>
29
  </ul>
30
  <div class="buttons">
31
    <button class="comments">Comments</button>
32
    <button class="comments-icon">C</button>
33
    <button>Change Language</button>
34
  </div>
35
  <div class="annotation">Aspect Scope</div>
36
</div>
 
CSS 
@font-face {
1
@font-face {
2
  font-family: "Icons";
3
  src: url("http://commondatastorage.googleapis.com/johnius/pulsarjs.ttf") format("opentype");
4
}
5
 
6
* {
7
  box-sizing: border-box;
8
}
9
 
10
body {
11
  padding: 10px;
12
}
13
 
14
.wrap {
15
  width: 360px;
16
}
17
 
18
.section {
19
  background-image: url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png), -webkit-linear-gradient(top, #9D2424 0%, #812B2B 100%);
20
  border-top-left-radius: 2px;
21
  width: 80px;
22
  text-align: center;
23
}
24
 
25
.title {
26
  width: 280px;
27
  background-image: url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png), -webkit-linear-gradient(top, #535963 0%, #474C54 100%);
28
  border-top-right-radius: 2px;
29
}
30
 
31
.title, .section {
32
  font-size: 17px !important;
33
  line-height: 17px;
34
  font-family: "Oswald" !important;
35
  color: #E6EAF0;
36
  text-shadow: 0 -1px 2px rgba(0,0,0,.6);
37
  padding: 17px 11px;
38
  float: left;
39
}
40
 
41
.elements p {
42
  font-family: "PT Sans Narrow";
43
  font-size: 16px;
44
  font-weight: normal;
45
}
46
 
47
.elements .values p {
48
  font-weight: bold !important;
49
}
50
 
51
.elements {
52
  width: 100%;
53
  background-color: #E2E2CE;
54
  background-image: url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png), -webkit-linear-gradient(top, #F3F3E4 0%, #E7E7D5 100%);
55
  margin: 0;
56
  padding: 0;
57
  float: left;
58
  list-style-type: none;
59
}
60
 
61
.elements li {
62
  width: 100%;
63
  float: left;
64
  border-bottom: 2px solid #DADAC5;
65
  box-shadow: inset 0 7px 2px -5px rgba(255,255,255,.75);
66
}
67
 
68
.elements li:first-child,
69
.buttons {
70
  box-shadow: inset 0 8px 5px -5px rgba(0,0,0,.12);
71
}
72
 
73
.elements .info,
74
.elements .values {
75
  float: left;
76
  font-weight: bold;
77
}
78
 
79
.elements .info {
80
  width: 65px;
81
}
82
 
83
.elements p {
84
  color: #3F454E;
85
  text-shadow: 0 1px 3px #fff;
86
  margin: 0;
87
  padding: 2px 0;
88
}
89
 
90
.elements .info,
91
.elements .values {
92
  margin: 12px 15px;
93
}
94
 
95
.buttons {
96
  background-image: url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png), -webkit-linear-gradient(top, #B9DADC 0%, #9CBDBF 100%);
97
  width: 100%;
98
  padding: 15px 10px;
99
  float: left;
100
}
101
 
102
.buttons button {
103
  background-image: url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png), -webkit-linear-gradient(top, #fff 0%, #E1E4E4 100%);
104
  font-family: "PT Sans";
105
  font-weight: bold;
106
  font-size: 12px;
107
  line-height: 12px;
108
  text-shadow: 0 1px 0 #fff;
109
  border: 0;
110
  border-radius: 5px;
111
  box-shadow: 0 1px 2px rgba(12,85,88,.35), inset 0 -1px 2px rgba(255,255,255,.5);
112
  padding: 8px 7px;
113
  color: #455563;
114
  float: left;
115
  margin: 0 3px;
116
}
117
 
118
.buttons button:active {
119
  background-image:  url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png);
120
  background-color: #F9FAFA;
121
  box-shadow: 0 1px 1px rgba(12,85,88,.35), inset 0 1px 1px rgba(12,85,88,.38), inset 0 -1px 1px rgba(255,255,255,.6);
122
}
123
 
124
.buttons .comments {
125
  border-top-right-radius: 0;
126
  border-bottom-right-radius: 0;
127
  margin-right: 0;
128
}
129
 
130
.buttons .comments-icon {
131
  background-image: url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png), -webkit-linear-gradient(top, #7A8385 0%, #475153 100%);
132
  font-family: "Icons";
133
  font-size: 14px;
134
  color: #F6FAFA;
135
  text-shadow: 0 1px 0 rgb(42,42,47);
136
  border-top-left-radius: 0;
137
  border-bottom-left-radius: 0;
138
  margin-left: 0;
139
  box-shadow: 0 1px 2px rgba(12,85,88,.35);
140
  text-shadow: 0 1px 0 rgba(0,14,14,.6);
141
}
142
 
143
.buttons .comments-icon:active {
144
  background-image:  url(http://commondatastorage.googleapis.com/johnius/noisy-texture-30x30-2.png);
145
  background-color: #575D5D;
146
  box-shadow: 0 1px 1px rgba(12,85,88,.35), inset 0 1px 2px rgba(41,48,48,.6), 1px -1px 0 rgba(255,255,255,.13);
147
}
148
 
149
.annotation {
150
  width: 100%;
151
  background-image: -webkit-linear-gradient(top, #344452 0%, #3B4B59 100%);
152
  font-family: "PT Sans Narrow";
153
  font-size: 14px;
154
  line-height: 14px;
155
  color: #EDF7FB;
156
  text-shadow: 0 1px 0 rgba(6,33,57,.8);
157
  float: left;
158
159
  padding: 13px 10px;
160
}
 

Untitled

CSSDeck G+