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 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
随机推荐
- Java 输出指定编码的字符串
Java Sting类有个根据byte,字符编码来输出的构造函数.以下为java文档中的解释.public String(byte[] bytes, String charsetName) throw ...
- C指针决心 ------ 指针表达式
本文是自己学习所做笔记.欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020 所谓的指针表达式是指一个表达式.其结果是一个指针. 例1. int a,b; ...
- DDD事件总线
DDD事件总线 基本思路: (1) 在事件总线内部维护着一个事件与事件处理程序相映射的字典. (2) 利用反射,事件总线会将实现了IEventHandler的处理程序与相应事件 ...
- Java 新特性(5) - Java EE 5 新特性
Java EE 5 由 Java Community Process 通过 Java Specification Request 244 发布,这个 “总纲” JSR 指出了详细描述 Java EE ...
- EasyARM i.mx287学习笔记——minicom配置和使用
0 前言 在windows中有非常多串口调试软件,比如putty. 而ubuntu中也有非常多串口调试软件,当中最简单有用的便是minicom了. 本文说明虚拟机中怎样使用minico ...
- 【日常学习】【欧拉功能】codevs2296 荣誉的解决方案卫队的一个问题
转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看看 题目来源:SDOI2008 文章被剽窃非常严重啊 所以以后都带上版权信息 先上题目 题目描 ...
- atitit.为什么技术的选择方法java超过.net有前途
atitit.为什么技术的选择方法java超过.net有前途 #----有没有法律依据不同的铜需求... 通常有开发效率,需要在稳定性.. 笔者 老哇爪 Attilax 艾龙, EMAIL:1466 ...
- Redux管理你的React应用
使用Redux管理你的React应用 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...
- Android复制WIN8点击下沉倾斜系统瓷砖效果
※效果 ※使用说明 Java代码 import android.app.Activity; import android.os.Bundle; import android.widget.Toast; ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(七)
原文:使用 CodeIgniter 框架快速开发 PHP 应用(七) CodeIgniter 和对象这是玩家章节.它讲述的是 CodeIgniter 的工作原理,也就是揭开CI头上'神秘的面纱'.如果 ...