使用css如何制作時(shí)間ICON方法實(shí)踐
發(fā)布時(shí)間：2012-11-12 10:29:29 作者：佚名 
我要評(píng)論
我要評(píng)論最近我在重新設(shè)計(jì)自己的博客站點(diǎn)，決定用一個(gè)日歷樣式的icon顯示時(shí)間。以前的解決方案一般是用背景圖片，感謝css3，現(xiàn)在我們用css3就能實(shí)現(xiàn)這樣的功能；接下來將為您詳細(xì)介紹
最近我在重新設(shè)計(jì)自己的博客站點(diǎn)，決定用一個(gè)日歷樣式的icon顯示時(shí)間。以前的解決方案一般是用背景圖片，感謝css3，現(xiàn)在我們用css3就能實(shí)現(xiàn)這樣的功能。我將會(huì)用到一些linear-gradients, border radius 和 box shadow這些屬性來代替以前的photoshop設(shè)計(jì)。
photoshop 概念圖
很多設(shè)計(jì)者采用直接在瀏覽器上設(shè)計(jì)的方式，但是我還是更喜歡先做photoshop的概念圖的方式。雖然現(xiàn)在很多效果可以直接用css實(shí)現(xiàn)，但是用photoshop設(shè)計(jì)效果的方式比不斷嘗試修改css來最終達(dá)到你想要的效果的方式簡(jiǎn)單很多。
首先創(chuàng)建一個(gè)圓角矩形，設(shè)置圓角半徑為10px，之后我們會(huì)用css的border-radius屬性實(shí)現(xiàn)。
為矩形添加垂直方向的漸變，漸變顏色是從#dad8d8 到 #fcfcfc。
設(shè)置1像素的描邊，顏色是#e3e3e3
最后添加向下的陰影效果，透明度為20%，0像素的距離和15像素的大小。這些效果在css中將會(huì)用box-shadow屬性實(shí)現(xiàn)。
復(fù)制剛才的矩形，移除上邊的部分。修改漸變，顏色從#790909 到 #d40000，填充新創(chuàng)建的矩形，這部分將要放置月份信息。
設(shè)置一個(gè)內(nèi)陰影來表示上邊框，顏色為#a13838，100%透明度，3px的距離和0px的大小。
用photoshop的字體工具設(shè)置日歷icon上半部分時(shí)間內(nèi)容的字體效果，字體為Helvetica，顏色為#9e9e9e。
在下面紅色部分輸入月份信息，字體設(shè)置為寬，顏色為白色。
photoshop的模型就完成了。以前的話，我們會(huì)把圖片抽出來作為背景，再在上面寫上html的數(shù)字，但是現(xiàn)在所有這些都可以用css實(shí)現(xiàn)。
HTML結(jié)構(gòu)
<div class="date">
<p>25 <span>May</span></p>
</div>
這次時(shí)間ICON demo的html非常簡(jiǎn)單。我們會(huì)用帶有class為‘date’的div作為容器，然后用一個(gè)p標(biāo)簽來表示日期數(shù)字。天和月份在我們的設(shè)計(jì)里用不同大小的字符表示，所以我們會(huì)<span>標(biāo)簽來區(qū)別對(duì)待不同元素。
css樣式
.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
}
css樣式首先設(shè)置了整個(gè)容器的高和寬，通過css的gradient又可以很容易的實(shí)現(xiàn)漸變的效果。
.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
用border屬性可以實(shí)現(xiàn)photoshop中1px邊框效果，然后用border-radius實(shí)現(xiàn)了圓角的效果。不要忘記加上-moz-和-webkit-前綴，以實(shí)現(xiàn)對(duì)老版本瀏覽器的兼容。
.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}
最后一部分代碼，通過box-shadow實(shí)現(xiàn)在photoshop設(shè)計(jì)中的下陰影效果。添加0px的水平和垂直的偏移量，增加15px的模糊度。用rgba實(shí)現(xiàn)對(duì)透明度的控制，在photoshop設(shè)計(jì)中的105，在這里換成了0.1。
.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}
我們用給p標(biāo)簽定義樣式，實(shí)現(xiàn)了為日期定義文字樣式。字體，文字大小，文字顏色都是從photoshop中拷貝得到的，text-align設(shè)置為居中。但是樣式也同樣影響了月份文字，接下來我們會(huì)單獨(dú)為它定義span標(biāo)簽樣式。
.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}
紅色部分的實(shí)現(xiàn)是通過為span的背景設(shè)置linear-gradient屬性實(shí)現(xiàn)的，紅色的數(shù)值也是來自于photoshop。
.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
}
修改文字樣式，使它和設(shè)計(jì)匹配，大小設(shè)置為45px，設(shè)置為粗體字，顏色設(shè)置為白色，使用text-transform實(shí)現(xiàn)大寫轉(zhuǎn)換。將span標(biāo)簽設(shè)置為塊元素，這樣他就會(huì)匹配容器的大小了，設(shè)置紅色背景。
.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
padding: 6px 0 6px 0;
}
剩下的就是添加頭部邊框，用border-top樣式實(shí)現(xiàn)，還有就是用border-radius屬性實(shí)現(xiàn)下部?jī)蓚€(gè)圓角。一點(diǎn)點(diǎn)的padding屬性可以讓月份文字上下和其他元素有些間隔。
瀏覽器兼容性
盡管css改進(jìn)的屬性可以幫助我們實(shí)現(xiàn)photoshop中漸變和陰影的效果，但是我們?nèi)匀灰鎸?duì)以前web設(shè)計(jì)師要面對(duì)的問題，瀏覽器兼容性。
photoshop 概念圖
很多設(shè)計(jì)者采用直接在瀏覽器上設(shè)計(jì)的方式，但是我還是更喜歡先做photoshop的概念圖的方式。雖然現(xiàn)在很多效果可以直接用css實(shí)現(xiàn)，但是用photoshop設(shè)計(jì)效果的方式比不斷嘗試修改css來最終達(dá)到你想要的效果的方式簡(jiǎn)單很多。
首先創(chuàng)建一個(gè)圓角矩形，設(shè)置圓角半徑為10px，之后我們會(huì)用css的border-radius屬性實(shí)現(xiàn)。
為矩形添加垂直方向的漸變，漸變顏色是從#dad8d8 到 #fcfcfc。
設(shè)置1像素的描邊，顏色是#e3e3e3
最后添加向下的陰影效果，透明度為20%，0像素的距離和15像素的大小。這些效果在css中將會(huì)用box-shadow屬性實(shí)現(xiàn)。
復(fù)制剛才的矩形，移除上邊的部分。修改漸變，顏色從#790909 到 #d40000，填充新創(chuàng)建的矩形，這部分將要放置月份信息。
設(shè)置一個(gè)內(nèi)陰影來表示上邊框，顏色為#a13838，100%透明度，3px的距離和0px的大小。
用photoshop的字體工具設(shè)置日歷icon上半部分時(shí)間內(nèi)容的字體效果，字體為Helvetica，顏色為#9e9e9e。
在下面紅色部分輸入月份信息，字體設(shè)置為寬，顏色為白色。
photoshop的模型就完成了。以前的話，我們會(huì)把圖片抽出來作為背景，再在上面寫上html的數(shù)字，但是現(xiàn)在所有這些都可以用css實(shí)現(xiàn)。
HTML結(jié)構(gòu)
<div class="date">
<p>25 <span>May</span></p>
</div>
這次時(shí)間ICON demo的html非常簡(jiǎn)單。我們會(huì)用帶有class為‘date’的div作為容器，然后用一個(gè)p標(biāo)簽來表示日期數(shù)字。天和月份在我們的設(shè)計(jì)里用不同大小的字符表示，所以我們會(huì)<span>標(biāo)簽來區(qū)別對(duì)待不同元素。
css樣式
復(fù)制代碼
代碼如下:.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
}
css樣式首先設(shè)置了整個(gè)容器的高和寬，通過css的gradient又可以很容易的實(shí)現(xiàn)漸變的效果。
復(fù)制代碼
代碼如下:.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
用border屬性可以實(shí)現(xiàn)photoshop中1px邊框效果，然后用border-radius實(shí)現(xiàn)了圓角的效果。不要忘記加上-moz-和-webkit-前綴，以實(shí)現(xiàn)對(duì)老版本瀏覽器的兼容。
復(fù)制代碼
代碼如下:.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}
最后一部分代碼，通過box-shadow實(shí)現(xiàn)在photoshop設(shè)計(jì)中的下陰影效果。添加0px的水平和垂直的偏移量，增加15px的模糊度。用rgba實(shí)現(xiàn)對(duì)透明度的控制，在photoshop設(shè)計(jì)中的105，在這里換成了0.1。
復(fù)制代碼
代碼如下:.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}
我們用給p標(biāo)簽定義樣式，實(shí)現(xiàn)了為日期定義文字樣式。字體，文字大小，文字顏色都是從photoshop中拷貝得到的，text-align設(shè)置為居中。但是樣式也同樣影響了月份文字，接下來我們會(huì)單獨(dú)為它定義span標(biāo)簽樣式。
復(fù)制代碼
代碼如下:.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}
紅色部分的實(shí)現(xiàn)是通過為span的背景設(shè)置linear-gradient屬性實(shí)現(xiàn)的，紅色的數(shù)值也是來自于photoshop。
復(fù)制代碼
代碼如下:.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
}
修改文字樣式，使它和設(shè)計(jì)匹配，大小設(shè)置為45px，設(shè)置為粗體字，顏色設(shè)置為白色，使用text-transform實(shí)現(xiàn)大寫轉(zhuǎn)換。將span標(biāo)簽設(shè)置為塊元素，這樣他就會(huì)匹配容器的大小了，設(shè)置紅色背景。
復(fù)制代碼
代碼如下:.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
padding: 6px 0 6px 0;
}
剩下的就是添加頭部邊框，用border-top樣式實(shí)現(xiàn)，還有就是用border-radius屬性實(shí)現(xiàn)下部?jī)蓚€(gè)圓角。一點(diǎn)點(diǎn)的padding屬性可以讓月份文字上下和其他元素有些間隔。
瀏覽器兼容性
盡管css改進(jìn)的屬性可以幫助我們實(shí)現(xiàn)photoshop中漸變和陰影的效果，但是我們?nèi)匀灰鎸?duì)以前web設(shè)計(jì)師要面對(duì)的問題，瀏覽器兼容性。
相關(guān)文章
純CSS3實(shí)現(xiàn)的動(dòng)態(tài)天氣小圖標(biāo)特效源碼
是一段實(shí)現(xiàn)了各大網(wǎng)站中經(jīng)常出現(xiàn)的動(dòng)態(tài)天氣圖標(biāo)效果的代碼，本款代碼是純CSS3實(shí)現(xiàn)的天氣出太陽(yáng)，下雨，雷陣雨等動(dòng)畫圖標(biāo)特效代碼，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有興趣的朋2015-06-16
純CSS3實(shí)現(xiàn)天氣動(dòng)畫圖標(biāo)特效源碼
這是一款基于純CSS3的天氣動(dòng)畫圖標(biāo)，利用CSS3特性，我們?cè)谶@里繪制了7個(gè)關(guān)于天氣的圖標(biāo)，并且每一個(gè)圖標(biāo)都有一套代表當(dāng)前天氣的動(dòng)畫特效2014-10-20- 這篇文章主要介紹了詳解CSS中iconfont的使用,阿里巴巴的iconfont庫(kù)非常有人氣,同時(shí)也介紹了iconfont的一些缺點(diǎn),需要的朋友可以參考下2015-08-04
- 這篇文章主要介紹了使用icon fonts來輔助CSS處理圖片,在移動(dòng)端網(wǎng)頁(yè)的設(shè)計(jì)中使用較多,需要的朋友可以參考下2015-07-21
CSS3制作ajax loader icon實(shí)現(xiàn)思路及代碼
用到了兩個(gè)CSS3屬性transform、animation，實(shí)現(xiàn)原理為：transform控制每個(gè)小方塊在Y軸的偏移，rotate控制旋轉(zhuǎn)的角度，scale縮放至原大小的一半，具體祥看下文，希望對(duì)大家2013-08-25CSS3 icon font完全指南(CSS3 font 會(huì)取代icon圖標(biāo))
大家都知道現(xiàn)在各個(gè)瀏覽器都支持CSS3的自定義字體(@font-face)，包括IE6都支持，只是各自對(duì)字體文件格式的支持不太一樣。那么對(duì)于網(wǎng)站中用到的各種icon，我們就可以嘗試使2013-01-06- 關(guān)鍵字描述：訂閱 圖標(biāo) 分類 定義 RSS CSS li 隱藏 默認(rèn) span.feed-icon z-blog分類小RSS圖標(biāo)是被<span class=“feed-icon”>包圍的，可以在CSS定2009-06-06
CSS icon圖標(biāo)之純CSS實(shí)現(xiàn)帶動(dòng)畫效果的天氣圖標(biāo)
CSS3動(dòng)畫屬性并不是很多，但重點(diǎn)其實(shí)是你怎樣去運(yùn)用它，從簡(jiǎn)單的hover狀態(tài)或復(fù)雜的小動(dòng)畫，都可以巧妙的用CSS3動(dòng)畫屬性來實(shí)現(xiàn)2016-01-27
