Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
5
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
6
<head>
7
  <meta charset="utf-8">
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
  <title>Dark Datepicker</title>
10
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
11
</head>
12
<body>
13
  <table class="datepicker">
14
    <caption class="datepicker-caption">
15
      <a href="#" class="datepicker-prev">Previous</a>
16
      <span class="datepicker-title">April 2013</span>
17
      <a href="#" class="datepicker-next">Next</a>
18
    </caption>
19
    <thead class="datepicker-head">
20
      <tr>
21
        <th class="datepicker-th">Mo</th>
22
        <th class="datepicker-th">Tu</th>
23
        <th class="datepicker-th">We</th>
24
        <th class="datepicker-th">Th</th>
25
        <th class="datepicker-th">Fr</th>
26
        <th class="datepicker-th">Sa</th>
27
        <th class="datepicker-th">Su</th>
28
      </tr>
29
    </thead>
30
    <tbody class="datepicker-body">
31
      <tr>
32
        <td class="datepicker-td"><a href="#">1</a></td>
33
        <td class="datepicker-td"><a href="#">2</a></td>
34
        <td class="datepicker-td"><a href="#">3</a></td>
35
        <td class="datepicker-td"><a href="#">4</a></td>
36
        <td class="datepicker-td"><a href="#">5</a></td>
37
        <td class="datepicker-td"><a href="#">6</a></td>
38
        <td class="datepicker-td"><a href="#">7</a></td>
39
      </tr>
40
      <tr>
41
        <td class="datepicker-td"><a href="#">8</a></td>
42
        <td class="datepicker-td"><a href="#">9</a></td>
43
        <td class="datepicker-td today"><a href="#">10</a></td>
44
        <td class="datepicker-td"><a href="#">11</a></td>
45
        <td class="datepicker-td"><a href="#">12</a></td>
46
        <td class="datepicker-td"><a href="#">13</a></td>
47
        <td class="datepicker-td"><a href="#">14</a></td>
48
      </tr>
49
      <tr>
50
        <td class="datepicker-td"><a href="#">15</a></td>
51
        <td class="datepicker-td"><a href="#">16</a></td>
52
        <td class="datepicker-td"><a href="#">17</a></td>
53
        <td class="datepicker-td"><a href="#">18</a></td>
54
        <td class="datepicker-td"><a href="#">19</a></td>
55
        <td class="datepicker-td"><a href="#">20</a></td>
56
        <td class="datepicker-td"><a href="#">21</a></td>
57
      </tr>
58
      <tr>
59
        <td class="datepicker-td"><a href="#">22</a></td>
60
        <td class="datepicker-td"><a href="#">23</a></td>
61
        <td class="datepicker-td"><a href="#">24</a></td>
62
        <td class="datepicker-td"><a href="#">25</a></td>
63
        <td class="datepicker-td"><a href="#">26</a></td>
64
        <td class="datepicker-td"><a href="#">27</a></td>
65
        <td class="datepicker-td"><a href="#">28</a></td>
66
      </tr>
67
      <tr>
68
        <td class="datepicker-td"><a href="#">29</a></td>
69
        <td class="datepicker-td"><a href="#">30</a></td>
70
        <td class="datepicker-td off"><a href="#">1</a></td>
71
        <td class="datepicker-td off"><a href="#">2</a></td>
72
        <td class="datepicker-td off"><a href="#">3</a></td>
73
        <td class="datepicker-td off"><a href="#">4</a></td>
74
        <td class="datepicker-td off"><a href="#">5</a></td>
75
      </tr>
76
    </tbody>
77
  </table>
78
</body>
79
</html>
80
 
 
CSS 
/*
1
/*
2
 * Copyright (c) 2013 Thibaut Courouble
3
 * http://www.cssflow.com
4
 *
5
 * Licensed under the MIT License:
6
 * http://www.opensource.org/licenses/mit-license.php
7
 *
8
 * View the Sass/SCSS source at:
9
 * http://www.cssflow.com/snippets/dark-datepicker/demo/scss
10
 *
11
 * Original PSD by Alexey Anatolievich: http://goo.gl/oLPEk
12
 */
13
 
14
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
15
 
16
body {
17
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
18
  color: #404040;
19
  background: #313944;
20
}
21
 
22
.datepicker {
23
  position: relative;
24
  margin: 30px auto;
25
  padding: 4px;
26
  font-size: 10px;
27
  text-align: center;
28
  background: #242930;
29
  border: 1px solid #0e1013;
30
  border-collapse: separate;
31
  border-radius: 4px 4px 3px 3px;
32
  -webkit-box-shadow: 0 1px #181c21, 0 2px #14171b, 0 3px 3px rgba(0, 0, 0, 0.3);
33
  box-shadow: 0 1px #181c21, 0 2px #14171b, 0 3px 3px rgba(0, 0, 0, 0.3);
34
}
35
 
36
.datepicker:before, .datepicker:after {
37
  content: '';
38
  position: absolute;
39
  top: -8px;
40
  left: 50%;
41
  width: 0;
42
  height: 0;
43
  margin-left: -4px;
44
  border: 4px solid transparent;
45
  border-bottom-color: #242930;
46
}
47
 
48
.datepicker:before {
49
  top: -9px;
50
  border-bottom-color: #14171b;
51
}
52
 
53
.datepicker-caption {
54
  display: block;
55
  position: relative;
56
  line-height: 29px;
57
  background: #333941;
58
  border: 1px solid #1b1e24;
59
  border-bottom-color: #181b21;
60
  border-radius: 3px 3px 0 0;
61
  background-image: -webkit-linear-gradient(top, #414b56, #323841 50%, #2b323a 50%, #252a31);
62
  background-image: -moz-linear-gradient(top, #414b56, #323841 50%, #2b323a 50%, #252a31);
63
  background-image: -o-linear-gradient(top, #414b56, #323841 50%, #2b323a 50%, #252a31);
64
  background-image: linear-gradient(to bottom, #414b56, #323841 50%, #2b323a 50%, #252a31);
65
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
66
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
67
}
68
 
69
.datepicker-prev,
70
.datepicker-next {
71
  position: absolute;
72
  top: 0;
73
  bottom: 0;
74
  width: 28px;
75
  font: 0/0 a;
76
  color: transparent;
77
}
78
 
79
.datepicker-prev:before, .datepicker-prev:after,
80
.datepicker-next:before,
81
.datepicker-next:after {
82
  content: '';
83
  position: absolute;
84
  top: 50%;
85
  left: 50%;
86
  width: 0;
87
  height: 0;
88
  margin-top: -6px;
89
  border: 6px solid transparent;
90
}
91
 
92
.datepicker-prev:before,
93
.datepicker-next:before {
94
  margin-top: -5px;
95
}
96
 
97
.datepicker-prev { left: 0; }
98
.datepicker-prev:before, .datepicker-prev:after { margin-left: -9px; }
99
.datepicker-prev:before { border-right-color: rgba(255, 255, 255, 0.1); }
100
.datepicker-prev:after { border-right-color: #181b21; }
101
 
102
.datepicker-next { right: 0; }
103
.datepicker-next:before, .datepicker-next:after { margin-left: -3px; }
104
.datepicker-next:before { border-left-color: rgba(255, 255, 255, 0.1); }
105
.datepicker-next:after { border-left-color: #181b21; }
106
 
107
.datepicker-title {
108
  display: inline-block;
109
  vertical-align: top;
110
  line-height: 18px;
111
  margin: 4px 0;
112
  padding: 0 8px 1px;
113
  font-weight: bold;
114
  color: #8a99af;
115
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
116
  background: #242930;
117
  border: 1px solid;
118
  border-color: #151a1f #191c21 #1c2025;
119
  border-radius: 2px;
120
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.08);
121
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.08);
122
}
123
 
124
.datepicker-head {
125
  display: block;
126
  background: #2a3139;
127
  border: 1px solid #1b1e25;
128
  border-width: 0 1px;
129
}
130
 
131
.datepicker-th {
132
  width: 28px;
133
  line-height: 24px;
134
  padding-bottom: 1px;
135
  font-weight: bold;
136
  color: #18b165;
137
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
138
  border-bottom: 1px solid #232833;
139
}
140
 
141
.datepicker-body {
142
  display: block;
143
  background: #404854;
144
  border: 1px solid #1b1e25;
145
  border-top: 0;
146
  border-radius: 0 0 3px 3px;
147
}
148
 
149
.datepicker-td {
150
  width: 28px;
151
  line-height: 26px;
152
  padding-bottom: 1px;
153
  color: #8ba0b8;
154
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
155
  border-bottom: 1px solid #323841;
156
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
157
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
158
}
159
 
160
.datepicker-td > a {
161
  display: block;
162
  color: inherit;
163
  text-decoration: none;
164
}
165
 
166
.datepicker-td > a:hover { color: #1dd87e; }
167
 
168
.datepicker-td.today {
169
  color: white;
170
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 14px rgba(255, 255, 255, 0.6);
171
}
172
 
173
.datepicker-td.off {
174
  color: #677387;
175
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
176
}
177
 
178
tr:last-child > .datepicker-td { border-bottom: 0; }
179
 
 

Dark Datepicker

CSSDeck G+