目标是制作如下面DEMO显示的一个日历效果：

HTML Markup

先来看看其结构：

  1. 			<div class="calendar">
  2. 				<span class="year">2012</span>
  3. 				<span class="day">24</span>
  4. 				<span class="month">January</span>
  5. 			</div>
  6.

这个结构很简单，大家一看就清楚，在“div.calendar”标签中包含了三个“span”标签，分别放置的是“year”、“day”和“month”。

初步了解了制作日历的结构看，我们先来看看效果图中各个部分的效果剖析图：

上图对应的就是各标签以及其伪类所起的作用，换句话说就是使用不同的样式绘制出来不同的图形效果，接下来最主要的是样式的制作。

CSS Code

如果你看明白了上图的标记，那么您就很容易整明白下面样式所起的功能效果，下面我们分成几个部分来展示其制作过程，以及所呈现的效果：

1、日历主体制作

第一步很简单，制作日历的主体面板效果：

  1. 			.calendar {
  2. 			  width: 160px;
  3. 			  background-color: #ededef;
  4. 			  background-image: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
  5. 			  background-image: -webkit-linear-gradient(top,  #ededef,  #ccc);
  6. 			  background-image: -moz-linear-gradient(top,  #ededef,  #ccc);
  7. 			  background-image: -o-linear-gradient(top,  #ededef,  #ccc);
  8. 			  background-image: -ms-linear-gradient(top,  #ededef,  #ccc);
  9. 			  background-image: linear-gradient(top,  #ededef,  #ccc);
  10. 			  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededef', EndColorStr='#cccccc');
  11. 			  font: 30px/60px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  12. 			  text-align: center;
  13. 			  float: left;
  14. 			  color: #000;
  15. 			  text-shadow: 0 1px 0 rgba(255,255,255,1);
  16. 			  -moz-border-radius: 3px;
  17. 			  -webkit-border-radius: 3px;
  18. 			  border-radius: 3px;
  19. 			  position: relative;
  20. 			  -moz-box-shadow: 0 2px 2px #888;
  21. 			  -webkit-box-shadow: 0 2px 2px #888;
  22. 			  box-shadow: 0 2px 2px #888;
  23. 			}
  24.

2、绘制日历圆孔效果

第二步，主要通过“div.calendar”标签配合“:before”和“:after”来绘制日历的圆孔效果:

  1. 			.calendar:before,
  2. 			.calendar:after {
  3. 			  content:"";
  4. 			  position: absolute;
  5. 			  top: 5px;
  6. 			  width: 8px;
  7. 			  height: 8px;
  8. 			  background-color: #111;
  9. 			  z-index:1;
  10. 			  -moz-border-radius:10px;
  11. 			  -webkit-border-radius:10px;
  12. 			  border-radius:10px;
  13. 			  -moz-box-shadow: 0 1px 1px rgba(255,255,255,1);
  14. 			  -webkit-box-shadow: 0 1px 1px rgba(255,255,255,1);
  15. 			  box-shadow: 0 1px 1px rgba(255,255,255,1);
  16. 			}
  17. 			.calendar:before {
  18. 			  left: 11px;
  19. 			}
  20. 			.calendar:after {
  21. 			  right: 11px;
  22. 			}
  23.

3、美化年月效果

第三步，主要给“span.year”和“span.month”标签进行样式的美化：

  1. 			.calendar span {
  2. 			  display: block;
  3. 			}
  4. 			.month,
  5. 			.year {
  6. 			  font: bold 20px/30px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  7. 			  color:#fff;
  8. 			  text-shadow:#00365a 0 -1px 0;
  9. 			  background-color:#04599a;
  10. 			  background-image:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
  11. 			  background-image:-webkit-linear-gradient(top,  #04599a,  #00365a);
  12. 			  background-image:-moz-linear-gradient(top,  #04599a,  #00365a);
  13. 			  background-image:-o-linear-gradient(top,  #04599a,  #00365a);
  14. 			  background-image:-ms-linear-gradient(top,  #04599a,  #00365a);
  15. 			  background-image:linear-gradient(top,  #04599a,  #00365a);
  16. 			  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#04599a', EndColorStr='#00365a');
  17. 			  border-top:1px solid #00365a;
  18. 			  clear:both;
  19. 			  margin-top: 20px;
  20. 			}
  21.  
  22. 			.month {
  23. 			  padding: 5px;
  24. 			  -moz-border-radius: 0 0 3px 3px;
  25. 			  -webkit-border-radius: 0 0 3px 3px;
  26. 			  border-radius: 0 0 3px 3px;
  27. 			  font: normal 30px/40px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  28. 			  margin-top: 0;
  29. 			}
  30.

4、绘制孔钉

这一步，是通过“month:before”和“month:after”来绘制日历的左右钆钉效果：

  1. 			.calendar .month:before, .calendar .month:after{
  2. 				content:'';
  3. 				float:left;
  4. 				position:absolute;
  5. 				top:-5px;
  6. 				width:4px;
  7. 				height:14px;
  8. 				background-color:#dadada;
  9. 				background-image:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
  10. 				background-image:-webkit-linear-gradient(top,  #f1f1f1,  #aaa);
  11. 				background-image:-moz-linear-gradient(top,  #f1f1f1,  #aaa);
  12. 				background-image:-o-linear-gradient(top,  #f1f1f1,  #aaa);
  13. 				background-image:-ms-linear-gradient(top,  #f1f1f1,  #aaa);
  14. 				background-image:linear-gradient(top,  #f1f1f1,  #aaa);
  15. 				filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#aaaaaa');
  16. 				z-index:2;
  17. 				-moz-border-radius:2px;
  18. 				-webkit-border-radius:2px;
  19. 				border-radius:2px;
  20. 				}
  21. 			.calendar .month:before{left:13px;}
  22. 			.calendar .month:after{right:13px;}
  23.

5、制作day效果

这里分了两步来实现效果，首先在“span.day”制作了“日”的立体效果，然后在“day:before”上制作卷纸效果：

  1. 			.day {
  2. 			  color: #fff;
  3. 			  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);
  4. 			  font-size: 60px;
  5. 			  margin: 0 auto 50px;
  6. 			  padding: 10px 10px 35px;
  7. 			  position: relative;
  8. 			  text-align: center;
  9. 			  width: 80px;
  10. 			  position: relative;
  11. 				background: #f3f3f3;
  12. 				background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  13. 				background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  14. 				background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  15. 				background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  16. 				border-top: 1px solid #ccc;
  17. 				border-right: 1px solid #ccc;
  18. 				-webkit-border-radius: 0 0 60px 0 / 0 0 60px 0;
  19. 				-moz-border-radius: 0 0 60px 0 / 0 0 60px 0;
  20. 				border-radius: 0 0 60px 0 / 0 0 60px 0;
  21. 				-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
  22. 				-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
  23. 				box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
  24. 				}
  25. 			 .day:before{
  26. 				content:'';
  27. 				width: 25px;
  28. 				height: 20px;
  29. 				position: absolute;
  30. 				bottom:0;
  31. 				right:0;
  32. 				-webkit-border-radius: 0 0 30px 0;
  33. 				-moz-border-radius: 0 0 30px 0;
  34. 				border-radius: 0 0 30px 0;
  35. 				-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  36. 				-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  37. 				box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
  38. 				-webkit-transform:	rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  39. 				-moz-transform:	rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  40. 				-o-transform:	rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  41. 				transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  42. 			 }
  43.

完成这一步的，我们通过CSS3制作的日历的效果就出来了，如下面的效果所示：

最终的CSS代码：

  1. 			.calendar {
  2. 				  width: 160px;
  3. 				  background-color: #ededef;
  4. 				  background-image: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
  5. 				  background-image: -webkit-linear-gradient(top,  #ededef,  #ccc);
  6. 				  background-image: -moz-linear-gradient(top,  #ededef,  #ccc);
  7. 				  background-image: -o-linear-gradient(top,  #ededef,  #ccc);
  8. 				  background-image: -ms-linear-gradient(top,  #ededef,  #ccc);
  9. 				  background-image: linear-gradient(top,  #ededef,  #ccc);
  10. 				  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededef', EndColorStr='#cccccc');
  11. 				  font: 30px/60px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  12. 				  text-align: center;
  13. 				  float: left;
  14. 				  color: #000;
  15. 				  text-shadow: 0 1px 0 rgba(255,255,255,1);
  16. 				  -moz-border-radius: 3px;
  17. 				  -webkit-border-radius: 3px;
  18. 				  border-radius: 3px;
  19. 				  position: relative;
  20. 				  -moz-box-shadow: 0 2px 2px #888;
  21. 				  -webkit-box-shadow: 0 2px 2px #888;
  22. 				  box-shadow: 0 2px 2px #888;
  23. 				}
  24.  
  25. 				.calendar:before,
  26. 				.calendar:after {
  27. 				  content:"";
  28. 				  position: absolute;
  29. 				  top: 5px;
  30. 				  width: 8px;
  31. 				  height: 8px;
  32. 				  background-color: #111;
  33. 				  z-index:1;
  34. 				  -moz-border-radius:10px;
  35. 				  -webkit-border-radius:10px;
  36. 				  border-radius:10px;
  37. 				  -moz-box-shadow: 0 1px 1px rgba(255,255,255,1);
  38. 				  -webkit-box-shadow: 0 1px 1px rgba(255,255,255,1);
  39. 				  box-shadow: 0 1px 1px rgba(255,255,255,1);
  40. 				}
  41. 				.calendar:before {
  42. 				  left: 11px;
  43. 				}
  44. 				.calendar:after {
  45. 				  right: 11px;
  46. 				}
  47. 				.calendar span {
  48. 				  display: block;
  49. 				}
  50. 				.month,
  51. 				.year {
  52. 				  font: bold 20px/30px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  53. 				  color:#fff;
  54. 				  text-shadow:#00365a 0 -1px 0;
  55. 				  background-color:#04599a;
  56. 				  background-image:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
  57. 				  background-image:-webkit-linear-gradient(top,  #04599a,  #00365a);
  58. 				  background-image:-moz-linear-gradient(top,  #04599a,  #00365a);
  59. 				  background-image:-o-linear-gradient(top,  #04599a,  #00365a);
  60. 				  background-image:-ms-linear-gradient(top,  #04599a,  #00365a);
  61. 				  background-image:linear-gradient(top,  #04599a,  #00365a);
  62. 				  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#04599a', EndColorStr='#00365a');
  63. 				  border-top:1px solid #00365a;
  64. 				  clear:both;
  65. 				  margin-top: 20px;
  66. 				}
  67.  
  68. 				.month {
  69. 				  padding: 5px;
  70. 				  -moz-border-radius: 0 0 3px 3px;
  71. 				  -webkit-border-radius: 0 0 3px 3px;
  72. 				  border-radius: 0 0 3px 3px;
  73. 				  font: normal 30px/40px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  74. 				  margin-top: 0;
  75. 				}
  76.  
  77. 				.calendar .month:before, .calendar .month:after{
  78. 					content:'';
  79. 					float:left;
  80. 					position:absolute;
  81. 					top:-5px;
  82. 					width:4px;
  83. 					height:14px;
  84. 					background-color:#dadada;
  85. 					background-image:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
  86. 					background-image:-webkit-linear-gradient(top,  #f1f1f1,  #aaa);
  87. 					background-image:-moz-linear-gradient(top,  #f1f1f1,  #aaa);
  88. 					background-image:-o-linear-gradient(top,  #f1f1f1,  #aaa);
  89. 					background-image:-ms-linear-gradient(top,  #f1f1f1,  #aaa);
  90. 					background-image:linear-gradient(top,  #f1f1f1,  #aaa);
  91. 					filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#aaaaaa');
  92. 					z-index:2;
  93. 					-moz-border-radius:2px;
  94. 					-webkit-border-radius:2px;
  95. 					border-radius:2px;
  96. 					}
  97. 				.calendar .month:before{left:13px;}
  98. 				.calendar .month:after{right:13px;}
  99.  
  100. 				.day {
  101. 				  color: #fff;
  102. 				  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);
  103. 				  font-size: 60px;
  104. 				  margin: 0 auto 50px;
  105. 				  padding: 10px 10px 35px;
  106. 				  position: relative;
  107. 				  text-align: center;
  108. 				  width:80px;
  109. 				  position: relative;
  110. 					background:#f3f3f3;
  111. 					background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  112. 					background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  113. 					background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  114. 					background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  115. 					border-top:1px solid #ccc;
  116. 					border-right:1px solid #ccc;
  117. 					-webkit-border-radius:0 0 60px 0 / 0 0 60px 0;
  118. 					-moz-border-radius:0 0 60px 0 / 0 0 60px 0;
  119. 					border-radius:0 0 60px 0 / 0 0 60px 0;
  120. 					-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
  121. 					-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
  122. 					box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
  123. 					}
  124. 				 .day:before{
  125. 					content:'';
  126. 					width:25px;
  127. 					height:20px;
  128. 					position: absolute;
  129. 					bottom:0;
  130. 					right:0;
  131. 					-webkit-border-radius:0 0 30px 0;
  132. 					-moz-border-radius:0 0 30px 0;
  133. 					border-radius:0 0 30px 0;
  134. 					-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  135. 					-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  136. 					box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
  137. 					-webkit-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  138. 					-moz-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  139. 					-o-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  140. 					transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  141. 				 }
  142.

今天有关于CSS3制作日历的教程到这里就算介绍完了，不知道您是否喜欢，如果你喜欢的话就自己也动手一试吧，或者您通过此例的制作方法，制作出更优秀的效果出来。同时希望对大家有所帮助，如果您有更好的分享，随时欢迎在下面的评论中给我们留言。

如需转载烦请注明出处：W3CPLUS

CSS3制作的更多相关文章

  1. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  4. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  5. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  6. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  7. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. BonBon - 使用 CSS3 制作甜美的糖果按钮

    BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...

  9. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  10. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

随机推荐

  1. Java 输出指定编码的字符串

    Java Sting类有个根据byte,字符编码来输出的构造函数.以下为java文档中的解释.public String(byte[] bytes, String charsetName) throw ...

  2. C指针决心 ------ 指针表达式

    本文是自己学习所做笔记.欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020 所谓的指针表达式是指一个表达式.其结果是一个指针. 例1. int  a,b; ...

  3. DDD事件总线

    DDD事件总线 基本思路: (1)       在事件总线内部维护着一个事件与事件处理程序相映射的字典. (2)       利用反射,事件总线会将实现了IEventHandler的处理程序与相应事件 ...

  4. Java 新特性(5) - Java EE 5 新特性

    Java EE 5 由 Java Community Process 通过 Java Specification Request 244 发布,这个 “总纲” JSR 指出了详细描述 Java EE ...

  5. EasyARM i.mx287学习笔记——minicom配置和使用

    0 前言     在windows中有非常多串口调试软件,比如putty. 而ubuntu中也有非常多串口调试软件,当中最简单有用的便是minicom了.     本文说明虚拟机中怎样使用minico ...

  6. 【日常学习】【欧拉功能】codevs2296 荣誉的解决方案卫队的一个问题

    转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看看 题目来源:SDOI2008 文章被剽窃非常严重啊 所以以后都带上版权信息 先上题目 题目描 ...

  7. atitit.为什么技术的选择方法java超过.net有前途

    atitit.为什么技术的选择方法java超过.net有前途 #----有没有法律依据不同的铜需求... 通常有开发效率,需要在稳定性.. 笔者 老哇爪 Attilax 艾龙,  EMAIL:1466 ...

  8. Redux管理你的React应用

    使用Redux管理你的React应用   因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...

  9. Android复制WIN8点击下沉倾斜系统瓷砖效果

    ※效果 ※使用说明 Java代码 import android.app.Activity; import android.os.Bundle; import android.widget.Toast; ...

  10. 使用 CodeIgniter 框架快速开发 PHP 应用(七)

    原文:使用 CodeIgniter 框架快速开发 PHP 应用(七) CodeIgniter 和对象这是玩家章节.它讲述的是 CodeIgniter 的工作原理,也就是揭开CI头上'神秘的面纱'.如果 ...