CSS3 开发工具收集
发布时间:2010-04-17 00:24:56 作者:佚名
我要评论
神采飞扬收集的一些CSS3 开发工具,学习css3的朋友可以参考下。
通常来说,CSS非常简单。但是当浏览器厂商开始实现CSS3特性,问题开始变得有些复杂了。不难,只是有些复杂。这可能包括两个方面:首先有些心得CSS3属性(比如,transition、渐变、transform等)不是那么简单,其次我们不得不使用浏览器厂商指定扩展。

直到你最喜欢用的IDE原生支持CSS3,你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的,这里将收集能够助你学习和使用CSS3的真正有用的工具。
生成器
- CSS3 Please!跨浏览器的CSS规则生成器,支持:border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
- CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
- CSS3 Sandbox有一些列的CSS3生成器:线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
- @font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
- CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
- CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的“border-radius”属性。
- Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
- CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。
JavaScript方案
- Modernizr一个确实很有用的JavaScript库,可以检测HTML5/CSS3的原生支持,并为你提供一种维护良好控制级别的方法,不管浏览器的能力。如果你更喜欢使用MooTools,你可以使用MooModernizr (MooTools 版本的Modernizr)
- Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎,被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器,比如忽略选择器(escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
- YUI 选择器组件YUI CSS3 选择器组件,提供一个收集、过滤和测试HTML元素的稳定的简写方法。
- ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
- CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本,然后在你的样式表中使用这些伪类选择器,然后IE就可以使用了。
参考指南
- CSS 3.0参考手册 打包下载地址
腾讯ISD WebTeam制作的一个CHM格式的参考手册,很全面,介绍+实例,推荐下载收藏; - 我什么时候能用CSS3CSS3、HTML5、SVG以及其它即将可用的页面技术的浏览器兼容性列表;
- 浏览器支持清单使用Modernizr库检测你的浏览器支持的“高级”特性,包括CSS3特性和选择器的支持。
- CSS3选择器测试自动运行大量的判断你的浏览器是否支持一些CSS选择器的小测试;
- SelectORacle一个提供CSS2和CSS3选择器介绍的在线工具。简单的给它一些选择器,他就会返回选择器匹配的相关说明。
- CSS3手册与快速指南提供当前CSS3规范的列表,列出属性可用的值、常用的选择器模式参考,以type/单位组织,选择器类型参考和单位参考和信息(另有PDF 版本);
- CSS3伪类SitePoint的CSS参考的相关部分内容;
- CSS3 速查手册CSS3属性、选择器类型以及可用的值的列表,PDF格式;
提供所有147种色彩的名字以及按照字母排序的值。
如有更多有用的工具,欢迎通过评论分享。
相关文章
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果,文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性,结合实例代码给大家介绍的非常详细,感兴趣的朋友一2025-02-19- CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans2025-02-19
- 本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式2025-02-19
- 这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-02-13
本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,感兴趣的朋2025-02-11- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24






最新评论