芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
12

12 款简化 CSS3 开发的实用工具

作者 芒果/分类 代码/发布于 2011-06-13 12:00

CSS3 Pie


对于 IE6/7/8几乎不支持任何 CSS3 特性,我想大多数人都不会惊讶。不幸的是,有些客户可能需要您创建一个网站,能使得 IE 浏览器下看起来和高级浏览器中效果一致。这就是 CSS3 Pie 施展超能力的时候了:它允许你在 IE 下也能使用很多 CSS3 炫酷功能。
猛击这里访问 CSS3 Pie

CSS3 Builder


有了这个工具,你可以设计出和 Photoshop 效果完全一致的 CSS3 效果。这绝对是一个省时省力的伟大工具。
猛击这里访问 CSS3 Builder

CSS3 Drop shadow generator


这个工具和 CSS3 Builder 非常相似,只要使用滑杆来直观地设计自己的阴影效果。CSS 代码会自动创建,将其粘贴到你的 CSS 文件即可!
猛击这里访问 CSS3 Drop shadow generator

Cascader


此工具不单为 CSS3 设计,但它却非常有用。Cascader 让你输入一些 HTML 代码片段,它会侦测到所有的内联 CSS,把它从 HTML 中分离出来并自动关联 CSS 选择器。
猛击这里访问 Cascader

Border Radius.com


border-radius 是最流行的 CSS3 属性之一。那些切过各种圆角图片的设计师和工程师们当然知道为什么要有这个属性。此工具允许您快速创建一个容器,并得到相应的 CSS3 代码。
猛击这里访问 Border Radius.com

Button Maker


CSS3 使得创建漂亮的按钮更加容易。利用这个工具,CSS3 按钮设计就非常简单啦:只要选择颜色,调整半径,并获得代码,随时可以粘贴到你的 CSS 文件。
猛击这里访问 Button Maker

CSS3 Generator


需要 CSS3 特性的相关帮助?这款工具可以帮助您创建最流行的 CSS3 属性声明:@font-face、RGBA、text-shadow、border-radius 等等。
猛击这里访问 CSS3 Generator

Modernizr


Modernizr 是一个小脚本,用于检测客户端对 CSS3 的支持情况。它会在跟元素 <html> 上添加一个指定 class,让你可以针对特定的浏览器实现特定的样式。例如,如果浏览器不支持多背景,no-multiplebgs 类将被添加到 <html> 元素。这将容易地实现优雅降级。
猛击这里访问 Modernizr

HTML5 & CSS3 Support


要知道 Internet Explorer 8 是否支持 text – shadow 属性?只要有这份非常有用的图表,来告诉你主要浏览器对 CSS3 的支持。这绝对是一个必须收藏的网站!
猛击这里访问 HTML5 & CSS3 Support

CSS3 Gradient Generator


你大概可以猜到,这个工具是一个渐变生成器。只需通过色盘选取颜色,并在预览区预览,拷贝这份调整完成的代码,这是这么简单!
猛击这里访问 CSS3 Gradient Generator

CSS3 Please


CSS3 Please 是一个非常有用的站点,允许你复制和粘贴最通用的 CSS 声明。提供了一个预览区域,你可以在线调试你的代码。这个工具芒果小站之前有介绍过哦:CSS3 Please! CSS3 即时预览体验
猛击这里访问 CSS3 Please

CSS3 Cheat Sheet


当你编码的时候,参考手册是快速记忆语法特性的最有效方式,Smashing Magazine 创造了这个 CSS3 参考表,你可以下载和打印。
猛击这里访问 CSS3 Cheat Sheet

英文原稿:10+ useful tools to simplify CSS3 development | CatsWhoCode
翻译整理:12 款简化 CSS3 开发的实用工具 | 芒果小站

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/10-useful-tools-to-simplify-css3-development/" title="12 款简化 CSS3 开发的实用工具" rel="bookmark">12 款简化 CSS3 开发的实用工具 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 12 条群众意见

  1. Firm /2011-06-13 20:57

    话说我1款都没用过。。 回应

    #1
  2. 最有效减肥产品 /2011-06-14 00:59

    都没怎么用过
    先学习了 回应

    #2
  3. banruosheng /2011-06-14 09:16

    嘿嘿,我只有用里面的两个。果果太给力,有了这神器,还有啥愁的。
    (Modernizr有两个错别字哈:–浙江–容易地实现优雅降级。) 回应

    #3
  4. 美女图片 /2011-06-14 10:30

    过来学习下,很多种都没有用过 回应

    #4
  5. 芒果banruosheng/2011-06-14 10:31

    哈哈,用拼音输入法的悲剧,你懂的~ 回应

    #5
  6. ?
    2011.6.22 CSS Online Tools and CSS hack | Reminde|记忆碎片 /2011-06-22 14:33

    […] Briefing . PHP2011.6.22 CSS Online Tools and CSS hack2011.6.22 CSS Online Tools and CSS hackLinks: 12 款简化 CSS3 开发的实用工具兼容不同浏览器的 CSS Hack 写法No related posts.201106/22CATEGORYDaily BriefingPHPWrite […] 回应

    #6
  7. ?
    12 款简化 CSS3 开发的实用工具 | Reminde|记忆碎片 /2011-06-22 14:39

    […] 参考表,你可以下载和打印。 猛击这里访问 CSS3 Cheat Sheet转载自 12 款简化 CSS3 开发的实用工具 | 芒果小站Related posts:2011.6.22 CSS Online Tools and CSS […] 回应

    #7
  8. 小东别院 /2011-10-09 22:46

    站长大人,你的网站中病毒了,我不管是在哪个位置点击链接我的浏览器都会提示我“阻止了一个弹出窗口,要查看此弹出窗口或其他选项,请单击此处…”病毒的链接地址是:http://www.adminunion.com/?r=mangguo 回应

    #8
  9. 芒果小东别院/2011-10-10 01:30

    哈哈,这是我的另一个站。你肯定在用 IE 浏览器! 回应

    #9
  10. 小东别院芒果/2011-10-10 13:22

    对呀。是IE。这个是普通用户用得最多的一种浏览器。 回应

    #10
  11. 芒果小东别院/2011-10-10 13:33

    嗯,抱歉,已经把浏览器限定为 IE6 版本。 回应

    #11
  12. ?
    简化 CSS3 开发的12 款在线实用工具 | 瑞克互动 /2011-12-05 19:53

    […] Vis 此条目发表在 HTML5/CSS3, 资源 分类目录,贴了 CSS3, 在线, 工具 标签。将固定链接加入收藏夹。 ← 使用HTML5技术的网页设计欣赏 创意日本网页设计欣赏 → […] 回应

    #12

下面我简单说几句