Ajax Loader
HTML 
<h1>A Scalable Calendar Icon in HTML5 and CSS3</h1>
1
<h1>A Scalable Calendar Icon in HTML5 and CSS3</h1>
2
 
3
<p>This is a reproduction of <a href="http://www.sitepoint.com/calendar-app-icon-photoshop/">Simone Sala's Photoshop icon</a> in HTML5 and CSS3.</p>
4
 
5
<p>Please use as you wish and say "hi" to me <a href="http://twitter.com/craigbuckler">@craigbuckler</a>.</p>
6
 
7
<!-- the icon as a time element -->
8
<time datetime="2014-09-20" class="icon">
9
  <em>Saturday</em>
10
  <strong>September</strong>
11
  <span>20</span>
12
</time>
13
 
14
<p>Refer to <a href="http://www.sitepoint.com/calendar-icon-css3/">SitePoint.com for more information&hellip;</a></p>
 
CSS 
body
1
body
2
{
3
  font-family: "Helvetica Neue Bold", arial, helvetica, sans-serif;
4
  font-size: 100%;
5
  margin: 10px;
6
  color: #333;
7
  background-color: #cecece;
8
}
9
 
10
h1
11
{
12
  margin: 0;
13
  font-weight: normal;
14
}
15
 
16
time.icon
17
{
18
  font-size: 1em; /* change icon size */
19
  display: block;
20
  position: relative;
21
  width: 7em;
22
  height: 7em;
23
  background-color: #fff;
24
  margin: 2em auto;
25
  border-radius: 0.6em;
26
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
27
  overflow: hidden;
28
  -webkit-backface-visibility: hidden;
29
  -webkit-transform: rotate(0deg) skewY(0deg);
30
  -webkit-transform-origin: 50% 10%;
31
  transform-origin: 50% 10%;
32
}
33
 
34
time.icon *
35
{
36
  display: block;
37
  width: 100%;
38
  font-size: 1em;
39
  font-weight: bold;
40
  font-style: normal;
41
  text-align: center;
42
}
43
 
44
time.icon strong
45
{
46
  position: absolute;
47
  top: 0;
48
  padding: 0.4em 0;
49
  color: #fff;
50
  background-color: #fd9f1b;
51
  border-bottom: 1px dashed #f37302;
52
  box-shadow: 0 2px 0 #fd9f1b;
53
}
54
 
55
time.icon em
56
{
57
  position: absolute;
58
  bottom: 0.3em;
59
  color: #fd9f1b;
60
}
61
 
62
time.icon span
63
{
64
  width: 100%;
65
  font-size: 2.8em;
66
  letter-spacing: -0.05em;
67
  padding-top: 0.8em;
68
  color: #2f2f2f;
69
}
70
 
71
time.icon:hover, time.icon:focus
72
{
73
  -webkit-animation: swing 0.6s ease-out;
74
  animation: swing 0.6s ease-out;
75
}
76
 
77
@-webkit-keyframes swing {
78
  0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
79
  20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
80
  60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
81
  80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
82
  100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
83
}
84
 
85
@keyframes swing {
86
  0%   { transform: rotate(0deg)  skewY(0deg); }
87
  20%  { transform: rotate(12deg) skewY(4deg); }
88
  60%  { transform: rotate(-9deg) skewY(-3deg); }
89
  80%  { transform: rotate(6deg)  skewY(-2deg); }
90
  100% { transform: rotate(0deg)  skewY(0deg); }
91
}
 

Scalable Calendar Icon in HTML5 and CSS3

CSSDeck G+