html制作日历备忘录,CSS3制作日历备忘录-CSDN博客

在发这个案例前，首先非常感谢藤藤加入w3cplus，今天开始w3cplus又多了一员猛将，我们会继续为大家制作一些实际可用的CSS3案例，帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤(本来是要用藤藤的名发布，但由于我们设置还出了问题，所以先放上来让大家看看效果吧)制作的，将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了：CSS3渐变制作日期的头部渐变效果；使用box-shadow制作了多层纸张的效果。

HTML Code:

June

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Your Journey(2 items)
- http://www.w3cplus.com
- http://www.w3cplus.com
26
27
28
29
Your Journey(2 items)
- http://www.w3cplus.com
- http://www.w3cplus.com
30
31
1
2

CSS Code*{

margin: 0;

padding: 0;

}

body{

background:url(data:image/jpeg...k=);

font:12px 'Courgette', cursive;

color: #000;

line-height: 32px;

font-weight: bold;

padding: 50px;

}

ul{

list-style: none;

}

h2{

font-size: 14px;

}

color:#fff;

text-decoration: none;

letter-spacing: -3px;

}

.left{

float: left;

}

.right{

float:right;

}

.box{

width: 211px;

padding: 4px;

box-shadow: 0 1px 1px #ebedea;

margin:50px auto;

background: #a2a4a1;

border-radius: 5px;

}

.box > h2{

margin:0 -1px 0 0;

border:1px solid #41531d;

box-shadow:inset 0 1px 1px #a5ce55;

border-radius: 3px 3px 0 0;

padding:0 8px;

text-align: center;

color: #fff;

text-shadow:0 -1px 0px #999;

height: 32px;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(146,183,74,1)), color-stop(100%,rgba(100,134,34,1)));

background-image: -webkit-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: -moz-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: -o-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: -ms-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

}

.box .cal:after,

.box .cal:before {

content:"";

display: table;

}

.box .cal:after {

clear:both;

overflow: hidden;

}

.box .cal{

border-radius: 0 0 5px 5px;

border:1px solid #818380;

font-size: 0;

background: #fff;

box-shadow:0 1px 1px #d9d9d9,0 2px 1px #555;

margin-right: -1px;

zoom: 1;

}

.box .cal > li{

float:left;

width:29px;

border-right: 1px solid #ccc;

border-top: 1px solid #ccc;

text-align: center;

font-size: 12px;

cursor:pointer;

}

.box .cal > li:nth-of-type(7n){

border-right: none;

}

.fgray{

color: #ccc;

}

.tip{

position: relative;

color:orange;

}

.tip:after{

display: block;

content: "";

position: absolute;

border:4px solid orange;

border-color:orange orange transparent transparent ;

top: 0;

right: 0;

}

.gray,

.pink{

position: relative;

}

.pink{

color: #a55353;

background: #fff6f6;

}

.gray{

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,1)), color-stop(100%,rgba(255,255,255,1)));

background-image: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: -o-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: -ms-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

}

.gray:before,

.pink:before{

content: "·";

position:absolute;

display:block;

font-size: 16px;

top: 10px;

left: 50%;

margin-left:-3px;

font-family: "Microsoft YaHei";

}

.gray:before{

color: #d8d8d8;

}

.pink:before{

color: #e5a9a9;

}

.tooltipBox{

position: absolute;

top:32px;

left:-15px;

z-index: 99;

display: none;

width: 215px;

background: #eaeff5;

border:1px solid #64777e;

border-radius:5px;

box-shadow:0 1px 0 #cdd5d8,0 2px 0 #64777e,0 3px 0 #cdd5d8,0 4px 0 #64777e;

}

.box .cal > li:hover .tooltipBox{

display: block;

}

.tooltipBox:after,

.tooltipBox:before{

position: absolute;

display: block;

content: "";

border-style: solid;

}

.tooltipBox:after{

border-width: 10px;

border-color: transparent transparent #64777e;

top: -20px;

left: 20px;

z-index: 2;

}

.tooltipBox:before{

border-width: 8px;

border-color:transparent transparent #717f8a;

top:-16px;

left: 22px;

z-index: 3;

}

.tooltipBox > h2{

background: #717f8a;

line-height: 40px;

color: #fff;

border-radius: 4px 4px 0 0;

text-indent: 1em;

}

.tooltip li{

min-height: 36px;

padding: 5px;

border-bottom: 1px solid #a8adb1;

box-shadow: 0 1px 1px #fff;

color: #232323;

}

.tooltip li:last-child{

border-bottom: none;

box-shadow: none;

}

.timg{

width:36px;

height: 36px;

float: left;

margin-right: 10px;

background: #232323;

border-radius: 5px;

overflow: hidden;

}

.timg img{

width: 36px;

height: 36px;

}

.ttext {

overflow: hidden;

zoom:1;

}