HTML5實作-使用css製作時間ICON的具體詳解（圖）

　　最近我在重新設計自己的部落格站點，決定用一個日曆樣式的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結構

<p class="date">
    <p>25 <span>May</span></p></p>

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

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

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

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

.date p {
    font-family: Helvetica, sans-serif;
    font-size: 100px; text-align: center; color: #9e9e9e;
}

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

.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%);
}

 

　　红色部分的实现是通过为span的背景设置linear-gradient属性实现的，红色的数值也是来自于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;
}

 

　　修改文字样式，使它和设计匹配，大小设置为45px，设置为粗体字，颜色设置为白色，使用text-transform实现大写转换。将span标签设置为块元素，这样他就会匹配容器的大小了，设置红色背景。

.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样式实现，还有就是用border-radius属性实现下部两个圆角。一点点的padding属性可以让月份文字上下和其他元素有些间隔。

　　浏览器兼容性

　　尽管css改进的属性可以帮助我们实现photoshop中渐变和阴影的效果，但是我们仍然要面对以前web设计师要面对的问题，浏览器兼容性。

 

以上是HTML5實作-使用css製作時間ICON的具體詳解（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！