首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS3制作日历实现代码

所属分类： 网页制作 / CSS 阅读数： 843
收藏 0 赞 0 分享

目标

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


HTML Markup
先来看看其结构：

复制代码
代码如下:

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

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

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

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

CSS Code

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

1、日历主体制作

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

复制代码
代码如下:

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

2、绘制日历圆孔效果

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

复制代码
代码如下:

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

3、美化年月效果

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

复制代码
代码如下:

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

4、绘制孔钉

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

复制代码
代码如下:

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

5、制作day效果

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

复制代码
代码如下:

.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制作的日历的效果就出来了，如下面的效果所示：

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

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

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22