2014年12月22日

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

A+
使用 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 相關技巧:

5 則留言:

  1. 這個功能確實很好用!我也將它用在「展開收和」功能裡面,效果相當棒!

    回覆刪除
    回覆
    1. 「展開收合」背景圖嗎?目前其實我只弄了計數器的漸層背景,應該也要找時間來做一些漸層的背景圖~XD

      刪除
  2. 是的!我這篇http://www.hairblog.tw/2014/09/girl.hair1.html就有用上你的「展開收合」以及這篇的css漸層!

    回覆刪除
    回覆
    1. 看到了~貼漸層語法真的滿容易的 :)

      刪除
    2. 真的!我也要找時間調整一下,部落格內還有幾處的部份是用圖片顯示的

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。