ColorBug 螢幕取色工具,可產生漸層色 CSS 樣式表(免安裝)

ColorBug 螢幕取色工具,可產生漸層色 CSS 樣式表(免安裝)

美工的配色,佔有成品成功的關鍵要素,想要取得好的配色效果,除了經驗外,若能透過工具來協助,取色就更加輕鬆簡單,ColorBug 是一套螢幕的取色碼的免費應用工具,透過拖曳相機圖示,可取到螢幕任何位置的顏色,支援 HEX、RGB 及 Delphi、C++、Visual StudioIDE 等程式的色碼表,除此之外,ColorBug 還有項很特別的功能,就是能製作所選顏色的漸層色,並為該漸層色產生 CSS 樣式表,方便你應用到網頁中。

Copy & Paste CSS 線上提供 Buttons、Box-shadows 及 Color palettes 已搭配好的 CSS 樣式,複製就可以使用

Copy & Paste CSS 線上提供 Buttons、Box-shadows 及  Color palettes 已搭配好的 CSS 樣式,複製就可以使用

階層樣式表 (Cascading Stylesheets;CSS) 主要用來塑造網站的特殊風格,例如有段文字要用紅色來標明重點或是網頁版面要呈現2欄或 3欄的架構等等,對初學者而言參考別人寫好的 CSS 語法,可以快速增加對 CSS 的靈活運用,「Copy & Paste CSS」 是個提供 Buttons 及 Box-shadows 的模板網站,使用者可以透過其展示的樣式,如果符合自己的需求,便可以複製其 CSS語法,然後套用到自己的網頁,另外,該網站的 Color palettes 還提供已搭配好的顏色組合,供你複製帶走。

CSS Grab n' Go Editor 可視化 CSS 語法產生器

CSS Grab n&#39 Go Editor 可視化 CSS 語法產生器

階層樣式表 (Cascading Stylesheets,CSS) ,最主要的功能就是讓 HTML 網頁上的元素套用不同的樣式,讓同一個元素可以有不同的樣貌呈現,不過對於初學者而言,要了解整個 CSS 語法規則並不容易,除了時間之外,如果有輔助的工具可以協助,相信可以更快的跨過門檻,CSS Grab n' Go Editor 是個可視化的 CSS 語法編輯器,其主要鎖定 border、box-shadow、text、filter、transform 常用屬性進行變化,用戶可以透過可操作的面板進行屬性值變更,且立刻可看到所產生的變化,完成整個調整,還可以快速產生 CSS、SASS、SCSS 及 LESS 相關語法,快速套用到元素上。

CSS Gradient Background Maker 漸層色 CSS 代碼產生器,適用 Firefox,IE,Chrome,Safari,Opera

CSS Gradient Background Maker 漸層色 CSS 代碼產生器,適用 Firefox,IE,Chrome,Safari,Opera

在網頁想要呈現顏色漸層的效果,為了避免各大瀏覽器版本所支援的 CSS 的問題,通常會使用圖片來解決,若是要使用 CSS 樣式表來呈現,則可以試試這個由微軟做的漸層色 CSS 代碼產生器,支援從各角度的漸層,適用 Firefox、IE、Chrome(10,11+)、Safari、Opera 等主流瀏覽器,簡單好用。

CSS Lint 線上 CSS 樣式表檢測免費服務,讓 CSS 語法更正確精簡

CSS Lint 線上 CSS 樣式表檢測免費服務,讓 CSS 語法更正確精簡

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

CSSDesk 可在線上編輯 CSS 並提供即時預覽的免費服務

CSSDesk 可在線上編輯 CSS 並提供即時預覽的免費服務

CSS (Cascading Style Sheets) 這種可層疊的樣式表,被應用在網頁的排版與美觀,對於網頁編輯的初學者來說,大概都會利用網頁元素中的 Style 屬性,直接定義 CSS,因為這樣最直觀也最方便, 若想要學習 CSS 語法時,當然也是能寫完就能即時預覽是最直觀的,CSSDesk 便提供了一個可在線上編輯 CSS 並提供即時預覽的免費服務,讓你所學立即能應用,值得一提的是,一進入 CSSDesk 網站後,其所提供的範例就是一個可四周圓角的 CSS 範例,讓不享用圖片來做圓角框的設計師,可以立即運用。

Grid-Generator 可自訂網頁結構的版型產生器

Grid-Generator 可自訂網頁結構的版型產生器

網路上有很多免費的網頁模板可供下載,套用的方式也不複雜,但如要修改其中的版型結構,可能就有點門檻,而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾,但不論利用何種版型,如要套用模板,就需要找到相類似的模板,不然就是自己改,太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式,視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等,到最後產生該網頁版型的 CSS 樣式表,讓你不論用何種的網頁開發工具,都能輕鬆靈活的套用該 CSS,加快生產力。

Primary CSS 免費用 CSS 架構好你的網頁佈局

Primary CSS 免費用 CSS 架構好你的網頁佈局

使用 CSS 來分割網頁主要架構時,通常都會碰到不同瀏覽器有不同的支援程度,同樣的 CSS 佈局,在不同的瀏覽器內排版的方式有可能不一樣,若自己不是太精通 CSS 時,可以來試試 Primary CSS 這個免費的網站所提供的 22 種常見的網頁樣式,只要點擊欲使用的排版樣式,便可下載 CSS 樣式表及 HTML 原始碼,方便你後續的應用,相當方便。

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

如何在 Web 網頁內也可以使用像 Windows 應用程式內階層選單,將網頁內的功能進行歸類,方便使用者呢?方法很多,若是透過 ASP.net 可使用裡面的控制項元件,也可以使用 jQuery、JavaScript ,也可以使用 DHTML ...等,若是不想這麼麻煩,可以試試這套 Pure CSS Menu Maker 免費軟體,來產生純 CSS 樣式的下拉式選單。