css3工具

隨着CSS3的出現，CSS3討論的話題愈來愈多了，如今各類教程也是多如牛毛，不比一年前的時候，找個資料要撈遍整個互聯網，並且還很難找到本身須要的參考資料。從側面也說明，CSS3對於前端工程師來講，愈來愈重要了，從各處的招聘信息也能看出這一點。說這麼說我想強調的是他的重要性。另外一方面，有不少CSS3的效果然的不需咱們本身一個一個去寫，在這種狀況就互聯網上有關於CSS3的工具就出現了，這些工具將給你的製做節省不少時間，讓你有更多的時間去作本身想要作的事情。通過一年多的收集，我想有必要在w3cplus上爲你們整理一份這樣的工具列表，方便你們尋找。同時也但願這些工具能幫助你們學習，以及給你的工做帶來極大的方便。

原本想單獨整一份有關於CSS3的工具，後來仔細一思考，仍是將前端的一些優秀工具全列在此文，在這篇文章中，我爲你們分得稍爲更細一些，讓你們有針對性的查找，從而節省了找這些工具的時間。

2015年02月25日更新

CSS Ruler

CSS Ruler是一款在線的CSS單位工具。

CSS Devices

CSS Devices可讓你在線直接獲取使用CSS寫的Mobile外形。

2014年11月28日更新

SVG Edit

SVG EDIT是一款在線繪製、編輯SVG圖形和代碼的工具。

Flatty Shadow

Flatty Shadow在線爲Icon圖標生成長陰影效果。

2014年08月09日更新

CLIP PATH (MASK) GENERATOR

CLIP PATH (MASK) GENERATOR是一款在線製做生成clip-path路徑的工具，能夠直接生成SVG代碼以及配合Mask製做蒙板。

2014年01月20日更新

CSS Animatie

CSS Animatie是一款在線製做CSS3動畫的工具，能夠在線直接製做CSS3動畫效果，生成代碼。

2013年09月03日更新

CREATE CSS3

CREATE CSS3是一款在線集成衆多CSS3功能的生成器，能夠在線生成經常使用的CSS3效果。

2013年07月20日更新

FilterFactory

FilterFactory是一款將圖片轉換成SVG的在線生成工具。

2013年07月15日更新

Long Shadows Generate

Long Shadows Generate是一款在線使用純CSS3實現長陰影的效果，一款強大的扁平化長投影製造器。

2013年06月19日更新

Fontastic

Fontastic是一個在線生成字體圖標的app，能夠定製屬於本身的圖標字體。

2013年06月14日更新

ColorCode

ColorCode是一個在線隨機取色工具，能夠隨機獲取十六進制、RGB、HSl等顏色。

2013年06月08日更新

Screensiz.es

Screensiz.es站收集整理了移動端的相關尺寸。

2013年06月04日更新

Koala

Koala是由oklai同窗開發的一款前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。

1、CSS3屬性值的查詢

這一塊主要爲你們蒐集了幾個查找css3相關屬性介紹的工具，這些工具能讓你瞭解CSS3的相關屬性以及其簡單的使用方法，還有就是瀏覽器的兼容性等。

一、CSS Values

CSS Values主要是用來幫助你們查找CSS的相關屬性的語法，以及使用方法，能快速的進入相對應的w3c官網介紹、MDN信息介紹等。

二、CSS3,Please!

CSS3 Please主要是爲你們提供了目前較爲實用的一些CSS3屬性的介紹，以及示範代碼。

三、CSS3 Click Chart

CSS3 Click Chart爲你們提供了W3c草案中的屬性介紹，而且能夠在對應的屬性中找到相關的教程以及w3c官網的詳細介紹。

四、CSS666.com

css666.com就是一個提供CSS相關屬性查詢、以及對應屬性值的簡單介紹。

五、caniuse.com

caniuse.com提供了CSS相關屬性的瀏覽器兼容表，同時提供了對應屬性資源。另外這個站還提供了html5之類的查詢

六、 HTML5 / CSS3 Box.com

HTML5 / CSS3 Box.com提供了各類前端工具。

2、CSS3效果生成工具

第二部分介紹的工具都是些集成了CSS3多個屬性的生成工具，咱們能夠經過這些工具直接生成一些CSS3效果，好比說漸變、盒子陰影、文本陰影、圓角等等。

一、Westciv Tools

Westciv Tools主要爲CSS3提供了漸變gradients、盒子陰影box-shadow、變形transform和文字描邊四種在線生成效果的工具。

二、CSS3 Generator

CSS3 Generator提供了13個CSS3較爲經常使用的屬性代碼生成工具，並且能夠經過這款工具除了在線生成效果代碼以外，還能夠實時看到你修改的效果，以及瀏覽器的兼容性。

三、CSS3 Maker

CSS3 Maker提供了10個最爲經常使用的CSS3屬性在線生成工具，好比說border-radius、gradient、transfrom、animation、transition、rgba、text-shadow、box-shadow、text rotation和@font-face。一樣的你能夠在線設置相關屬性參數，瞭解瀏覽器對其的支持性，最方便的能夠直接下載生成的代碼。

四、LayerStyle

LayerStyle這款工具雖然服務的屬性很少，只有box-shadow。漸變色，圓角幾個，但他是的工做原理很是的接近於photoshop的面板工具，我想會有不少人喜歡，由於他對你們來講很熟悉，一點都不陌生。

五、CSS3 GENERATOR

CSS3 GENERATOR能夠同時爲一個元素完成border-radius、box-shadow、gradient和opacity多項屬性的設置。

六、Live Tools

Live Tools是一個UI製做工具，他提供了按鈕、表單、icon圖標和Ribbons的製做工具，能夠在線配置相關參數，生成你須要的效果代碼。

七、Mikeplate

Mikeplat能夠同時爲一個元素設置多個CSS3的屬性樣多，好比說圓角、陰影、旋轉等。

八、CSS3 Generator

CSS3 Generator(Pascal seven)和前面的CSS3 Generator工具不太同樣，這個工個是十個CSS3屬性爲同一個元素服務，固然你能夠選擇性的使用你須要的屬性。

九、CSS3 Ps

CSS3 Ps是photoshop cs6的一款插件，若是你是僅是一位設計師，不懂任何coding的活，但想使用CSS3屬性來實現你的部分設計效果，那麼你就可使用CSS Ps來幫助，一鍵搞定。

3、按鈕生成工具

Button的製做是很常見，早期爲了效果好，都是使用image來實現，自從CSS3出來後，如今不少效果都是經過代碼來實現，但是如何用代碼寫好按鈕效果實在是讓人頭痛，其實沒有那麼複雜，咱們使用工具，一切交給工具，你就輕鬆了。接下來爲你們介紹幾款經常使用的buttons製做工做。

一、Button Maker

Button Maker是CSS-TRICKS提供的一款在線生成Buttons的工具，能夠根據工具上的參數，定製適合本身須要的Button。

二、線性漸變按鈕

這是一款製做線性漸變按鈕的工具，他提供了詳細的參數讓你設置，能夠製做出各式各樣的按鈕效果

三、CSS3 Button Generator

CSS3 Button Generator是一個傻瓜式的按鈕製做工具。

四、CSS3 Button Generator

CSS3 Button Generator是一款簡單的按鈕生成工具，他能夠製做出兩種狀態下的按鈕效果，固然你若是須要其餘狀態的下按鈕效果，要在其基礎上作一些參數的變化，相對來講麻煩一點。

五、Glassy Buttons

Glassy Buttons是用來製做玻璃按鈕效果的工具

六、Button Generator

生成和圖片效果同樣的按鈕工具。

七、Button Factory

在線製做漂亮的按鈕工具。

八、AsButtonGen

AsButtonGen能夠在線根據本身需求定製不一樣的按鈕效果。

九、Webarti CSS3 Button Maker

Webarti CSS3 Button Maker是一款很是強大的按鈕在線生成工具，他提供了不少種不一樣按鈕效果讓你參考，能夠說只需選擇就能製做出本身須要的按鈕，思考的時間都不用你花了。

十、sciweavers

這是一款製做buttons的好工具，有多種風格供你參考，還能作必定的調整。

十一、cssbutton.me

能夠輔助你隨意自定義按鈕效果的一款工具。

4、@font-face字體轉換工具

@font-face屬性能夠幫助咱們製做一些特殊的字體，不過這個屬性對於中文字體來講有所限制。因爲中文字體較大，沒法轉換。

一、@FONT-FACE GENERATOR

@FONT-FACE GENERATOR只需其中一種字體，就能夠幫咱們轉換成@font-face各瀏覽器下所需的全部字體格式。

二、@FONT-FACE kit generator

@FONT-FACE kit generator只需其中一種字體，就能夠幫咱們轉換成@font-face各瀏覽器下所需的全部字體格式。

5、字體查詢

字體是一個站點設計必備的東東，但有不少字體咱們都不知道，更不知道字體在頁面中呈現的效果，還有就是不知道如何取到這些這體，這裏給你們推薦兩個站點，能夠實時看到不一樣字體的效果，以及下載。

一、CSS FONT STACK

CSS FONT STACK能讓你實時看到各類字體在web中的渲染效果。

二、Font 2U

Font2u提供了各類字體的下載以及字體的詳細信息。

6、在線製做ICON

ICON使用@font-face製做是愈來愈廣泛了，但有一些icon字體庫有幾個icon，而每每咱們有時候只須要其中的幾個，加載全部的icon感受浪費，其實沒有必要這麼作的，在線有兩個網站，上面提供了各類字體icon庫，咱們只須要選擇其中的部分，進行安裝就OK了。

一、Fontello

Fontello.com提供了12種字體icon的在線製做，你能夠選擇其中的某幾個icon生成你須要的圖標

二、icomoon

icommon就比較強大了，除了免費的字體以外，你還能夠導入你本身的svg字體，生成你須要的icon。

7、ICON圖標下載

不少時候不想花時間去製做一些透明的ICON，想要現成的，但有時候有不知道去哪找，這裏給你們推薦幾個網站，這幾個站點提供了各類尺寸的透明PNG的ICON下載。

一、ICON　FINDER

ICON　FINDER這個站點，能夠搜索到本身須要的各類字體。

二、FIND ICONS

FIND ICONS這個站和前面的那個站很相似，相似的域名都差很少，功能也差很少。

三、Freepik.com

Freepik.com除了提供ICON的下載以外，還提供了其餘設計素材的下載。

8、圓角生成工具

圓角的製做不在侷限於圖片，如今使用最多的應該是border-radius。這是一個很簡單的屬性，但有工具總比本身代碼去測試強，雖然前面的工具中或多或少包括了圓角的生成部分，但不是針對性的，下面爲你們介紹幾款專門用來製做圓角的在線工具。

一、border radius

border radius就是一款很簡單的用來製做圓角的在線生成工具，不過這款工具只能製做簡單的圓角效果。（水平和垂直圓角半徑同樣大小）。

二、CssRound

一款簡單的圓角調試工具。

9、漸變生成工具

漸變效果，用CSS3寫，裏面的代碼真心的記不住，我每次都須要去查相關的文檔，並且一個好的漸變效果，須要不斷的去調試，若是使用現成的工具就省心多了。

一、Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator真心的好用，是我經常使用的一個在線製做漸變的工具，他除了相似於photoshop的漸變工具以外，仍是firefox和chrome瀏覽器的一個插件。並且還能生成兼容IE的濾鏡代碼，好強大的。

二、CSS3 Gradient Generator

這是一個簡單的漸變製做工做，能夠製做出經常使用的一些漸變效果。

三、CSS + SVG + Canvas cross-browser gradient generator

CSS + SVG + Canvas cross-browser gradient generator，看標題就知道是怎麼一回事了。

10、顏色獲取以及配色工具

顏色種類太多，有時候爲了一種顏色不知道他的編碼很頭痛，有時候又想看看幾種顏色在同一個web頁面上配色是否協調。其實這些均可以交給工具去幫咱們。

一、Color Schemer Online

經過輸入rgba和十六進制或者顏色面板上取顏色值，就能獲取到相關係列的顏色值。

二、Color Schemes and Color Palettes

提供了各類web的配色方案和顏色面板

三、Hsl Color Picker

Hsl Color Picker提供了一個顏色值之間的轉換工具，取其中一個值，就能獲得相應的其餘命名的顏色值。

三、HSL COLOR PICKER

HSL COLOR PICKER工具是經過設置HSL的顏色，而後工具中能看到對應的顏色，同時還能獲得十六進制和rgb的顏色值。

四、Peise.net

Peise.net提供了各類顏色的配色方案，以及顏色的理論知識。

五、hex color

hex color工具是志哥編寫的一個關於css背景顏色屬性值轉換的一個工具，

11、盒子陰影box-shadow

box-shadow給咱們帶來不少種陰影的實現方法，並且比製做圖片還簡單，下面提供幾款在線製做陰影的工具。

一、CSS Drop Shadow

這款工具能夠在線直接生成七種不一樣類型的陰影效果，這七種也是常見的不一樣陰影效果。

二、CSS3 Drop Shadows

這個工具和上面的工具備點相似，使用CSS3製做一些特別的陰影效果。

12、CSS3動畫

css3的animation可讓咱們不在依賴於javaScript的腳本就能實現一些動畫效果，但這個屬性的製做，時間點控制仍是須要花時間去調試的，若是有工具讓咱們一下就能搞定，不是你們期待的？

一、liffect effect

liffect effect能夠說是一個css3 animation的動畫庫，裏面涵蓋了20多種動畫效果，極其相似於jQuery Easing Plugin中的效果。

二、CSS3 Animation Generator

CSS3 Animation Generator和前面的一款相似，但沒有第一款那麼多動畫效果。

三、Animate.css

Animate.css不是生成代碼的工具，但絕對是各類動畫效果的參考示例網站。

四、animatable

animatable和Animate.css同樣不是生成代碼的工具，但他在線提供了39種不一樣的動畫效果。

五、stylie

stylie在線生成keyframe的一款工具。

十3、px轉em工具

咱們最經常使用的度量單位就是像素(px)，但他是一個固定值單位，有時候咱們不免須要使用到相對單位em，那麼px轉em每每會讓你計算到暈死，特別是多層嵌套的狀況下，今天提供幾款工具，讓你能整個明白，用得放心。

一、pxtoem

一款簡單的px轉em工具，可查詢到不一樣狀態下的變化值。

二、Em Calculator

Em Calculator是一款強大的px轉em的工具，不管你層級有多深，都能給你計算出來。

十4、佈局工具

佈局就不用解釋了（^_^）。能用工具製做佈局，我想用的人仍是算少的吧，要是你沒看過，那你要看看，

一、Pageblox

Pageblox是一款在線生成佈局的工具，提供了七種常見的佈局模式，並且還能夠根據本身的需求作一些自定義的設置。

二、Gridpak

Gridpak是一款生成responsive網格佈局系統的工具。

三、CSS Layout Generator

CSS Layout Generator是一款佈局生成工具，能夠生成固定佈局，流體佈局等。

四、RatioSTRONG

RatioSTRONG是一款將固定佈局轉換成百分值佈局的一款值轉換工具。

五、Variable Grid System

Variable Grid System 一個自定義的網格系統工具。

六、Gridinator

Gridinator是一款能製做px、em、%值三值的網格佈局工具。

十5、base64l圖片

圖片轉64位，一直不知道如何轉的，後來搜索了兩個工具，以爲蠻不錯的，就列入進來了，給有須要有朋友使用。

一、image2base64

本地圖片轉換成base64位的一款工具

二、imagetobase64converter

本地圖片轉換成base64位的一款工具

十6、border-image工具

border-image如今雖然列入了css3中，但目前僅在webkit下能用，不過他是一個很強大的屬性，未來確定能幫咱們解決很多的麻煩問題，此次整工具，也將列入進來。

一、border-image-generator

border-image-generator就是border-image的一款運用工具，使用這款工具，能輕鬆的用好border-image屬性。

十7、css3 Transform

CSS3的transform屬性能輕易將元素進行一些變換，好比說旋轉、綻開和扭曲等，製做這樣的效果也有如今的工具。

一、CSS3 Transform Generator

CSS3 Transform Generator就是在線高度transform的屬性。

二、3D CSS Tester

3D CSS Tester是一款在線生成3D旋轉的工具。

十8、CSS3 Transition

CSS3的transition屬性製做動畫雖然沒有animation那麼強大，但實現一些潤滑動畫效果是足夠了，而這個屬性中最重要的是就是他的動畫函數，若是你不知道這些函數怎麼來寫，能夠利用一下下面的工具。

一、CSS EASING ANIMATION TOOL

CSS EASING ANIMATION TOOL主要用來生成transition屬性的運動曲線函數。

二、cubic-bezier

cubic-bezier用來製做立方貝塞爾曲線，用於transition屬性中。

十九。其餘

最後給你們蒐集了一些前端相關的應用工具，好比說3D文本、三角製做、綵帶製做等工具。

一、3D CSS Text

3D CSS Text是一個用來製做不一樣角度下的3D文字效果。

二、3D Ribbon Generator

3D Ribbon Generator一款在線製做立體彩帶工具。

三、CSS triangle generator

CSS triangle generator一款在線製做三角圖形工具。

四、CSS3 Menu

CSS3 Menu是用來製做導航菜單。

五、CSS Load

CSS Load是一款純代碼製做loading的工具。

六、CSS Sprites Generator

CSS Sprites Generator是在線製做圖片精靈的工具

七、Html ipsum

Html ipsum是一個html結構的測試模板，你作測試頁面時，所需的結構，能夠直接經過這個網站複製，提交工做效率。

八、CSS3 Multi Column

CSS3 Multi Column一個多列屬性設置工具。

九、CSS ARROW PLEASE!

CSS ARROW PLEASE!是一款帶三角的tooltip製做工具。

十、CSS FilterLab

CSS FilterLab是css3下的filter屬性的效果查詢工具。

十一、Flexplorer

Flexplorer是css3中flexbox屬性的管理工具，能夠經過這款工具實現flexbox的佈局效果。

2012年12月05日更新

十二、CSS Flexbox Please!

CSS Flexbox Please!在線調試flexbox佈局效果，幫助你更好的理解flexbox的屬性值的工做機制。

1三、flexiejs

flexiejs和CSS Flexbox Please!很相似，也是在線調試flexbox佈局效果，幫助你更好的理解flexbox的屬性值的工做機制。

2012年12月18日更新

1四、iAnimator

iAnimator是由Kundy製做的一款CSS3在線動畫編輯工具，很強大，就算是你不懂CSS3動畫屬性的使用，也能製做出相似於flash的動畫效果。

1五、【ecd】css3 Animation tool

騰訊ECD推出一款強有力的CSS3動畫製做工具。

1六、Hands On: Windows 8 HTML5 Platform

Hands On是微軟推出的一款有關於CSS3製做經常使用屬性的線上工具，裏面包含了近17個CSS3相關的屬性運用。

2013年01月21日更新

1七、Color Scheme Designer

若是你還在爲獲取web顏色而煩惱的話，建議你使用Color Scheme Designer取色工具，以不一樣的模式，可讓你一下獲取相近的四個顏色。

2013年02月17日更新

1八、Character-Code.com

Character-Code.com提供了對應的字符編碼，能夠查詢出對應的字符編碼。

1九、i want hue

i want hue是一款強大的取色工具，可讓你快速獲取相近的多個顏色。

2013年03月07日更新

20、Iconbench

Iconbench在線製做icon圖標的神器，你能夠加載一些免費的icon資源，添加你須要的icon，而後下載下來就能夠直接經過@font-face實現icon。

2013年03月13日更新

2一、webkit-filter

志哥寫的一個在線調試-webkit-filter效果的工具。

2013年04月11日更新

2二、Flexy Boxes

flexbox是一款flex佈局工具和代碼生成器。

2013年04月16日更新

2三、PLTTS

PLTTS是一個在線網頁配色大全。

2013年04月23日更新

2四、 Layoutit!

Layoutit在線設計網站的工具，提供了web頁面中的種種UI組件，只需拖用擺放就能輕鬆的設計出一個優秀的頁面。

2013年05月29日更新

2五、 Iconvau

Iconvau是一款在線將SVG圖標轉換成Web Fonts的工具。

這裏爲你們蒐集了近80款不一樣的工具，但願這些工具對你們從此的工做和學習有所幫助。固然，其餘同窗手中確定有不少我沒有發現的好工具，若是您願意分享的話，歡迎將你一直認爲好用的工具在下面跟貼，我會將您分享的好工具與貼上來與你們分享。

如需轉載，煩請註明出處：http://www.w3cplus.com/source/front-end-developer-excellent-tool.html

著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/source/front-end-developer-excellent-tool.html © w3cplus.com著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/source/front-end-developer-excellent-tool.html © w3cplus.com