CSS3 漸層語法產生器﹍計數器背景實作(1)

使用 CSS 產生的漸層效果很棒，不過這些複雜的語法參數對一般使用者而言，跟看到天書是差不多的。在這個「Blogger 中文社群討論串」 +綜合口味 推薦了這個線上 CSS 漸層語法產生器「Ultimate CSS Gradient Generator」，且 +Mark X 也是愛用者。相信有了行家的背書，在眾多線上產生器之中，這會是絕佳的選擇，且 WFU 試用後也覺得效果很好、操作便利。



本篇將以上圖這個 Blogger 官方流量計數器的背景圖為例，實際操作如何藉由這個線上工具，來產生此效果的漸層背景圖。

一、為何需要使用 CSS 漸層效果

對 CSS 漸層語法不熟悉時，要自己刻出漸層效果，還不如使用影像編輯軟體(例如 PhotoShop)操作，不但效果好、熟練後速度也不慢。

不過如果你「重視網頁載入效能」的話，網站應該盡可能的減少使用圖片，尤其在行動裝置逐漸成為主流的情況下。不使用圖片除了可減少 http 請求、還可降低傳輸量，這也是使用「CSS 按鈕」能帶來的好處。

而本文介紹的線上工具，配合教學內容、操作熟練後，處理的速度可是遠勝「使用影像編輯軟體 + 上傳圖片 + 取得圖片路徑」這樣的流程。

二、參考模版(準備動作)

本篇要參考的漸層模版，是開頭秀過一次的 Blogger 官方流量統計：




這個計數器除了使用一個漸層圖片以外，其他部分都是用 CSS 做出來的效果，而這個使用的漸層圖片長得像以下這樣：




使用這個漸層圖片的麻煩之處在於，這是「CSS Sprites 圖片合併技術」的產物，我們要用到的只是四張小圖片中的最左邊那一個漸層圖案，而其寬、高值是固定的，那麼使用上彈性就受到限制，我們不容易將這個 CSS sprites 漸層圖案，套用在各種尺寸的漸層背景。

現在我們將圖片放大倍數檢視，特別注意最左邊的漸層圖案──

• 現在可以清楚看到上、下兩半部，各佔 50% 同樣的漸層圖案
• 取得漸層的起始、結束色碼，如圖中標示的 "#4D4D4D"、"#050505"

取得以上數據後，就能將此漸層圖案 CSS 化 → 代表整個計數器能完全 CSS 化 → 代表此計數器做成任何尺寸、放大縮小都不是難事了

三、操作流程

首先進入官網──


名稱：Ultimate CSS Gradient Generator
網址：http://www.colorzilla.com/gradient-editor/





畫面大致如上圖，以下根據操作的流程來介紹各個部分。




在「Preview」的部分會顯示即時效果，我們可在紅色箭頭處拉動顯示區塊的大小，不過要注意的是，這個區塊的尺寸跟產生的 CSS 語法沒有關係，只是讓我們自行想像一下背景圖的效果。

接下來可選擇要漸層的方向，本文的計數器是「由上而下」的兩段式漸層效果，因此「由上而下」需要選擇 "vertical"(垂直) 效果。




這裡是最關鍵的操作，需要先瞭解以下觀念：

• 上圖中央藍色漸層的長方條，上方有兩個標記、下方有四個標記。上方標記為透明度設定、下方標記為漸層標記。
• 一組設定需要用到兩個標記(起始值、結束值)
• 需要兩段式漸層，就必須有四個標記；三段式漸層，就必須有六個標記；以此類推(不需要的標記可按 delete 刪除)。
• 想要增加標記，在圖中自訂位置按下滑鼠即可自動產生，再用滑鼠拖曳到適合的位置。

以下為操作方法，請按圖中 A~C 的順序：

• A. 按下第一個標記，可進行細項設定
• B. 按下這裡，可設定起始顏色(參照下一圖的畫面)
• C. 可用滑鼠拖曳標記的位置，也可在此輸入漸層的起始位置百分比

接續前一圖的步驟 B，可使用各種方式調出自訂的顏色，例如圖中的色盤、HSB、RGB，或是直接填入色碼。

從「二、參考模版(準備動作)」記錄的數據，這裡我們要填入的是計數器漸層起始色碼 "#4D4D4D"。




接下來按照一樣的流程，我們繼續設定好第二個標記，填入漸層結束色碼 "#050505"，就可看到前半段的漸層效果已經產生出來了。




繼續將第三個、第四個標記設定完成，右邊就會自動產生我們需要的 CSS 碼了。

若下方的「Color Format」選擇 "hex"，CSS 中色碼的形式會跟我們以上輸入的色碼字串一致。如果習慣使用不一樣的色碼型態，請自行調整「Color Format」。

如果想保留這次的設定，上方可填入名稱後，按「Save」儲存，那麼下次進入這個網站時，可直接選擇這次的設定來使用。

四、計數器效果展示

使用「Chrome」可以偷看到 Blogger 官方計數器的 CSS 碼。將這些 CSS 整理一下，刪減為易於套用的內容、替換漸層部分的 CSS，以下為使用範例：

<style>
.gradient {
background: #4d4d4d; /* Old browsers */
background: -moz-linear-gradient(top, #4d4d4d 0%, #050505 50%, #4d4d4d 50%, #050505 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#050505), color-stop(50%,#4d4d4d), color-stop(100%,#050505)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* IE10+ */
background: linear-gradient(to bottom, #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#050505',GradientType=0 ); /* IE6-9 */
}
.digit_no {
color: #fff;
font-family: 'Trebuchet MS';
font-size: 24px;
font-weight: bold;
width: 22px;
height: 28px;
line-height: 28px;
border: 1px solid #fff;
display: inline-block;
margin-left: -1px;
text-align: center;
position: relative;
}
.digit_no:after {
content:'';
border-bottom: 1px solid #fff;
border-top: 1px solid #000;
filter: alpha(opacity=65);
height: 0;
left: 0;
opacity: .65;
position: absolute;
top: 13px;
width: 22px;
}
</style>

<span class="digit_no gradient">7</span>

• 所有紅色字串就是從「CSS 漸層語法產生器」複製而來的 CSS 內容
• 藍字 gradient 為引用的漸層效果 class 名稱
• 綠字 7 就是計數器內的數字

以上語法參數的呈現效果如下：

7


想要多顯示幾個數字，只要複製最後一行 HTML 語法，並改變數字即可，例如使用以下 HTML：

<span class="digit_no gradient">2</span><span class="digit_no gradient">0</span><span class="digit_no gradient">1</span><span class="digit_no gradient">5</span>

呈現效果如下：

2015

五、後續計數器應用

實際上計數器每次產生的數字都不同，所以自然無法將計數器的 HTML 內容寫死，否則每次只能呈現一樣的數字。而要將漸層語法套用到真的計數器來使用，得另外使用 javascript，才能處理動態產生的數字，再放到 HTML 語法裡面。

關於這個主題，下一篇會說明如何用 js 將一組數字，拆成個別的單一數字，再套用計數器模組 CSS，呈現最終完整的計數器樣貌。

更多 CSS 相關技巧：