CSS3制作
目标是制作如下面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
CSS3制作的更多相关文章
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
随机推荐
- Android应用UI架构
这个标题听起来可能有点大.事实上这里主要就是讨论一个应用程序的UI组件,是全用Activity还是全用Fragment.或者是二者皆有.以及使用Activity和Fragment的一些注意事项. A ...
- java安全性语言
java通过所谓的沙箱安全模型保证了其安全性,以下我们就来看看java提供的安全沙箱机制. 组成沙箱的基本组件例如以下: 1.类装载器结构: 2.class文件检验器: 3.内置于java虚拟机(及语 ...
- 有关windows在调试ODOO8.0有些问题
继Ubuntu建筑物8.0调试环境后,,尝试windows设置开发环境. 最后的调试和开发,或将返回Linux环境,由于前一段时间手贱,改变分区表,该grub搞哈.哎!后来重建mbr,手动检索分区表( ...
- Oracle cloud control 12c 的启动与关闭
Oracle cloud control 12c整个安装比較复杂,光是安装路径的选择,登录password,端口号等众多个配置不免让人眼花缭乱,目不暇接.本文描写叙述的是安装完成后怎样获取安装时设定的 ...
- 全自动Web后门扫描（转）
阅读目录 工具介绍 使用方法 工具介绍 这是一款全自动Web后门查杀工具,基于Python开发 某些较新的后门可能会查杀失败 规则列表来自seay博客 回到顶部 使用方法 1.按恶意代码查杀: pyt ...
- AndroidUI组件之TabHost
package com.gc.tabhost; /** * @author Android将军 * * * * 1.TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置 * 多 ...
- 熟人UML
UML,全名Unified Modeling Language.模语言.它是软件和系统开发的标准建模语言.主要是以图形的方式对系统进行分析.设计. 同一时候,UML不是一个程序设计语言,也不是一个形式 ...
- POJ1080 Human Gene Functions 动态规划 LCS的变形
题意读了半年,唉,给你两串字符,然后长度不同,你能够用'-'把它们补成同样长度,补在哪里取决于得分,它会给你一个得分表,问你最大得分 跟LCS非常像的DP数组 dp[i][j]表示第一个字符串取第i个 ...
- tmp1
program1: Line # Mem usage Increment Line Contents================================================ 2 ...
- 35,000FT大气压力的问题
原来的问题:压力在喷气客机的飞行FL350(35,000脚)大约210mmHg.这是个大气压的数量? 在每平方英寸磅? 多少帕斯卡尔? http://wenwen.sogou.com/z/q33797 ...