CSS3制作日歷實(shí)現(xiàn)代碼

2024-07-11 08:26:03

字體：大中小

供稿：網(wǎng)友

目標(biāo)

今天我們的目標(biāo)是制作如下面DEMO顯示的一個(gè)日歷效果：

HTML Markup
先來看看其結(jié)構(gòu)：

復(fù)制代碼

代碼如下:
<div class="calendar">
<span class="year">2012</span>
<span class="day">24</span>
<span class="month">January</span>
</div>

這個(gè)結(jié)構(gòu)很簡(jiǎn)單，大家一看就清楚，在“div.calendar”標(biāo)簽中包含了三個(gè)“span”標(biāo)簽，分別放置的是“year”、“day”和“month”。

初步了解了制作日歷的結(jié)構(gòu)看，我們先來看看效果圖中各個(gè)部分的效果剖析圖：

上圖對(duì)應(yīng)的就是各標(biāo)簽以及其偽類所起的作用，換句話說就是使用不同的樣式繪制出來不同的圖形效果，接下來最主要的是樣式的制作。

CSS Code

如果你看明白了上圖的標(biāo)記，那么您就很容易整明白下面樣式所起的功能效果，下面我們分成幾個(gè)部分來展示其制作過程，以及所呈現(xiàn)的效果：

1、日歷主體制作

第一步很簡(jiǎn)單，制作日歷的主體面板效果：

復(fù)制代碼

代碼如下:
.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”標(biāo)簽配合“:before”和“:after”來繪制日歷的圓孔效果:

復(fù)制代碼

代碼如下:
.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;
}

上一篇：也談?wù)勛飷旱腍aslayout haslayout解決之道

下一篇：很實(shí)用的輕量純css多級(jí)下拉菜單

發(fā)表評(píng)論

共有條評(píng)論