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);
				 }
		

CSS3制作精美日历,布布扣,bubuko.com