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>Mini Calendar / Date Picker</title>
10
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
11
</head>
12
<body>
13
  <section class="container">
14
    <div class="cal">
15
      <table class="cal-table">
16
        <caption class="cal-caption">
17
          <a href="#" class="prev">&laquo;</a>
18
          <a href="#" class="next">&raquo;</a>
19
          May 2012
20
        </caption>
21
        <tbody class="cal-body">
22
          <tr>
23
            <td class="cal-off"><a href="#">30</a></td>
24
            <td><a href="#">1</a></td>
25
            <td><a href="#">2</a></td>
26
            <td class="cal-today"><a href="#">3</a></td>
27
            <td><a href="#">4</a></td>
28
            <td><a href="#">5</a></td>
29
            <td><a href="#">6</a></td>
30
          </tr>
31
          <tr>
32
            <td><a href="#">7</a></td>
33
            <td class="cal-selected"><a href="#">8</a></td>
34
            <td><a href="#">9</a></td>
35
            <td><a href="#">10</a></td>
36
            <td><a href="#">11</a></td>
37
            <td class="cal-check"><a href="#">12</a></td>
38
            <td><a href="#">13</a></td>
39
          </tr>
40
          <tr>
41
            <td><a href="#">14</a></td>
42
            <td><a href="#">15</a></td>
43
            <td><a href="#">16</a></td>
44
            <td class="cal-check"><a href="#">17</a></td>
45
            <td><a href="#">18</a></td>
46
            <td><a href="#">19</a></td>
47
            <td><a href="#">20</a></td>
48
          </tr>
49
          <tr>
50
            <td><a href="#">21</a></td>
51
            <td><a href="#">22</a></td>
52
            <td><a href="#">23</a></td>
53
            <td><a href="#">24</a></td>
54
            <td><a href="#">25</a></td>
55
            <td><a href="#">26</a></td>
56
            <td><a href="#">27</a></td>
57
          </tr>
58
          <tr>
59
            <td><a href="#">28</a></td>
60
            <td><a href="#">29</a></td>
61
            <td><a href="#">30</a></td>
62
            <td><a href="#">31</a></td>
63
            <td class="cal-off"><a href="#">1</a></td>
64
            <td class="cal-off"><a href="#">2</a></td>
65
            <td class="cal-off"><a href="#">3</a></td>
66
          </tr>
67
        </tbody>
68
      </table>
69
    </div>
70
  </section>
71
</body>
72
</html>
73
 
 
CSS 
/*
1
/*
2
 * Copyright (c) 2012-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/mini-calendar-date-picker/demo/scss
10
 *
11
 * Original PSD by James McDonald: http://goo.gl/HqJan
12
 */
13
 
14
@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css";
15
 
16
html, body {
17
  min-height: 100%;
18
}
19
 
20
body {
21
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
22
  color: #404040;
23
  background: #dbdede;
24
  background-image: -webkit-radial-gradient(center, circle cover, #dbdede, #bfbdbe);
25
  background-image: -moz-radial-gradient(center, circle cover, #dbdede, #bfbdbe);
26
  background-image: -o-radial-gradient(center, circle cover, #dbdede, #bfbdbe);
27
  background-image: radial-gradient(center, circle cover, #dbdede, #bfbdbe);
28
}
29
 
30
.container {
31
  margin: 50px auto;
32
  width: 400px;
33
  text-align: center;
34
}
35
 
36
.cal {
37
  position: relative;
38
  padding: 4px;
39
  font-weight: bold;
40
  background: #bebfc0;
41
  background: rgba(0, 0, 0, 0.1);
42
  border-radius: 5px;
43
  display: inline-block;
44
  vertical-align: baseline;
45
  zoom: 1;
46
  *display: inline;
47
  *vertical-align: auto;
48
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
49
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
50
}
51
 
52
.cal:before {
53
  content: '';
54
  position: absolute;
55
  bottom: 3px;
56
  left: 4px;
57
  right: 4px;
58
  height: 6px;
59
  background: #d9d9d9;
60
  border: 1px solid #909090;
61
  border-radius: 4px;
62
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
63
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
64
}
65
 
66
.cal a {
67
  text-decoration: none;
68
}
69
 
70
.cal tr:first-child td {
71
  border-top: 0;
72
}
73
 
74
.cal td:first-child {
75
  border-left: 0;
76
}
77
 
78
.cal tr:first-child a {
79
  border-top: 0;
80
  margin-top: 0;
81
}
82
 
83
.cal tr:last-child a {
84
  border-bottom: 0;
85
  margin-bottom: 0;
86
}
87
 
88
.cal td:first-child a {
89
  border-left: 0;
90
  margin-left: 0;
91
}
92
 
93
.cal td:last-child a {
94
  border-right: 0;
95
  margin-right: 0;
96
}
97
 
98
.cal tr:last-child td:first-child a {
99
  border-radius: 0 0 0 3px;
100
}
101
 
102
.cal tr:last-child td:last-child a {
103
  border-radius: 0 0 3px 0;
104
}
105
 
106
.cal-table {
107
  position: relative;
108
  margin: 0 0 1px;
109
  border-collapse: separate;
110
  border-left: 1px solid #979797;
111
  border-right: 1px solid #979797;
112
  border-bottom: 1px solid #bbbbbb;
113
  border-radius: 0 0 3px 3px;
114
  -webkit-box-shadow: 1px 0 rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1);
115
  box-shadow: 1px 0 rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1);
116
}
117
 
118
.cal-caption {
119
  width: 100%;
120
  padding-bottom: 1px;
121
  line-height: 32px;
122
  color: white;
123
  text-align: center;
124
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
125
  background: #629c2e;
126
  border-radius: 3px 3px 0 0;
127
  background-image: -webkit-linear-gradient(top, #89c84d 0%, #629c2e 75%, #548d20);
128
  background-image: -moz-linear-gradient(top, #89c84d 0%, #629c2e 75%, #548d20);
129
  background-image: -o-linear-gradient(top, #89c84d 0%, #629c2e 75%, #548d20);
130
  background-image: linear-gradient(to bottom, #89c84d 0%, #629c2e 75%, #548d20);
131
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.1), inset 0 2px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4);
132
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.1), inset 0 2px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4);
133
}
134
 
135
.cal-caption a {
136
  line-height: 30px;
137
  padding: 0 10px;
138
  font-size: 20px;
139
  font-weight: normal;
140
  color: white;
141
}
142
 
143
.cal-caption .prev {
144
  float: left;
145
}
146
 
147
.cal-caption .next {
148
  float: right;
149
}
150
 
151
.cal-body td {
152
  width: 30px;
153
  font-size: 11px;
154
  border-top: 1px solid #eaeaea;
155
  border-left: 1px solid #eaeaea;
156
}
157
 
158
.cal-body a {
159
  display: block;
160
  position: relative;
161
  line-height: 28px;
162
  color: #555;
163
  text-align: center;
164
  background: white;
165
}
166
 
167
.cal-body a:hover {
168
  background: #fafafa;
169
}
170
 
171
.cal-off a {
172
  color: #ccc;
173
  font-weight: normal;
174
}
175
 
176
.cal-today a {
177
  color: black;
178
  background: #f5f5f5;
179
  background-image: -webkit-linear-gradient(top, whitesmoke 0%, white 70%);
180
  background-image: -moz-linear-gradient(top, whitesmoke 0%, white 70%);
181
  background-image: -o-linear-gradient(top, whitesmoke 0%, white 70%);
182
  background-image: linear-gradient(to bottom, whitesmoke 0%, white 70%);
183
}
184
 
185
.cal-selected a, .cal-body a:active {
186
  margin: -1px;
187
  color: #b2494d;
188
  background: #fff5f6;
189
  border: 1px solid #e7d4d4;
190
}
191
 
192
.cal-check a {
193
  color: #f79901;
194
  overflow: hidden;
195
}
196
 
197
.cal-check a:before {
198
  content: '';
199
  position: absolute;
200
  top: -6px;
201
  right: -6px;
202
  width: 12px;
203
  height: 12px;
204
  background: #ffb83b;
205
  background-image: -webkit-linear-gradient(top, #ffb83b, #ff6c00);
206
  background-image: -moz-linear-gradient(top, #ffb83b, #ff6c00);
207
  background-image: -o-linear-gradient(top, #ffb83b, #ff6c00);
208
  background-image: linear-gradient(to bottom, #ffb83b, #ff6c00);
209
  -webkit-transform: rotate(-45deg);
210
  -moz-transform: rotate(-45deg);
211
  -ms-transform: rotate(-45deg);
212
  -o-transform: rotate(-45deg);
213
  transform: rotate(-45deg);
214
}
215
 
216
.lt-ie8 .cal-table {
217
  *border-collapse: collapse;
218
}
219
 
220
.lt-ie8 .cal-body a {
221
  zoom: 1;
222
}
223
 
 

Mini Calendar / Date Picker

CSSDeck G+