CSS制作工具

When it comes to simplifying one’s workflow and improving CSS write-up there are certain CSS tools which developers and designers must have. Albeit, there are a myriad of such tools on the web for writing valid code and better CSS, there are always new and improved tools which are continually springing up on the web daily.

In this article I have rounded up a list of 40 CSS Tools which can help designers and developers to accomplish and simplify development and design related tasks rapidly. The following css tools can help you to create css menus, animations, 3d shapes, layers, responsive pages, buttons, animations and many more. We hope our audience will find the following css tools handy and as per their needs. Enjoy !

1. Layer Styles

It is a HTML5 app for creating CSS3 in an intuitive way.

2. CSS3 Pie

Pie makes internet explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

3. Patternify

Patternify lets you create beautiful css patterns.

4. CSS Compressor

CSS Compressor lets you compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

5. Spritemapper

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.

6. EzxtractCSS

extractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you!

7. Tridiv

Tridiv is a free-to-use web application for creating 3D CSS shapes pretty easily. Using the app, we can insert 4 different shapes (cuboid, pyramid, cylinder, prism) and resize or rotate them.

8. SkyCSS Tool

Sky CSS Tool helps you to create CSS classes almost without using manuscript code.

9. Prefixmy CSS

PrefixMyCss lets you prefix your CSS3 code easily.

10. Responsive Web CSS

Its a web-based tool that enables anyone to create a responsive layout skeleton with drag ‘n’ drops. You can simply add any number of pages, divs and define the widths in percentages

11. CSS Form Generator

CSS Form Code maker creates nice looking layouts for forms.

12. Sencha Animator

Sencha Animator helps users to create animated text, images, design buttons with gradients and embed analytics.

13. Buttons

Buttons is a CSS library for creating highly customizable, flexible and modern web buttons.

14. CSS Patterns Gallery

CSS3 Patterns Gallery, a website by Lea Verou, displays creative and good-looking patterns built with CSS3. The gallery has a growing list of patterns and new ones can be submitted by everyone (once they meet a set of requirements).

15. CSS Menu Maker

This tool helps users to create custom CSS drop down menu easily. CSS Menu Maker provides webmaster with tools to create custom, cross browser compatible css menu.

16. CSS Matic

CSSmatic is a non-profit ultimate CSS tools for web designers. You can use the Gradient Generator which supports multiple colors and opacity stops to get amazing gradients.

17. PCSS

PCSS is a PHP-driven CSS Preprocessor, which aids developer to write CSS code quickly by defining variables, class nesting, default unit and server-side browser specifics.

18. TopCoat

Topcoat is a library which consists CSS classes for form elements, buttons, checkboxes, sliders and many more.

19. Magic

Magic is a stylesheet that includes many of these CSS effects (also mentioned that “more will be added”). The effects are collected under few categories (magic, perspective, rotate, bling, static, slide) and all of the effects are pretty attractive.

20. Skelton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles:

21. CSS Text Shadow

CSS Text Shadow allows you to generate beautiful text shadows.

22. CSS 3D Transform

CSS 3D Transforms is online tool which enables users to perform various level Transforms.

23. CSS3 Fancy LightBox

CSS3 Fancy Box is a pure CSS3 lightbox that’s similar to the creator’s original Fancy Box. By simply adding new classes to the class you’re able to control the appearance of the CSS3 Fancy Box.

24. One % CSS Grid

One% CSS Grid is a fluid grid system for creating responsive layouts quickly. The system is a percentage-based which means that it will adapt to any screen resolutions (mobile, tablets and big screens).

25. Accessify

Accessify’s quick form builder merges two older tools (form builder and form element generator) into one much slicker process and lets you easily create CSS forms.

26. Textillate.js

Textillate.js is a simple plugin for CSS3 text animations. Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text.

27. Simptip

Simptip is a simple CSS tooltip made with Sass. You can have a tooltip in different directions (top, left, bottom, right). You can also have a Tooltip in different color such as success , info , warning and danger. And finally other features like (soft edge, half arrow, movable effect, fade effect, multiline tooltip).

28. Slow.js

Slow.js makes it possible to slow down your CSS transitions when a key is pressed, based on a predefined factor.

29. Absurd.js

AbsurdJS is preprocessor which supports both HTML + CSS and written in JavaScript. It is available for Nodejs + the browser and has the advantage of providing an already-popular syntax: JavaScript.

30. Myth

Myth is a preprocess that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s a like CSS polyfill. Myth lets you write pure CSS while still giving you the benefits of tools like LESS and Sass. You can still use variables and math functions, just like you do in preprocessors.

31. XCSS

xcss’s main selling point is using Node module resolution algorithm to resolve dependencies between css files.In other words it supports importing CSS code from packages installed via npm.

32. Odometer

Odometer is a JavaScript-CSS library for creating effects/interfaces that are familiar from “car mileage displays, airport info boards or slot machines.

33. Hover.css

Hover.CSS is a useful collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

34. Animo.js

Animo.js is a powerful little tool for managing CSS animations. It includes features like Stack animations, create cross-browser blurring, set callbacks on animation completion.

35. CSS3 Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.

36. Spinkit

SpinKit contains some simple but awesome loading spinners animated with CSS. They use CSS animations to create smooth and easily customizable animations.

37. Create CSS3

It lists the properties + allows us to customize the values of each and displays the preview instantly. Multiple rules can be added to the same element and the generated CSS code can be edited as well.

38. UIbox

UIBox is a curated, searchable HTML, CSS, and JavaScript user interface component library. In addition to searching, you can also look up various UI components by exploring tags.

39. Pure CSS and Simplistic Loader/spinner

Loader/spinner icons are a part of almost any web project that involves ajax requests. Lea Verou, an inspiring web designer has recently shared a simplistic solution to create a spinner with pure CSS.

40. CSSO

CSSO (CSS Optimizer) is a CSS minimizer that also performs structural optimization of your CSS files.
What are your favorite CSS Tools which you find useful ? Let us know in the comment section.

1. Layer Styles

这是一个HTML5应用。利用它，开发者可以更直观地编写CSS3代码。

2. CSS3 Pie

Pie可使IE6~IE9渲染出圆角、渐变、文字阴影等多种最有用处的CSS3效果。

3.Patternify

Patternify可帮你设计出漂亮的CSS模板。

4. CSS Compressor

CSS Compressor是一个采用Java开发的CSS压缩优化工具，可帮助开发者压缩CSS代码(如去掉空格、注释；合并相同规则的选择器；简短的颜色表示法等)，从而提高加载速度，节约网络流量。你可以根据压缩后代码的易读性，来选择压缩标准。“普通”模式使用得最多，可很好地平衡好CSS的压缩程度和易读性之间的关系。

5. Spritemapper

Spritemapper应用可将多张小图片合并为一张图片，从而减少服务器的Http连接数，对提高网站的吞吐量有一定帮助，同时它还会每个图像切片产生相应的CSS定位。

6. EzxtractCSS

在线工具ExtractCSS可从HTML文档中提取与样式相关的信息，包括id、class及内联样式，并将它们生成CSS样式表。你所要做的就是键入或复制HTML文档，其余的留给ExtractCSS完成就可以了。利用该工具，我们可以将HTML中的内联样式快速抽离出来，十分方便。

7. Tridiv

免费Web应用Tridiv可以很容易地创建出漂亮的3D图形。使用该应用，我们可以创建4种不同的形状，包括长方体、金字塔、圆柱体和棱柱体，同时也可以对它们进行旋转并改变大小。

8. Sky CSS Tool

Sky CSS Tool可用来创建CSS类，你几乎不用再手写这些代码了。

9.PrefixMyCss

PrefixMyCss可帮助你很容易地添加CSS3前缀。

10. Responsive Web CSS

Responsive Web CSS是基于Web的一个工具，可用来创建响应式布局框架。你可以很容易地添加任意数量的页面和div，并定义它们的百分比宽度。

11.CSS Form Code Maker

CSS Form Code Maker主要用来为表格创建美观的外观布局。

12. Sencha Animator

Sencha Animator为HTML5动画制作工具，可帮助用户创建具有渐变、模糊、反射和阴影等特效的动画文本、动画图片及设计按钮。

13. Buttons

Buttons为CSS库，可用来创建高度定制化、灵活的现代Web按钮。

14. CSS Patterns Gallery

CSS3 Patterns Gallery网站由Lea Verou创建，展示了利用CSS3创建的创新、外观美好的模型。该画廊中的模型越来越多，如果满足网站中规定的要求，任何人都可以提交新的模型。

15. CSS Menu Maker

利用该工具，用户可轻松地定制CSS下拉菜单。CSS Menu Maker为网站管理员提供了创建兼容各浏览器、定制化CSS菜单的工具。

16.CSS Matic

CSS Matic是针对Web设计者的一款非营利性CSS工具。利用它提供的渐变工具，你可以创建出渐变平滑的色彩变化效果和微妙的透明胶片。

17. PCSS

PCSS为由PHP编写的CSS预处理器，可帮助开发者快速编写CSS代码。

18. TopCoat

Topcoat为CSS类库，这些类主要针对表单元素、按钮、复选框等。

19. Magic

Magic是一个包含了大量CSS效果的样式表。这些效果分别放置在不同的类别（如Magic、Perspective、Rotate、Bling、Static、Slide）中，很具吸引力。

20. Skelton

Skeleton是一套超小的CSS文件集，可用来快速开发适于任何尺寸屏幕的网站，无论是17寸的笔记本还是iPhone。

21. CSS Text Shadow

CSS Text Shadow可用来生成漂亮的文本阴影。 

22. CSS 3D Transform

在线工具CSS 3D可帮用户创建不同程度的变形（Transform），如旋转（Rotate）、扭曲（Skew）、缩放（Scale）和移动（Translate）以及矩阵变形（Matrix）。

23. CSS3 Fancy LightBox

CSS3 Fancy Box为基于CSS3实现的灯箱效果。用户只需在现有类中增加新的类，就可以控制CSS灯箱的显示效果。

24. One % CSS Grid

One% CSS Grid为流动网格系统，可快速创建响应式布局。该网格系统基于百分比，所创建的布局也将适用于任何分辨率的屏幕（包括移动设备、笔记本及更大屏幕）。

25.Accessify

Accessify中的Quick Form Builder工具同时具备了表单设计器和表单元素生成器的功能。借此，设计者可以很容易创建CSS表单。

26. Textillate.js

Textillate.js可用来制作CSS3文本动画。它集合了多个优秀库，为用户提供了简单易用的插件，以此制作各种特效的文本动画。

27. Simptip

Simptip是一个简单的基于Sass的CSS提示工具。你可以在网站的不同方向(上、左、右、下)加入提示信息，也可以为提示信息设置不同的颜色，如成功、信息、警告和危险。此外，该工具还提供了其他特性，如柔化边缘、半箭头、活动效果、渐变效果和多行提示等。

28. Slow.js

当按下某一键时，Slow.js基于预定义因素有可能减慢CSS的过渡效果。目前该工具兼容Firefox、Chrome和Safari浏览器，且支持多种过渡的速度。 

29. AbsurdJS

AbsurdJS是用JavaScript编写而成的支持HTML、CSS的预处理器。它运行于Node.js之上，并利用JavaScript语法来写CSS。

30. Myth

Myth为预处理器，用户在编写纯CSS代码时，无需考虑低版本浏览器的兼容问题。Myth同时具备LESS和Sass特点。像使用其他处理器一样，你可以在Myth中使用变量和数学函数。

31. XCSS

XCSS最主要的卖点是，它利用Node模块解析算法解决了CSS文件间的依赖问题。换句话说，它支持从由NPM创建的包中导入CSS代码。

32. Odometer

Odometer为JavaScript、CSS库，用来创建类似于“汽车行程里数显示、航班信息板、老虎机”的特效、用户界面。

33. Hover.css

Hover.css是各种CSS3悬停特效的合集，应用的对象包括按钮、标识、图像等，支持CSS和SASS。因为Hover.css提供的大部分特效使用了CSS3，所以对一些较早的浏览器版本支持的不太好。

34. Animo.js

Animo.js是一个用于管理CSS动画、功能强大的小工具。它包含堆栈动画、创建跨浏览器的模糊，设置动画完成后的回调等特色功能。此外，它还包含惊人的 animate.css，提供了近60个美丽的动画，还加入了一些辅助动画。

35. CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet为一组预设的动画库，为你的Web项目增添各种绚丽的动画效果。你所要做的就是为你的网站添加样式表，并将编写好的CSS类用于要添加动画效果的元素上。

为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站，为你想要添加动画效果的元素应用预制的 CSS 类就可以了。

36. Spinkit

SpinKit提供了一些用CSS编写的简单且优秀的加载旋转动画。他们利用CSS Animations创建了众多播放顺畅的定制化动画。

37. Create CSS3

Create CSS3为CSS3代码生成工具，几乎包括了CSS3的所有属性，同时允许用户定制每个属性的值，并提供即时预览功能。很多规则可用于同一元素上，已生成的CSS代码也可再被编辑。

38. UIbox

UIBox是一个用户界面组件库。用户可根据Tag选项来选取自己所需的代码片段，如手风琴效果、按钮、日历、选择器、jQuery Tab选项卡、菜单、Tooltips提示代码等。 

39. 用CSS编写的加载旋转动画

大部分网站在加载时，都会有加载提示图标。Web设计师最近用CSS编写了一个简单的加载旋转动画图标。

40. CSSO

 CSSO（CSS优化器）是一个 CSS 最小化压缩工具，同时还可以对CSS文件进行结构优化