分类
其他

CSS3 变换小折腾

为了使用大部分 CSS3 特性,我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在,大部分浏览器只支持部分 CSS3 属性。而且不幸的是,一些属性甚至到最后都可能不被 W3C 推荐,所以通过指定浏览器专有属性,将他们与标准属性区分开来是很重要的(当他们是多余的的时候使用符合标准的样式将之覆盖)。

最常见的私有属性是用于 Webkit 核心浏览器的(比如, Safari), 它们以 -webkit- 开始,以及 Gecko 核心的浏览器(比如 Firefox),以 -moz- 开始,还有 Konqueror (-khtml-)、Opera (-o-) 以及 Internet Explorer (-ms-) 都有它们自己的属性扩展(目前只有 IE8 支持 -ms- 前缀)。

被 CSS3 的动感所吸引,下午折腾了一下,成果就像你现在用 Chrome 或者 Opera 浏览本博并用鼠标经过文章标题的效果一样(FireFox下并不理想)。
使用的 CSS 如下:

h2{
	-moz-transform: translate(0px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(0px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(0px, 0px);
	-o-transition-duration:0.3s;
}

h2:hover{
	-moz-transform: translate(10px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(10px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(10px, 0px);
	-o-transition-duration:0.3s;
}

CSS3 吸引人的当然不只这个,折腾人的是因为它还未成为标准,还有各种不同标准的浏览器…

分类
其他

CSS3 基础知识

本文将普及一些新属性的基本知识: text-shadow, box-shadow, and border-radius. 这些CSS3属性经常被用来增强页面布局, 并且很容易理解.

RGBA

前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明)
1_rgba