29个顶级CSS工具和应用

当你需要编辑或改变网站设计时，CSS起着重要的作用。透过一些CSS工具可以让新手开发人员和设计人员轻松地学习这门语言和它的功能。今天，我们为你编制了30个有用的CSS工具和应用程序。使用下列工具，您将能够以任何顺序进行CSS属性的排序，能够将您的Photoshop图层转成CSS样式，可以创建自己的响应Web系统。希望你能从这些工具和应用中发掘对自己有用的内容。1.MetroUICSSMetroUICSS是一套实现了Windows8的Metro风格界面的CSS框架。2.CSScombCSScomb可使用指定的排序方法对CSS的属性进行排序，提供多种版本，包括：CSScombOnlineCSScombforSublimeText2(AlsoinPackageControl)CSScombforTextmateCSScombforCoda&Coda2CSScombforEspresso2CSScombforIntelliJIDEA/WebStorm/PyCharmCSScombforNotepad++CSScombforVim3.CSS3PsCSS3Ps是一个免费的基于云端的Photoshop插件，用来将PhotoShop的图层转成用CSS3实现的方式，外观完全一致。您可以选择多个图层和图层组，一键转换。行程转换为CSS边框属性。内阴影，内发光，阴影，外发光转换成CSS的box-shadow属性。您可以在浏览器中看到的结果样式，并与其他人分享。它适用于Windows或MacOSX和PhotoshopCS3及更高版本。最重要的是，它是完全免费的！4.ResponsiveAeonResponsiveAeon是一个HTML5/CSS3的框架，可以非常快速的创建响应的布局。它有一个网格系统是基于总1104px宽度12列，提供了3个非常容易理解的基本类供使用。该框架使使用@mediaqueries的，支持任何尺寸的设备。除了网格系统，也有排版，列表，表格，按钮和表格的样式。5.RefineSlideRefineSlide是一个轻量级（4KB压缩）的jQuery插件快速整合一个响应式的、基于图像滑块的效果到我们的网站。滑块使用CSS3转换+3D变换（有JS备用）和有一堆有吸引力的转变。它有一个选项，以显示缩略图（自动格式化和响应）或箭头的导航（支持键盘操作）。6.PhotonPhoton是一个JavaScript库，实现了在三维空间中的任何元素添加简单的照明效果。为了制造出效果，它采用了WebKitCSSMatrix的对象（WebKit是唯一支持的浏览器引擎）。光的角度可以定义，并随时更改所提供的功能。这是可能被点亮一个由一个或一组一次来定义对象，我们可以通过设置的最大黑色+白色用法自定义的效果。7.GridpakGridpak的目的是实现了响应式的Web页面设计，提高您的工作流程，节省了时间。通过生成PNG图像，CSS和JavaScript，，让Gridpak创建响应式的简单界面。Gridpak产生的CSS兼容IE8+，但它使用很多实验性的CSS属性，如媒体查询，盒大小和背景剪辑属性，所以我们建议您结合Modernizer来使用，确保向后兼容性。8.Morf.jsMorf.js提供了一组JavaScript方法用于加速CSS3的各种转换效果，支持的方法都在上图中，无需编写CSS3代码。9.GumbyGumby是一个响应式的以及960像素宽度的CSS网格框架，支持PC、平板和手机屏幕显示。类似Twitter的Bootstrap，它包括一个WebUI工具包，有好看按钮，表格，导航+标签和一个很小的JavaScript文件10.AppJSAppJS是一个令人振奋的JavaScript库，使我们能够使用Web技术快速开发桌面应用程序（HTML，CSS和JavaScript）。AppJS使用Node.js做为后端支撑。11.BrowserSupportBrowserSupport是一个简单的搜索引擎，用来查找某个CSS属性是否被指定的浏览器所支持。提供一个自动完成的搜索输入框。12.SpritePadSpritePad是一个完美的解决方案，您可以在几秒钟内创建CSS精灵。只需将您的图片拖放到画布上，他们立即可作为一个PNG精灵+CSS代码。13.HTML5PleaseHTML5Please帮助你查看HTML5和CSS3等功能是否已经准备就绪。14.JSBinJSBin是一个Web应用，主要用于帮助测试JavaScript和CSS的代码片段。功能与jsFiddle网站一致。在线演示：包含一些实现了各种动画效果的CSS。16.ExcessiveExcessive是一个用Python开发的CSS压缩工具，可拖放任意多的文件并将这些文件合并到一个文件并即时压缩。17.CSSRefreshCSSrefresh是一个JavaScript库，用来实现无需刷新页面立即更换网页样式效果的功能，即插即用无需配置，只需要在页面中引入该JS文件即可。18.Impress.jsimpress.js是一个Javascript程序包，它的功能是让你制作出令人眩目的内容展示效果，主要里利用了CSS3DTransforms里的旋转，扭曲，缩放等特性，所以，只有最新版的Firefox，或谷歌浏览器或苹果浏览器才能看到它产生的效果，好像在还未出世的IE10浏览器里也可以用。19.BearCSSBearCSS是一个免费使用的Web应用程序，用来根据给定的HTML生产对应的CSS样式。20.LessCSSLessCSS是一个使用广泛的CSS预处理器，通过简单的语法和变量对CSS进行扩展，可减少很多CSS的代码量。LESS将CSS赋予了动态语言的特性，如变量，继承，运算，函数.LESS既可以在客户端上运行(支持IE6+,Webkit,Firefox)，也可一在服务端运行(借助Node.js).21.css2lesscss2less是一个用Ruby开发的小工具用来将css转成LessCSS格式的文件。22.ResponsiveGSResponsiveGS是一个流体网格CSS框架，用于快速开发响应式的Web网站。ResponsiveGS提供三种风格：12、16和24列，使用mediaqueries支持所有标准设备。23.CSS3ShapesCSS3Shapes是一个在线网站，使用CSS3实现了各种图形效果。24.CSSArrowPleaseCSSArrowPlease基于网络的CSS样式生成器，可用于所有如条纹，按钮，表格，loading图标等CSS，完全使用CSS实现，无需图像。25.WebPuttyWebPutty是一个应用程序，它允许你在线编写CSS代码，支持语法高亮显示的编辑器和侧端的预览面板可以让你看到实时的变化。26.CSSFx.js写CSS的时候经常要根据浏览器不同附加许多prefix，比如-moz-border-radius，业界对此也有很多的不爽。cssFx是一个可以自动帮你生成prefix的js，可以节省你很多时间和体力。27.DirtyMarkupDirtyMarkup是一个免费的基于Web的应用程序，可以帮助您轻松地清洁乱码。编辑器使用一个简单+功能AceEditor的和各的美化可以有多种选择，以获得最佳的效果。28.CrunchCrunch是一个基于AdobeAIR开发的LessCSS的编辑器。主要用于Less的编辑并编译成CSS。29.CSS3TestCSS3Test是一个在线对浏览器的CSS3支持进行测试的网站。