17 款提高編碼效率的 CSS 工具

源地址：http://www.oschina.net/news/41773/17-css-tools

摘要：作為WEB前端開發人員，你的工作可能很大一部分都在編寫CSS代碼，為了提高前端開發人員編寫CSS代碼的效率，編程文庫從 網上搜集了17款可以提高你CSS代碼效率的CSS工具，它們可以協助你快速產生CSS菜單、動畫影像、按鈕、滑塊、動畫文本、CSS形 狀代碼。全文請看：17款提高編碼效率的CSS工具。

不用介紹，軟體開發界的“地球人”都知道CSS，因為它是最流行的一種樣式設計語言。學習和使用CSS已經不再是一件棘手的事，因為在網上可以獲得很多資訊教程和CSS工具。這些工具有助於你創造出有用的、有創新的Web應用程式，同時節省更多開發步驟和時間。

文章中收集了加速編碼的17款最好的CSS工具；以協助開發人員和設計人員簡化工作。利用它們可以產生CSS菜單、動畫影像、按鈕、滑塊、動畫文本、CSS形狀代碼、圖層還有很多其他的。希望這個列表對你的開發工作有用。

1. Topcoat : CSS for Clean and Fast Web Apps

 

Topcoat是一個程式庫，包含CSS類用於建立表格元素、按鈕、複選框、滑塊等。這個輕量級的工具可以讓你設計的網頁或者App看起來相當不錯。

2. PCSS : Shortcut Oriented Server SideCSS3 Preprocessor

 

PCSS是一款由PHP驅動的CSS前置處理器，它可以協助開發人員通過定義變數、類測試、預設單元和服務端瀏覽器細節，以達到快速編寫CSS代碼的目的。PCSS使用PHP5來實現服務端處理，因此正在啟動並執行網站伺服器上需要具備這個PCSS版本。

3. Skeleton

 

Skeleton是一款較小的CSS檔案集合體，它可以協助開發人員快速建立適配任何尺寸的網站，無論是在17寸筆記本螢幕或iPhone上。Skeleton的構建基於三大規律：快速響應到手機，迅速啟動和獨一無二的風格。

4. CSS Menu Maker

 

這個工具協助使用者輕鬆建立CSS下移菜單。CSS菜單編輯器提供網路專業人員和工具，協助開發人員構建個人化的、跨瀏覽器相相容的CSS菜單，同時還為所有的CSS菜單和裝置使用者提供原始碼，以便下載和調整代碼。

5. Sencha Animator

這是一個傳統型應用程式，允許使用者建立專門用在觸控螢幕行動裝置和Webkit瀏覽器上的CSS3動畫。 Sencha Animator還可以協助使用者建立動畫文本、圖片、傾斜按鈕和內嵌分析。

6. CSS Form Code Generator

 

CSS Form Code Generator可以製作布局好看的表格，也可以製作出布局簡單的色彩表。這個“Code Maker”產生的CSS布局代碼也可以為這些表格添枝加葉。

7. PrefixmyCSS

 

PrefixmyCss可以簡簡單單的為CSS3代碼添加首碼。使用者必須複製CSS代碼到視窗才能添加首碼，供應商已提前在代碼上添加了首碼，使用者可安全放心的替換舊的代碼。

8. Sky CSS Tool

 

Sky CSS Tool允許你建立CSS類時幾乎不需要使用手寫代碼。使用者可能需要與JavaScript相相容的瀏覽器來確保正常運行。

9. Spritemapper

 

Spritemapper是一款可以合并多個圖片的應用程式，為相應的片段產生CSS精確位置。此款工具可以協助開發人員最佳化可用空間和載入時間。

10. CSS Compressor

 

CSS Compressor通過壓縮CSS來提高載入速度，還可以節約頻寬。依據你對CSS的壓縮程度和代碼的易讀性，它提供了三個層級的壓縮。

11. Patternify

 

Patternify可以協助你產生漂亮的CSS模板。

12. CSS Text Shadow

CSS Text Shadow協助使用者產生漂亮的文字陰影。

13. CSS3 Pie

 

CSS3 Pie在IE 6-9下可以渲染出最有用的CSS裝飾功能。

14. The Web Font Combinator

 

該工具旨在瀏覽器下快速預覽字型，無需一遍遍的重新整理。近些年出版的書也都讓標題字型緊挨著本文字型，這也是一種網路再創作的嘗試。

15. 3D Transforms

 

CSS 3D變換器是一款線上工具，使用者使用它可以執行多種層級的3D轉換。目前此工具還處在實驗模式下，在使用的時候，需要在瀏覽器下制定瀏覽器首碼。

16.  Quick Form Builder

 

Quick Form Builder有助於便捷地建立CSS表單。

17.  Layer Style

 

這是一款HTML5 App，用一種直觀的方式建立CSS3。其內建的Colorpicker允許使用者選擇各種顏色，還便於使用者拖放圖片到頁面，使用它們作為背景或挑選他們喜歡的顏色。