目标是制作如下面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>

这个结构很简单,大家一看就清楚,在“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. }

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. }

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. }

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

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. }

完成这一步的,我们通过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. }

今天有关于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头上'神秘的面纱'.如果 ...