HTML5實踐使用css製作時間 ICON

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

photoshop 概念圖

首先建立乙個圓角矩形，設定圓角半徑為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

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

.date

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

.date

最後一部分**，通過box-shadow實現在photoshop設計中的下陰影效果。新增0px的水平和垂直的偏移量，增加15px的模糊度。用rgba實現對透明度的控制，在photoshop設計中的105，在這裡換成了0.1。

.date p

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

.date p span

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

.date p span

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

.date p span

剩下的就是新增頭部邊框，用border-top樣式實現，還有就是用border-radius屬性實現下部兩個圓角。一點點的padding屬性可以讓月份文字上下和其他元素有些間隔。

瀏覽器相容性

儘管css改進的屬性可以幫助我們實現photoshop中漸變和陰影的效果，但是我們仍然要面對以前web設計師要面對的問題，瀏覽器相容性。

HTML5實踐 使用css製作時間 ICON