10 款实用的 CSS 开发助手推荐

2012/02/24 · CSS · 2
评论 ·
CSS

英文原文: jQuery4u,翻译:iteye

本文整理了10款非常实用的CSS工具,这些工具可以帮你处理一些单调重复性的工作,大大提高了Web开发工作效率,简化了工作流程。

1.  Animatable

该工具用于创建CSS3动画,创建的动画可以在任何平台或设备(包括Android、BlackBerry、iOS
和WebOS等)中的现代浏览器中运行。即便你不熟悉CSS,该工具也能帮助你创建多场景的CSS3动画。

图片 1

2.  CSS3 Buttonize Framework

这是一个轻量级、灵活、即时按钮框架。只需简单选择按钮样式示例,然后根据提供的链接下载CSS代码即可。该框架还会告诉你如何使用这些代码。

图片 2

3.  Patternify

这是一个简单的CSS图案生成器。你可以在基于Web的图形化界面中绘制你想要的图案,然后该工具将自动生成CSS代码。

图片 3

4.  CSS3 Patterns Gallery

正如该工具的名字,这是一个CSS图案画廊,网页中显示了每个图案的预览,单击你需要的图案,即可显示该图案的CSS代码。

图片 4

5.  Columnal

这是一个CSS网格系统,整合了两套自定义CSS代码。Elastic网格系统来自cssgrid.net,另外一些来自960.gs。

图片 5

6.  Spritemapper

该工具可以将多个图片合并成一个,并生成相应切片的CSS配置代码。这样,既节省了你写代码的时间,又提高了网页加载时间。

图片 6

7.  The Web Font Combinator

该工具通过示例,让你直观地试验、预览页面中各部分(标题、副标题、正文)字体的效果。

图片 7

8.  Layer Styles

这是一个基于浏览器的图形编辑器,你可以在一个对话框(类似于Photoshop图层样式对话框)中设置图形的样式,然后该工具会自动生成CSS代码。

图片 8

9.  Sencha Animator

这是一个桌面应用,允许你创建可在现代浏览器和触屏移动设备中运行的CSS3动画。

图片 9

10.  Holmes

这是一个CSS样式诊断工具,通过添加一个类,即可在页面中高亮显示一些错误或无效的HTML/HTML5标记,如使用红色边框显示错误信息、黄色边框显示警告信息、灰色边框显示不赞成使用的样式,还可以突出显示可改进的标记、非W3C元素和属性等。

图片 10

赞 收藏 2
评论

图片 11

  对于Web开发人员来说,找到有用的CSS工具,就像找到一个魔灯,可以让他那些艰难的任务变得有趣。CSS工具帮助开发人员创造更时尚,更有创意的网站。在这篇文章中收集了20个有用和强大的CSS工具,记得收藏起来哦。

CSS3 Generator – By Eric Hoffman and Peter
Funk

一款很棒的CSS3样式在线生成工具,由Eric Hoffman设计,Peter Funk开发。

图片 12

CSS Pattern Generator
Patternify
是一款新颖的在线纹理生成工具,到导出为base64格式文件,可以保存为PNG格式图片。

图片 13

Griddle.it – Web page alignment made easy
一款用于设计网页布局的简单工具,不需要任何复杂的网格框架。

图片 14

The 1140px Grid: Fluid down to mobile
The 1140 grid 完美支持1280显示器,在更小的屏幕中也能平滑的缩放。

图片 15

320 and up
用于让网页适合移动小屏幕设备浏览,可配合HTML5 Boilerplate使用。

图片 16

Fighting the @font-face
FOUT

FOUT-b-GONE 帮助你修复@font-face
FOUT 问题,最新FF4已没有这个问题,IE9仍然存在。

图片 17

CSS3 Github Buttons
CSS3 Buttons 用于制作好看的 GitHub 风格的按钮链接。

图片 18

CSS3 Facebook
Buttons

使用 CSS3 制作好看的 Facebook 风格按钮。

图片 19

Minimee
一款用于合并和压缩 CSS 及 Javascript 文件的工具。

图片 20

Live.js
这个工具可以让你总是看到最新的页面,适合写DEMO时用。

图片 21

Bootstrap.less
一款CSS预处理器,实现更快,更容易的Web开发。

图片 22

Animatable: Create CSS3 animations and advertising for Webkit
browsers

用于在Webkit核心的浏览器实现CSS3动画。

图片 23

Ceaser: CSS Easing Animation
Tool

Ceaser 是一款简单的CSS Easing动画工具。

图片 24

CSS Pivot
This tool 允许你给任何网站添加CSS样式,并把结果以短网址分享出去。

图片 25

Roots WordPress Theme
Roots是一个基于 HTML5 Boilerplate、Blueprint CSS(或者
960.gs)的WordPress主题。图片 26

Free Online CSS3 Typeset Style
Generator

一款先进的CSS按钮生成工具,可定制字体、颜色、阴影、边框和圆角等。

图片 27

CSSPrefixer
你讨厌为所有浏览器填写前缀吗?CSSPrefixer 可以帮你。

图片 28

Code Beautifier
这是一款CSS代码美化工具。

图片 29

Markup Generator
一款HTML和CSS代码生成工具。

图片 30

CSS Sprite Generator
这个工具帮助你制作和维护 CSS sprites.

图片 31

你可能还喜欢

  • 推荐40个优秀的免费CSS工具
  • 分享50个 CSS3
    最佳应用示例
  • 24款非常实用的CSS3工具终极收藏
  • 分享27个使用纯 CSS
    实现的图片画廊
  • 使用 CSS3
    可以实现的五种很酷很炫的效果

(编译来源:梦想天空 
原文来自:Powerful New CSS Techniques and
Tools)