使用css如何製作時間ICON方法實踐_html5教學技巧

最近我在重新設計自己的部落格站點，決定用一個日曆樣式的icon顯示時間。以前的解決方案通常是用背景圖片，感謝css3，現在我們用css3就能實現這樣的功能。我將會用到一些linear-gradients, border radius 和 box shadow這些屬性來取代先前的photoshop設計。

photoshop 概念圖
 
許多設計者採用直接在瀏覽器上設計的方式，但我還是比較喜歡先做photoshop的概念圖的方式。雖然現在很多效果可以直接用css實現，但用photoshop設計效果的方式比不斷嘗試修改css來最終達到你想要的效果的方式簡單很多。
 
先建立一個圓角矩形，設定圓角半徑為10px，之後我們會用css的border-radius屬性實作。
 
為矩形添加垂直方向的漸變，漸變顏色是從#dad8d8 到 #fcfcfc。
 
設定1像素的描邊，顏色是#e3e3e3
 
最後加上向下的陰影效果，透明度為20%，0像素的距離和15像素的大小。這些效果在css中將會用box-shadow屬性實作。
 
複製剛才的長方形，移除上邊的部分。修改漸變，顏色從#790909 到 #d40000，填滿新建立的矩形，這部分將要放置月份資訊。
 
設定一個內陰影來表示上邊框，顏色為#a13838，100%透明度，3px的距離和0px的大小。
 
用photoshop的字體工具設定日曆icon上半部時間內容的字體效果，字體為Helvetica，顏色為#9e9e9e。
 
在下面紅色部分輸入月份訊息，字體設定為寬，顏色為白色。

photoshop的模型就完成了。以前的話，我們會把圖片抽出來當背景，再在上面寫上html的數字，但現在所有這些都可以用css實現。
HTML結構

25 May

這次時間ICON demo的html非常簡單。我們會用有class為‘date’的div作為容器，然後用p標籤來表示日期數字。天和月份在我們的設計裡用不同大小的字元表示，所以我們會標籤來區別對待不同元素。
css樣式

複製程式碼

碼🎜>.date {

width: 130px; height: 160px;

background: #fcfcfc;
background: linear-gradient(top, #fcfcfcfc 0%,#dad8d8 100%)ground; : -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
}



 
css樣式首先設定了整個容器的高和寬，透過css的gradient又可以很容易的實現漸變的效果。

複製程式碼

程式碼如下: .date {

; 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 -moz-border-radius: 10px;
-webkit-border-radius: 10px;
}


 
用border屬性可以實現photoshop中1px邊框效果，然後用border-radius實現了圓角的效果。不要忘記加上-moz-和-webkit-前綴，以實現對舊版本瀏覽器的兼容。

複製程式碼

程式碼如下:

.date {
; 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 -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實現在photoshop設計中的下陰影效果。加入0px的水平和垂直的偏移量，增加15px的模糊度。用rgba實現對透明度的控制，在photoshop設計中的105，在這裡換成了0.1。

複製程式碼

程式碼如下:

.date p { - family: Helvetica, sans-serif;

font-size: 100px; text-align: center; color: #9e9e9e;

}

我們用我們給p標籤定義樣式，實現了為日期定義文字樣式。字體，文字大小，文字顏色都是從photoshop中拷貝得到的，text-align設定為居中。但樣式也同樣影響了月份文字，接下來我們會單獨為它定義span標籤樣式。

複製程式碼

程式碼如下:

.date sp. : #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a090%) ;
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}

紅色部分的實作是透過為span的背景設定linear-gradient屬性實現的，紅色的數值也是來自於photoshop。

複製程式碼程式碼如下:

.date sp. : #d10000;

background: linear-gradient(top, #d10000 0%, #7a0909 100%);

background: -moz-linear-gradient(top, #d10000 0%, #7a090%) ;
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
}



 
修改文字樣式，使它和設計匹配，大小設定為45px，設定為粗體字，顏色設定為白色，使用text-transform實現大寫轉換。將span標籤設定為區塊元素，這樣他就會匹配容器的大小了，並設定紅色背景。

複製程式碼

程式碼如下: .date sp. : #d10000; background: linear-gradient(top, #d10000 0%, #7a0909 100%);

background: -moz-linear-gradient(top, #d10000 0%, #7a090%) ;

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; >-webkit-border-radius: 0 0 10px 10px;
padding: 6px 0 6px 0;
}



Selebihnya ialah menambah sempadan pengepala, menggunakan gaya atas sempadan dan menggunakan atribut jejari sempadan untuk melaksanakan dua penjuru bulat bawah. Atribut pelapik kecil boleh memberikan sedikit ruang antara bahagian atas dan bawah teks bulan dan elemen lain.
Keserasian penyemak imbas

Walaupun sifat css yang lebih baik boleh membantu kami mencapai kesan kecerunan dan bayangan dalam photoshop, kami masih perlu menghadapi keperluan sebelumnya dari pereka web Menghadapi isu dengan keserasian penyemak imbas.