CSS3制作精美日历

效果图如下,纯CSS3制作，如下图：

demo预览

html如下：

<div class="calendar"><span class="year">2012</span><span class="day">24</span><span class="month">January</span>      </div> 

css如下：

.calendar {  width: 160px;  background-color: #ededef;  background-image: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));   background-image: -webkit-linear-gradient(top,  #ededef,  #ccc);  background-image: -moz-linear-gradient(top,  #ededef,  #ccc);  background-image: -o-linear-gradient(top,  #ededef,  #ccc);  background-image: -ms-linear-gradient(top,  #ededef,  #ccc);  background-image: linear-gradient(top,  #ededef,  #ccc);  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededef', EndColorStr='#cccccc');  font: 30px/60px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;  text-align: center;  float: left;  color: #000;  text-shadow: 0 1px 0 rgba(255,255,255,1);  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  border-radius: 3px;  position: relative;  -moz-box-shadow: 0 2px 2px #888;  -webkit-box-shadow: 0 2px 2px #888;  box-shadow: 0 2px 2px #888;}.calendar:before,.calendar:after {  content:"";  position: absolute;  top: 5px;  width: 8px;  height: 8px;  background-color: #111;  z-index:1;  -moz-border-radius:10px;  -webkit-border-radius:10px;  border-radius:10px;  -moz-box-shadow: 0 1px 1px rgba(255,255,255,1);  -webkit-box-shadow: 0 1px 1px rgba(255,255,255,1);  box-shadow: 0 1px 1px rgba(255,255,255,1);}.calendar:before {  left: 11px;}.calendar:after {  right: 11px;}.calendar span {  display: block;}.month,.year {  font: bold 20px/30px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;  color:#fff;  text-shadow:#00365a 0 -1px 0;  background-color:#04599a;  background-image:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));   background-image:-webkit-linear-gradient(top,  #04599a,  #00365a);   background-image:-moz-linear-gradient(top,  #04599a,  #00365a);   background-image:-o-linear-gradient(top,  #04599a,  #00365a);   background-image:-ms-linear-gradient(top,  #04599a,  #00365a);   background-image:linear-gradient(top,  #04599a,  #00365a);   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#04599a', EndColorStr='#00365a');  border-top:1px solid #00365a;  clear:both;  margin-top: 20px;}.month {  padding: 5px;  -moz-border-radius: 0 0 3px 3px;  -webkit-border-radius: 0 0 3px 3px;  border-radius: 0 0 3px 3px;  font: normal 30px/40px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;  margin-top: 0;}.calendar .month:before, .calendar .month:after{content:'';float:left;position:absolute;top:-5px;width:4px;height:14px;background-color:#dadada;background-image:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); background-image:-webkit-linear-gradient(top,  #f1f1f1,  #aaa); background-image:-moz-linear-gradient(top,  #f1f1f1,  #aaa); background-image:-o-linear-gradient(top,  #f1f1f1,  #aaa); background-image:-ms-linear-gradient(top,  #f1f1f1,  #aaa); background-image:linear-gradient(top,  #f1f1f1,  #aaa); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#aaaaaa');z-index:2;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.calendar .month:before{left:13px;}.calendar .month:after{right:13px;}.day {  color: #fff;  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);  font-size: 60px;  margin: 0 auto 50px;  padding: 10px 10px 35px;  position: relative;  text-align: center;  width: 80px;  position: relative;background: #f3f3f3;background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);border-top: 1px solid #ccc;border-right: 1px solid #ccc;-webkit-border-radius: 0 0 60px 0 / 0 0 60px 0;-moz-border-radius: 0 0 60px 0 / 0 0 60px 0;border-radius: 0 0 60px 0 / 0 0 60px 0;-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);} .day:before{content:'';width: 25px;height: 20px;position: absolute;bottom:0;right:0;-webkit-border-radius: 0 0 30px 0;-moz-border-radius: 0 0 30px 0;border-radius: 0 0 30px 0;-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);-webkit-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);-moz-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);-o-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); }