|
[tr][td] CSS工具对网页开发及设计人员来说是一项很重要的资产，它简化了网页开发及设计人员的工作同时又能达到他们预期的效果。这些工具不仅为他们节省了大量的时间，而且让他们得以使用快捷的方式创建别致的，功能性的，优化的网站。
无论你是新手还是经验丰富的开发人员，CSS工具都可以帮助你学习理解CSS的功能并且掌握它。幸运的是网上有一些CSS工具可以帮助开发人员写出更好并且可运行的CSS代码。在这篇文章里我们收录了15个最新的CSS工具。这15个工具每个开发人员都应该知道并了解到。希望您能够从我们的收录中获益。 那么接下来，我们就一个个来看一下吧。 Simptip Simpletip是一个简单的用Sass创建的CSS Tooltip，是一个轻量级的CSS文件，因此非常容易加载和个性化。使用Simpletip你可以创建不同的tooltip信息。它和所有的浏览器都兼容并且可被置于上下左右各个方向。你还可以为提示信息，成功，危险及警告等事件设置不同颜色的Tooltip。 另外，Simpletip还带有一些很棒的功能，例如软边线（soft edge），可移动效果（ movable effect），多行Tooltip（multiline tooltip），淡入淡出显示（fade effect），和半箭头（half arrow）功能，这些都能让你的Tooltip看起来很别致。这些功能可以单独也可以合并起来使用。 图片：100519hfj3on7c125zdlgh.jpg  AbsurdJS AbsurdJS是一个用JavaScript写的能够支持HTML和CSS的预处理器。你可以使用AbsurdJS把JavaScript，JSON， YAML转换成HTML，把JavaScript， JSON， YAML， CSS转换成CSS。它支持Nodejs和浏览器，并且一个额外的好处是提供流行编程语言的语法，如JavaScript。 正如其他预处理器一样，它具有如文件导入，变量，media queries bubbling， mixins， 嵌套选择器（nested selectors）等诸多其他功能。可被用作纯JavaScript以使用变量来生成CSS文件或者以实现其他的动态功能。另外，它支持GruntJS。 图片：100519hfj3on7c125zdlgh.jpg XCSS XCSS和Browserify一样是一个用于编写模块化CSS组件的套件。它带有一些很棒的功能包括压缩类名（ class name compression）, 转换样式表SAT（stylesheet AST transformations），消除不用的类规则（elimination of unused class rules），生成细粒度的源图（ fine-grained source maps generation），支持运行返工转换（support for running rework transforms）。XCSS的关键功能是它使用节点模块的解析算法（Node module resolution algorithm）来解决各独立CSS模块之间的依赖关系。换一种说法就是它支持从npm安装包导入CSS代码。 图片：100519hfj3on7c125zdlgh.jpg Bulletproof Email Buttons Generator Bulletproof Email Buttons Generator由Campaign Monitor开发，它可以让你使用逐步增强的CSS和VML来设计漂亮的按钮。你可以很容易地通过改变背景图片，边框颜色和辐射光线，按钮的宽度和高度，背景颜色，按钮上的文字和字体颜色来定制化你的按钮。除此之外，Campaign Monitor提供了一个在email中创建Bulletproof Background Images的工具。 图片：100519hfj3on7c125zdlgh.jpg CSS & JavaScript Toolbox CSS & JavaScript Toolbox（ CJT）是一个为WordPress创建的强大的代码管理插件。它简化了添加网上代码到你的站点的过程，并且提供了让你简单修改和扩展WordPress站点功能及外观的一系列工具。 当我们说到编码和开发工具时，网页设计及开发人员常常使用如Eclipse，Zend Studio，和 Coda等类似的桌面发布工具。 CJT则是一个针对WordPress的在线 IDE。它不仅让你创建代码，并且管理与代码交互的东西，例如，你可以指定你的代码与文章，页面，自定义文章，主页分类，仪表盘等进行交互。 图片：100519hfj3on7c125zdlgh.jpg Odometer Odometer是一个 Javascript和 CSS类库（ library），你可以用它来创建类似机场信息公告牌，车辆里程表和老虎机所显示的过度流畅的数字。这个独立的轻量级的类库使用CSS变形来制作效果。只需要使用一个一行的函数，就可以将一个给定元素的值变为另一个预先定义的值。 图片：100519hfj3on7c125zdlgh.jpg Ink 由Zurb开发的Ink是一个电子邮件框架系统，使用它你可以创建漂亮的，动态的，响应式的，可以在任何设备和包括Outlook在内的任何电子邮件客户端良好运行的HTML电子邮件。它带有一个12栏的网格和一些简单的UI组件，你可以用来快速地进行原型制作。Ink为基于表格的网格（a table-based grid），视网膜图（retina images），仪表板（panels），按钮等提供样式。一旦你准备好了你的邮件，你可以通过Inky's Inliner来使用这些样式。 图片：100519hfj3on7c125zdlgh.jpg Animo.js Animo.js是一个不错的帮你管理CSS动画的工具。它提供强大的功能，如制作奇幻特效，动画结束时设置回调（callback），创建cross-browser blurring 及堆砌动画（ stack animations）。它的animate.css类库（ library）很是令人惊喜，其中包含了大约60个非常好的动画。你可以通过鲍尔的包管理器（bower's package manager）或者GitHub来安装它。Animo.js唯一依赖于jQuery 2或者更新的版本。 图片：100519hfj3on7c125zdlgh.jpg CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheet是一个可直接用于网页项目中无需预先设置，即插即用动画的集合。你需要做的是事先把样式表添加到你的站点并应用预先定义好的CSS类来使某个元素动起来。它使用 CSS3 @keyframes并且和所有近代的浏览器都兼容。对于老一点浏览器来说，即使动画没有被激活，动画元素仍然会出现并对用户可见。 图片：100519hfj3on7c125zdlgh.jpg Create CSS3 Create CSS3是一个简单的CSS3生成器，它列出属性让你自定义属性值并实时进行预览。它可以为包括Chrome, Firefox, Safari, Opera and Internet Explorer等在内的所有的主流浏览器生成CSS3。你可以为相同的元素添加多重规则，还可以编辑生成的CSS代码。 图片：100519hfj3on7c125zdlgh.jpg CSSO CSSO (CSS Optimizer)是一个 CSS minimizer，它可以优化CSS文件的结构来压缩文件的大小。它可以完成从合并带有相同选择器或属性的代码块到移除注释和空白等所有事情。去掉CSS里所有不必要的东西，它可以让你的站点运行得更快。 图片：100519hfj3on7c125zdlgh.jpg UIBox UIBox是HTML，CSS，和 JavaScript的一个可搜索的UI组件类库。除了搜索以外，你还可以通过它提供的标签查找不同类型的UI组件。在 UIBox的帮助下，你可以知道一个组件支持哪些浏览器，组件表现如何，在单一页面上它具有什么样的依赖性。同时，它能给你提供一些类似组件的建议，这样你可以通过比较这些组件找到更好的组件来使用。 图片：100519hfj3on7c125zdlgh.jpg nthChild nth-child是一个强大的CSS选择器，它使用公式来选择元素。用它来设计你的页面布局是非常有用的。特别的是使用 nth-child你可以选择在父元素里改变某个特定元素。它可被应用于不同类型的域（ranges）用来选择特定域里的元素。 <font size="3">如果你不熟悉这个选择器的用法，有个网站nthMaster可以给你提供很多帮助。这个网站以为nthChild <span style="background-color: tran/td/tr/tablediv id="> 更多 |
|
