CSS3制做日历完成编码

日期:2021-03-12 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

总体目标

今日大家的总体目标是制做以下面DEMO显示信息的1个日历实际效果:


HTML Markup
先看来看其构造:

拷贝编码
编码以下:

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

这个构造很简易,大伙儿1看就清晰,在“div.calendar”标识中包括了3个“span”标识,各自置放的是“year”、“day”和“month”。

基本掌握了制做日历的构造看,大家先看来看实际效果图中各个一部分的实际效果分析图:

上图对应的便是各标识和其伪类所起的功效,换句话说便是应用不一样的款式绘图出来不一样的图型实际效果,接下来最关键的是款式的制做。

CSS Code

假如你看搞清楚了上图的标识,那末您就很非常容易整搞清楚下面款式所起的作用实际效果,下面大家分为几个一部分来展现其制做全过程,和所展现的实际效果:

1、日历行为主体制做

第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、绘图日历圆孔实际效果

第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、清理年月实际效果

第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 ⑴px 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、绘图孔钉

这1步,是根据“month:before”和“month:after”来绘图日历的上下钆钉实际效果:

拷贝编码
编码以下:

.calendar .month:before, .calendar .month:after{
content:'';
float:left;
position:absolute;
top:⑸px;
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: ⑴px 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: ⑴px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: ⑴px 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: ⑵px ⑵px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: ⑵px ⑵px 5px rgba(0, 0, 0, 0.3);
box-shadow:⑵px ⑵px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
-moz-transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
-o-transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
}

进行这1步的,大家根据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 ⑴px 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:⑸px;
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: ⑴px 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: ⑴px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: ⑴px 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: ⑵px ⑵px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: ⑵px ⑵px 5px rgba(0, 0, 0, 0.3);
box-shadow:⑵px ⑵px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
-moz-transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
-o-transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
transform: rotate(⑵0deg) skew(⑷0deg,⑶deg) translate(⑴3px,⑴3px);
}

今日相关于CSS3制做日历的实例教程到这里即使详细介绍完了,不知道道您是不是喜爱,假如你喜爱的话就自身也动手能力1试吧,或您根据此例的制做方式,制做出更出色的实际效果出来。另外期待对大伙儿有一定的协助,假如您有更好的共享,随时欢迎在下面的评价中给大家留言。

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