I am houbiao beta 0.1

chrome 27.0 has removed desktop version of -webkit-text-size-adjust property

分类:CSS3

Chrome升级到27版本以后取消了-webkit-text-size-adjust属性,这个属性都知道,就是用于在webkit核心的浏览器里设置字号小于12时用的,为什么取消,是有一定根据的。因为如果用了这个属性,那么对网页缩放的时候应用了这个属性的标签就不会放大/缩小了,对于正常人来说也许无所谓,但是对于视觉障碍的用户是不友好的,当浏览一个字码很小的页面时,你是否希望通过放大屏幕的比例来看的更清楚呢?没错,但是有了这个-webkit-text-size-adjust:none;你就不能放大(或缩小)了。

解决方法当然也是有的,通过-webkit-transform:scale();来进行缩放,但是这个缩放的是整体容器,并非容器内的字体,所以也会在一定程度上有所限制,比较麻烦,很不推荐,还是遵循标准来吧,这也算是通往WEB标准的一个小里程碑了。...

read all...

3302 reads 0 comment

CSS3 transition 过渡动画

分类:CSS3

今天熟悉了下CSS3的transition属性,即过渡动画(非常类似于jQuery的animate属性)。有了这个属性之后,一些简单的过渡动画就无需jQuery之类的库了,直接在CSS里即可完成,废话不说,上示例,DEMO - CSS3 transition 过渡动画

代码的组成和参数也相对很简单明了,我们来详细看一下:-webkit-transition: property duration timing-function delay;这一句定义了在webkit浏览器下一个变换动画的4个属性(注:在Firefox浏览器下应使用-moz前缀,Opear下则使用-o前缀)。...

read all...

48433 reads 3 comments

CSS3 -webkit-gradient之linear-线性渐变

分类:CSS3

CSS3在webkit核心浏览器下的渐变样式,包括线性渐变(linear)和径向渐变(radial)。本节主要认识一下linear-线性渐变。基本语法如下:background-image: -webkit-gradient(linear,left top,left bottom,from(#f00),to(#ff0),color-stop())}

以上就是创建一个最基本的线性渐变,其含义是:首先告诉浏览器这个是webkit核心的属性,渐变样式为linear,从left top到left bottom,画一个由#f00到#ff0的渐变。结果如图。CSS3 -webkit-gradient之linear-线性渐变...

read all...

3618 reads 0 comment

CSS3 border-radius

分类:CSS3

一直没怎么动CSS3的样式,今天拿border-radius做个简单的哆啦A梦,感觉还不错,样式处理的还算圆滑。留作笔记吧。(radius翻译为半径)CSS3 border-radius

该属性用于给元素添加圆角效果,同理也可以让元素变成一个圆。...

read all...

47062 reads 1 comments