Web設計師不可錯過的25+CSS工具
當涉及到簡化 CSS 設計和開發相關的工作時,工具總能創造奇蹟。值得指出的是,絕大多數的網頁設計者和開發人員對不同的 CSS 工具都感到興奮,這些工具能幫助他們更快的製作功能完善又十分完美的網站和網頁應用。當涉及到執行一些重複的 CSS 標籤時,這些值得推薦的 CSS 工具是最好的選擇。在本文中,我為你收集 25+ 個 CSS 工具,它們將通過最大限度的發揮 CSS 的功能來幫助你建立神奇的網站。來,讓我們一起來看看吧!
Normalize.css
在 HTML5 已經準備好了代替 CSS 的今天,Normalize.css 允許瀏覽器提供各種與今天的 web 設計標準相符的元素。為了讓未來的設計者們更容易使用,僅僅盯著這些需要被標準化的樣式,Normalize.css 糾正了一系列普通的瀏覽器不一致的問題,以及附帶一些程式碼註釋。
CSS Type Set
對開發者們和設計者們來說,CSS Type Set 作為一款著名的文字設計工具,它允許我們進行互動式的測試和學習風格化 web 內容的方式。在輸入文字框內的文字框區域,我們需要輸入想要修改的文字,同時你能在旁邊檢視一個叫“檢視 CSS”的文字框檢視轉換的 CSS 檔案。
SpritePad
SpritePad 是另一個建立 CSS 指令碼的工具。所有你需要做的僅僅是將影像拖動到網格,你就會得到使用 PNG sprite+CSS 的程式碼。SpritePad 最大的優勢是你不需要手動指定 CSS 樣式也不需要使用Adobe Photoshop。
Conditional-CSS
Conditional-CSS 是一個出色的樣式工具,針對它的特定 CSS 語句,你可使用它的條件邏輯編寫易維護的樣式。這樣做是因為兩個原因,一是單獨的瀏覽器,同時也是為了瀏覽器組。使用 Conditional-CSS 這個免費的開源 CSS 工具,你可以很方便地優化你的 CSS,高效地維護你的 CSS 檔案,引入 @import 語句可以靈活地自動擴充套件。
PxtoEM
PXtoEM 是一個優秀的樣式工具,讓 px 到 em 的轉換變得簡單而快速。使用該工具,你所需要做僅僅是輸入基礎字型大小的畫素和 PxtoEm 單位,工具會生成一個轉換表。這將使你方便快捷地建立彈性的網頁設計。
Templatr
對於不熟悉 HTML 或者 CSS 的人來說,如果想要製作一個優秀的網站,那麼 Templatr 正是你所需要的工具。你可以自由的在其提供的大量佈局樣式中,批量上傳影像和圖形元素。用 Templatr 建立的樣式可以使用特定的應用快速下載、安裝。可被翻譯成多種語言是 Templatr 主要優點之一。
CSScomb
你可以繼續使用 CSScomb 工具來給你的 CSS 屬性自動分類。CSScomb 工具最大的好處是它可以有效地與大量流行的文字編輯器一起使用,如Notepad++、Coda。作為一種美化程式碼的有效工具,CSScomb 的安裝配置非常簡單,你可以輕鬆的線上試用 CSScomb,只需簡單的複製貼上程式碼到所提供的文字框中,然後便可在相鄰的視窗中檢視整理好的程式碼。
Prefixr
除了使樣式表可以跨瀏覽器相容外,Prefixr 是另外一種允許新增瀏覽器字首引擎的有趣工具,它可以讓你用官方的正式語法代替所有的 CSS3 字首。這意味著,你不需要記住任何特殊的 CSS3 屬性,因為 Prefixr 已經將所有的這些資訊構建在程式中了。
PSD2CSS Online
PSD2CSS Online 是一款可以從 Photoshop 設計圖中直接生成網頁的高階 CSS 工具。你可以從眾多的指南和命名規則中自由的選擇如何將 PSD 轉換為 (X)HTML 和 CSS。
MoreCSS
作為一種面向設計的 JavaScript 庫,MoreCSS 允許通過程式碼建立彈出視窗、選項卡選單、工具提示、高階列表樣式、斑馬線表、跨瀏覽器不透明度樣式,並使用自動斷字。
CSS Menu Maker
使用 CSS Menu Maker 工具可以簡單靈活的建立跨瀏覽器相容性的定製 CSS 選單。不管你是否對建立下拉選單、垂直選單、摺疊選單、飛出選單或者其他型別的選單感興趣,CSS Menu Maker 都是一個不容錯過的好工具。
CSS Frame Generator
為了體現 XHTML 的結構,CSS Frame Generator 工具通過一行一行的方式返回 CSS。在開始使用 CSS Frame Generator 工具時,你只需要簡單的將 XHTML 程式碼放在提供的文字框中,然後一名經過培訓的CSS Frame Generator 專業人員將把相應的 CSS 框架提供給你。
CSS Redundancy Checker
CSS Redundancy Checker是一款可以找到所有 CSS 選擇器的工具,而CSS選擇器在 HTML 檔案中已不再使用,因此可能變得多餘。CSS Redundancy Checker 致力於使CSS檔案變得簡潔,使其最有意義、最精確。
Awesome Fontstacks
Awesome Fontstacks 是一款令人印象深刻的CSS工具,它可以批量建立免費的完美匹配 web 的字型。如果你正在尋求 web 排版的創新性,那麼 Awesome Fontstacks 不容錯過。
Wufoo
作為一款卓越的線上表格構建工具,Wufoo 是基於網路的 HTML 表格構建工具,它可以用於建立吸引眼球的基於 XHTML 和 CSS 的表格。無論你是在尋求如何建立線上調查表、聯絡表或者邀請函,Wufoo 都是一款簡單好用的工具。
Clean CSS
Clean CSS 是一個完美的線上工具,使整理和維護選擇器屬性更加容易快捷。因為選擇器整理很容易改變行為,建議使用 Clear CSS 整理你的選擇器時要慎重。
WordOff
WordOff 是一個令人印象深刻的 HTML 程式碼清理工具。它可以刪除不必要的元素如: , 和
CSS Compressor
CSS Compressor 是一個可以節省重要頻寬的樣式壓縮工具,有三個層次的壓縮選項可以自由選擇,我建議你選擇“正常”模式。
CSS Hat
如果你正在尋找一款可以將 Photoshop 圖層樣式轉換為 CSS3 的工具,那麼你一定要試試 CSS Hat。通過這款工具,你只要簡單地選擇多個圖層,就會得到有獨立選擇器的每個圖層的 CSS 程式碼。
Kotatsu
作為一款簡單的 HTML 表單生成器,Kotatsu 可以在相同列中的單元格快速簡單地附加 classes。
Htmldevelopertools
Htmldevelopertools 可以在瀏覽器視窗中更新伺服器上的 CSS 檔案。目前,Htmldevelopertools 工作在IIS 和 .NET3.5 環境下,它一定可以成為設計師和開發者最好的工具。
CSS Text Wrapper
CSS Text Wrapper 工具讓你可以方便地使用多種形狀的 HTML 文字域,而不僅僅侷限於矩形。你可以任意在文字週圍使用折線、曲線或者其它形狀。
Sky CSS Tool
作為一個不錯的線上 CSS 創作工具,Sky CSS 工具能讓你不用寫冗長的程式碼就能建立 CSS 類。而這,你僅需要一個相容 JavaScript 的瀏覽器,並且讓這個工具正常工作就行了。
Grid Designer 2.4
如果建立一個指定列數的表格,margin 和 gutter 已經變成一件充滿壓力的工作,Grid Designer 2.4 是適合的工具。除了可以在工具裡面指定樣式,你還可以利用標籤的靈活性,對橫跨的列做設計。
WebPutty
作為一個開源的工具, WebPutty 允許你線上編輯預覽 CSS,而這僅僅需要你做完之後單擊發布即可。
Replace CSS Colors- Editor
這是一個令人難以置信的工具,它允許你不去修改一條 CSS 程式碼而改變網站的整個配色方案。你需要做的只是選擇一個本地的 CSS 檔案,替換它的顏色並且立即下載新的 CSS 檔案。
CSS Gradient Generator
如果你不習慣使用 Adobe PS 圖象處理軟體來製作漸變圖,那麼就來試試使用 CSS 漸變生成器工具吧。有了這個工具,你甚至可以利用一個專有的連結來靈活地儲存你的所有的漸變圖。
當你的身邊有合適的工具時,CSS 的工作就變得既簡單而又令人興奮。希望上述各有特色的工具,能夠對你探索 CSS 的過程有所幫助。
文章轉載自 開源中國社群 [http://www.oschina.net]
相關文章
- 程式設計師不可以錯過的Android元件化神器-ServicePool!程式設計師Android元件化
- 6個新手程式設計師程式設計必不可少的工具,你用過幾個?程式設計師
- 程式設計師不可不知的Linux效能工具程式設計師Linux
- .NET開發不可錯過的25款必備工具,徐彙區網站設計網站
- 2019年不可錯過的開發工具 Top 20
- 不可錯過的書籍
- 好程式設計師分享Web前端開發工具程式設計師Web前端
- 程式設計師不可以錯過的寶藏地方,2020 還不會泡GitHub? 你落伍了!程式設計師Github
- 設計人員不可少的顏色設計工具ColoFolXS for macMac
- “鎖”,程式設計師不可逾越的鴻溝程式設計師
- UI設計師:你不能錯過的七大神器!UI
- 總結 | 外貿人不可錯過的大檔案傳輸工具!
- 好程式設計師web培訓簡述web前端開發工具有哪些程式設計師Web前端
- Java程式設計師必須要掌握這10種工具,缺一不可!Java程式設計師
- 不可錯過的十本Python好書Python
- .Net WEB 程式設計師需要掌握的技能Web程式設計師
- 好程式設計師web前端技術之CSS3過渡程式設計師Web前端CSSS3
- 程式設計師必須要了解的web安全程式設計師Web
- 程式設計師的職業生涯可以有哪些出路?這些路子別錯過程式設計師
- 可以提高程式設計師效率的工具!程式設計師
- 好程式設計師web前端教程:字串程式設計師Web前端字串
- 好程式設計師web前端分享透過Vue插槽的元件傳遞HTML內容程式設計師Web前端Vue元件HTML
- 35歲,程式設計師過不去的坎?程式設計師
- 程式設計師的中年該如何度過程式設計師
- 好程式設計師Java培訓分享Java程式設計師常用的工具類庫程式設計師Java
- 你不可錯過的Java學習資源清單Java
- 月薪過萬的UI設計師都是怎麼設計介面的UI
- 最適合程式設計師的畫圖工具?程式設計師
- Java程式設計師必備的工具和框架Java程式設計師框架
- 2018年最值得關注的設計師工具
- 好程式設計師web前端分享怎麼對待框架和工具頻繁更新程式設計師Web前端框架
- 好程式設計師web前端分享CSS不同元素margin的計算程式設計師Web前端CSS
- 程式設計師過年的無奈與不甘程式設計師
- 線上資料庫設計工具-toolfk程式設計師線上工具網資料庫程式設計師
- 程式設計師與「中臺」的愛恨交錯程式設計師
- 給程式設計師的10堂寫作課(一)--30+的你,怎能錯過寫作?程式設計師
- 好程式設計師web前端分享web前端入門知識程式設計師Web前端
- 好程式設計師web前端精講 web前端三要素程式設計師Web前端
- 好程式設計師web前端分享:如何理解web語義化?程式設計師Web前端