css

以往在網頁想要利用漸層的色彩來美化時，若要使用 CSS 需要考慮地的因素很多，各家瀏覽器所支援的語法也不盡相同，需要不斷的微調，最後乾脆使用圖片一勞永逸。現在 CSS3 開始普及，想要使用漸層色彩，越見方便，CSS Gradient Background Maker 是微軟所推出利用 CSS 語法漸層背景產生器，只要選好顏色，便能產生不同漸層方向，且支援 IE、Mozilla Firefox、Opera、Safari/Chrome 等瀏覽器的 CSS 語法。

在網頁的設計過程中，免不了都要引用到 CSS 樣式表，如何才能設計出適合自己網頁版型與正確的使用 CSS 語法，可以來試試這個 CSS Lint 線上的 CSS 樣式表檢測服務，使用方式相當簡單，只要將寫好的 CSS 語法，複製後貼到 CSS Lint 的檢查框內，便會幫你指出哪一行的語法不適合及修正建議，相當適合 CSS 新手在入門時所使用的工具。

網頁加載時，如果可以給予提示，告訴訪客網站確實有按要求正在動作，相信訪客會比較願意等候，因此，在很多的網站中，會看到利用百分比的進度條、loading 的動畫圖示來顯示，直到加載完成，以 loading 的動畫圖示來說，可以使用 GIF 動畫圖檔來製作，不過前提是須要有 GIF loading 圖檔，另外一種則是利用 CSS 來製作，Tobiasahlin 這個旗下的 SpinKit 網站，提供了以 CSS 為主的 loading 動畫圖示，並提供 HTML 與 CSS 的語法讓有需要的用戶快速套用。

很難想像英文字母也能利用 CSS 來建立，CSS SANS 利用純 CSS 建立包含 A 到 Z 的所有英文字母（沒有小寫），而且提供開放原始碼免費下載，讓網頁設計師只要透過網頁便可呈現。

網頁在呈現方框、線條、文字等元素時，如果可以適時的加入陰影，就可讓該元素有立體效果的展現，Beautiful CSS box-shadow examples 這個網站做出了 80 多個 box-shadow 模板，使用者僅需要挑選適合自己網頁呈現的樣式，完全不必再經過任何的調整，就可以將 CSS 語法帶走，套用到自己的網頁內，快速又方便。

CSS Scanner 是一款極具便利性和直觀性的瀏覽器擴充功能，它能夠直接顯示出網頁上任何 HTML 元素所套用的 CSS 語法，操作上，只需在網頁上滑動滑鼠游標到任意 HTML 元素上，CSS Scanner 就會立即顯示出該 HTML 元素所使用的 CSS 語法及其相關屬性，並讓使用者能夠輕鬆地複製該語法，以供後續使用。

「提示訊息框」常上網的人應該都有體驗過，也就是滑鼠指標指到某一物件，會出現提示訊息，告訴用戶該如何操作或其意義，如果想要在自己的網頁中加入這種提示訊息，也不用從頭打造起，可以透過 Menucool 這個網站所製作的 CSS Tooltip Generator 這個 Tooltip 產生器，只要對其提供的參數進行調整，就能輕鬆製作出符合各大主流瀏覽器都適用的提示訊息框。

瀏覽網頁時，當我們看到帶有 ? 的圖示符號，通常將滑鼠指標指過去就會出現提示框，而其內容是解釋其意義或是提示使用者該如何操作等，而其出現的位置，可能會是在 ? 圖示符號的上、下、左、右。對 CSS 的初學者而言，要產生這樣的提示框並不容易，但我們可以透過一些輔助工具像是 CSS Tooltip Generator 這個免費網站，使用者僅需修改簡單的參數，便可以快速產生自己理想中的提示框，然後複製其產生的 CSS 語法，就可以應用到網頁內，相當方便。

如果網頁要使用一些動畫圖示，例如滑鼠移動按鈕上方，按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示，這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現，而現在你也可以單純利用 CSS 語法就可辦到，CSS WAND 提供 Hover、Loading 類型的 CSS 動畫，只要複製該範例的 CSS 語法，就可以將範例應用到自己的網頁，相當方便。

在 Windows、Android、IOS 或是網頁上經常都可以看到滑動型的開/關切換按鈕，如果自己在網頁上要做出如此效果的按鈕，免用 Javascript 就可以辦到，proto.io 網站提供滑動開/關切換按鈕 CSS 語法產生器，透過介面輸入所需條件，便可產生 CSS 語法，方便你應用在網頁上。

寫網頁時難免會有需要一些動畫效果，例如當滑鼠指標在按鈕、圖片、功能表上或離開時，或是希望做出具有專業水準個人檔案、新聞、產品卡時，如果是初學者想要從無到有，可能需要花費較長時間，要是可以參考別人已做出的效果，取得其程式碼再來修改成自己想要的效果，這樣才能事半功倍。littlesnippets 這個網站提供按鈕、圖片、Logo、News Card、Menu、Profile Card ....等各式各樣的 CSS + JQuery 效果，且每個都有效果展示，更提供 HTML、CSS、JQuery 完整的範例程式碼，用戶只需取得這些程式碼，稍加修改，就可以在自己網頁呈現，相當方便。

漸層色彩在視覺上可以產生層次感，這對常看單一顏色的人來說，會更加有吸引力，以往要做出漸層色，設計師都會傾向於使用圖片，原因在於各家瀏覽器對 CSS 所支援的程度不相同，造成觀感不佳的問題，而如今瀏覽器對 CSS 3 基本上都支援的情況下，要達成純 CSS 語法就做出漸層色也變得相對簡單。Color gradient generator 這個免費網站提供 light、deep、rainbow 及 intense 四種漸層樣式、漸層方向、漸層大小等可視化工具讓讓用戶自行調整，完成後，就可產生 CSS 語法。