CSS3制作日历实现代码


Posted in HTML / CSS onJanuary 21, 2012

目标

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

CSS3制作日历实现代码
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”。

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

CSS3制作日历实现代码

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

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

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

HTML / CSS 相关文章推荐
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 #HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 #HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 #HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 #HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 #HTML / CSS
CSS3 特效范例整理
Aug 22 #HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 #HTML / CSS
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
浅说js变量
2011/05/25 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Python交换变量
2008/09/06 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Django中的ajax请求
2018/10/19 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏