29款免費的WEB設計中的頂級CSS工具和應用

2024-07-11 08:48:31

字體：大中小

來源：轉載

供稿：網友

1. Metro UI CSS
Metro UI CSS 是一套實現了Windows 8 的 Metro 風格界面的 CSS 框架。
WEB設計中29款免費的頂級CSS工具和應用武林網

2. CSScomb
2012 頂級CSS工具和應用 372ec4c658fb1f58 thumb

CSScomb 可使用指定的排序方法對 CSS 的屬性進行排序，提供多種版本，包括：
CSScomb Online CSScomb for Sublime Text 2 (Also in Package Control) CSScomb for Textmate CSScomb for Coda & Coda 2 CSScomb for Espresso 2 CSScomb for IntelliJIDEA/WebStorm/PyCharm CSScomb for Notepad++ CSScomb for Vim 3. CSS3Ps
CSS3Ps 是一個免費的基于云端的 Photoshop 插件，用來將 PhotoShop 的圖層轉成用 CSS3 實現的方式，外觀完全一致。您可以選擇多個圖層和圖層組，一鍵轉換。行程轉換為CSS邊框屬性。內陰影，內發光，陰影，外發光轉換成CSS的box- shadow屬性。您可以在瀏覽器中看到的結果樣式，并與其他人分享。它適用于Windows或Mac OS X和Photoshop CS3及更高版本。最重要的是，它是完全免費的！
2012 頂級CSS工具和應用 a5cf213b5bfb811b thumb

4. ResponsiveAeon
ResponsiveAeon 是一個HTML5/CSS3的框架，可以非常快速的創建響應的布局。它有一個網格系統是基于總1104px寬度12列，提供了3個非常容易理解的基本類供使用。該框架使使用@mediaqueries的，支持任何尺寸的設備。除了網格系統，也有排版，列表，表格，按鈕和表格的樣式。
2012 頂級CSS工具和應用 11f7fe4f29db1f39 thumb

5. RefineSlide
RefineSlide是一個輕量級（4KB壓縮）的jQuery插件快速整合一個響應式的、基于圖像滑塊的效果到我們的網站。滑塊使用CSS3轉換+ 3D變換（有JS備用）和有一堆有吸引力的轉變。它有一個選項，以顯示縮略圖（自動格式化和響應）或箭頭的導航（支持鍵盤操作）。
2012 頂級CSS工具和應用 874b4539b63e5610 thumb

6. Photon
Photon 是一個JavaScript庫，實現了在三維空間中的任何元素添加簡單的照明效果。為了制造出效果，它采用了WebKitCSSMatrix的對象（WebKit是唯一支持的瀏覽器引擎）。光的角度可以定義，并隨時更改所提供的功能。這是可能被點亮一個由一個或一組一次來定義對象，我們可以通過設置的最大黑色+白色用法自定義的效果。
2012 頂級CSS工具和應用 d1d1775fba39c19f thumb

7. Gridpak
Gridpak 的目的是實現了響應式的 Web 頁面設計，提高您的工作流程，節省了時間。通過生成PNG圖像，CSS和JavaScript，，讓 Gridpak 創建響應式的簡單界面。
Gridpak 產生的CSS 兼容 IE 8+，但它使用很多實驗性的CSS屬性，如媒體查詢，盒大小和背景剪輯屬性，所以我們建議您結合 Modernizer 來使用，確保向后兼容性。
2012 頂級CSS工具和應用 d62bc9bbcc63f744 thumb

8. Morf.js
2012 頂級CSS工具和應用 60d9c8ae292e7cdc

Morf.js 提供了一組 JavaScript 方法用于加速 CSS3 的各種轉換效果，支持的方法都在上圖中，無需編寫 CSS3 代碼。
9. Gumby
Gumby 是一個響應式的以及 960 像素寬度的 CSS 網格框架，支持 PC、平板和手機屏幕顯示。類似 Twitter 的 Bootstrap，它包括一個Web UI工具包，有好看按鈕，表格，導航+標簽和一個很小的JavaScript文件
2012 頂級CSS工具和應用 78b4bb4279ce04ce thumb

10. AppJS
AppJS 是一個令人振奮的 JavaScript 庫，使我們能夠使用 Web 技術快速開發桌面應用程序（HTML，CSS和JavaScript）。AppJS 使用 Node.js 做為后端支撐。
2012 頂級CSS工具和應用 c42df5a0cf2e6bf9 thumb

11. Browser Support
Browser Support 是一個簡單的搜索引擎，用來查找某個 CSS 屬性是否被指定的瀏覽器所支持。提供一個自動完成的搜索輸入框。
2012 頂級CSS工具和應用 1ba2137efafc0319 thumb

12. SpritePad
SpritePad 是一個完美的解決方案，您可以在幾秒鐘內創建CSS精靈。只需將您的圖片拖放到畫布上，他們立即可作為一個PNG精靈+ CSS代碼。
2012 頂級CSS工具和應用 c441bf366e95c1c5 thumb

13. HTML5 Please
HTML5 Please 幫助你查看 HTML5 和 CSS3 等功能是否已經準備就緒。
2012 頂級CSS工具和應用 e23cfdb8f8807e9c thumb

14. jsFiddle
jsFiddle 是一個 Web 應用，主要用于幫助測試 JavaScript 和 CSS 的代碼片段。
2012 頂級CSS工具和應用 3df5faa74dbac8f8

15. Animate.css
Animate.css 包含一些實現了各種動畫效果的 CSS。
2012 頂級CSS工具和應用 b764b4f92c7a55fe

16. Excessive
Excessive 是一個用 Python 開發的 CSS 壓縮工具，可拖放任意多的文件并將這些文件合并到一個文件并即時壓縮。
2012 頂級CSS工具和應用 6875c1f887fc00f0 thumb

17. CSS Refresh
CSSrefresh 是一個 JavaScript 庫，用來實現無需刷新頁面立即更換網頁樣式效果的功能，即插即用無需配置，只需要在頁面中引入該 JS 文件即可。
2012 頂級CSS工具和應用 c3f51adf7f221aa0 thumb

18. Impress.js
impress.js 是一個Javascript程序包，它的功能是讓你制作出令人眩目的內容展示效果，主要里利用了CSS 3D Transforms 里的旋轉，扭曲，縮放等特性，所以，只有最新版的Firefox，或谷歌瀏覽器或蘋果瀏覽器才能看到它產生的效果，好像在還未出世的IE 10 瀏覽器里也可以用。
2012 頂級CSS工具和應用 13e735797c73bf20 thumb

19. Bear CSS
Bear CSS 是一個免費使用的Web應用程序，用來根據給定的 HTML 生產對應的 CSS 樣式。
2012 頂級CSS工具和應用 0277181b9f14d6d1 thumb

20. Less CSS
Less CSS 是一個使用廣泛的 CSS 預處理器，通過簡單的語法和變量對 CSS 進行擴展，可減少很多 CSS 的代碼量。
LESS 將 CSS 賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js).
2012 頂級CSS工具和應用 c6ea693f521f59ef thumb

21. css2less
css2less 是一個用 Ruby 開發的小工具用來將 css 轉成 Less CSS 格式的文件。
2012 頂級CSS工具和應用 3084b769b0d5b14c thumb

22. Responsive GS
Responsive GS 是一個流體網格 CSS 框架，用于快速開發響應式的 Web 網站。
Responsive GS 提供三種風格：12、16 和 24 列，使用 media queries 支持所有標準設備。
2012 頂級CSS工具和應用 8e4b8eff5d019caf thumb

23. CSS3 Shapes
CSS3 Shapes 是一個在線網站，使用 CSS3 實現了各種圖形效果。
2012 頂級CSS工具和應用 2cfd3e70fa42468c thumb

24. CSS Arrow Please
CSS Arrow Please 基于網絡的CSS樣式生成器，可用于所有如條紋，按鈕，表格，loading 圖標等CSS，完全使用 CSS 實現，無需圖像。
2012 頂級CSS工具和應用 183118f99c6b79cf thumb

25. WebPutty
WebPutty 是一個應用程序，它允許你在線編寫CSS代碼，支持語法高亮顯示的編輯器和側端的預覽面板可以讓你看到實時的變化。
2012 頂級CSS工具和應用 fad176cd78f1c7dd

26. CSSFx.js
寫CSS的時候經常要根據瀏覽器不同附加許多prefix，比如-moz-border-radius，業界對此也有很多的不爽。cssFx是一個可以自動幫你生成prefix的js，可以節省你很多時間和體力。
2012 頂級CSS工具和應用 af4d391fb3daa70c thumb