回首页


Hello!everybody!对于CSS3的应用一直是前端的痛。因为国内浏览器IE、IE内核浏览器市场份额实在是太大,对于既想优雅的使用CSS3来实现复杂的页面效果,又不得不考虑国内的情况。苦逼的前端开发人员只能继续使用古老的图片来实现圆角、背景、渐变的效果。

如果你是一个具有探索性的前端攻城师,那么就用CSS3来实现吧!既能锻炼CSS3新的属性,同时对自己的技术不断提高,帮助CSS3应用的推广;也能够实现IE系列的兼容。不过这个过程很痛苦。你得和PM一顿解释为什么这样实现,又得折腾更多的代码!这太苦逼了!可是我们是一群经得起的前端攻城师!! 哈哈~!

对了!本文的一些实例是我做项目中运用到的!主要针对Chrome内核制作开发。故我很幸福哦….而且很是兴奋兴奋滴说!

 

CSS3 Transition的应用

语法:

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]。

取值:

[ transition-property ]:检索或设置对象中的参与过渡的属性
[ transition-duration ]:检索或设置对象过渡的持续时间
[ transition-timing-function ]:检索或设置对象中过渡的动画类型
[ transition-delay ]:检索或设置对象延迟过渡的时间

复合属性。检索或设置对象变换时的过渡。

PS:摘自CSS参考手册

想更多的了解,去看手册吧!这是最好学习的地方哦!

好啦~我们来看个运用实例吧!

首先,看到这个设计图稿时,可能一些人,这个有什么地方可用到transition?童鞋!看到那个红框向上的箭头么?这个是要有交互效果滴!

即:滑进时,图片向上走,显示右边图片的所展示的部分。

嗯,现在看代码了哦~!

这是结构代码

CSS3主要代码:

.ext-block { position:relative; top:0; margin-top:0; transition:0.2s linear 0.2s; -webkit-transition:margin-top 0.25s ease-in-out 0.1s;/*针对webkit内核CSS3的的私有属性,chorme在transition上还属于实验性。*/}.ext-block:hover { margin-top:-95px; }

其中触发的动作就是.ext-block:hover { top:-95px;}

这两句就能实现鼠标滑入时,图片上滑,然后显示其他的。这个省了好多js吧!哈哈!可能有些人说:语法是四个参数,为什么你就写了三个?这个…看手册吧!

 

CSS3 Box-shadow的应用

语法:

box-shadow:none | <shadow> [ , <shadow> ]* 
<shadow> = inset? && [ <length>{2,4} && ? ]

默认值: none

取值:

none:无阴影
<length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
:设置对象的阴影的颜色。
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

PS:摘自CSS参考手册

同样以Transition里的图片为例。
当滑入时,显示阴影。
结构代码一样,主要来看下CSS代码:

.app-list li:hover { box-shadow:0 0 3px #ddd;}

Box-shadow:0 0 3px #ddd;这里为什么不用私有属性,因为chrome已经完全支持啦。
其中第四个参数值基本用不到。
这样就实现了滑入时,显示阴影。而不用苦逼的切背景图了。有时可能IE6用PNG24位的透明图片来处理时,苦逼的出现灰色色块。

CSS3 Border-radius的应用

语法:

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默认值:0
取值:

<length>:用长度值设置对象的圆角半径长度。不允许负值
<percentage>:用百分比设置对象的圆角半径长度。不允许负值

说明:
设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数
水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个,将用于全部的于四个角。
如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。

PS:摘自CSS参考手册

这张截图,按钮的圆角用的border-radius来实现的,不用苦逼的用图片做拼合了。
以下为实现的结构代码和CSS3代码:

.download-btn { position:absolute; right:10px; top:50%; margin-top:-13px; width:138px; height:26px; line-height:26px; border:1px solid #2d53af; border-radius:2px; box-shadow:inset 0 1px 1px #6e9ae0, 0 1px 2px rgba(0,0,0,0.3); background:-webkit-linear-gradient(#5588da,#4d7bd6); color:#fff; font-size:14px; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,0.3); text-align:center;}

border-radius:2px;这个是实现了四个角是圆角啦!简单吧?

顺便说下,这张图的三态,完全可以用CSS3来解决。其中的圆角,阴影,文字阴影,内阴影,背景渐变等都是用CSS3来实现的。这块的CSS代码已经给出了哦!自己可以看下!其中文字阴影和box-shadow类似。

 

CSS3 Background渐变的应用

语法:

background-image:<bg-image> [ , <bg-image> ]*

<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值:none
取值:

none:无背景图。
<url>:使用绝对或相对地址指定背景图像。
<linear-gradient>:使用线性渐变创建背景图像。(CSS3)
<radial-gradient>:使用径向(放射性)渐变创建背景图像。(CSS3)
<repeating-linear-gradient>:使用重复的线性渐变创建背景图像。(CSS3)
<repeating-radial-gradient>:使用重复的径向(放射性)渐变创建背景图像。(CSS3)

说明:
设置或检索对象的背景图像。
如果设置了background-image,同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

PS:摘自CSS参考手册

同样以上面按钮图片来做实例。给的样式代码是简写了。没有用background-image,而用background,效果是一样滴!只是这个是用于线性渐变。具体的语法规则请参考手册吧!

.download-btn { position:absolute; right:10px; top:50%; margin-top:-13px; width:138px; height:26px; line-height:26px; border:1px solid #2d53af; border-radius:2px; box-shadow:inset 0 1px 1px #6e9ae0, 0 1px 2px rgba(0,0,0,0.3); background:-webkit-linear-gradient(#5588da,#4d7bd6); color:#fff; font-size:14px; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,0.3); text-align:center;}
.download-btn:hover { text-decoration:none; border:1px solid #4076ff; background:-webkit-linear-gradient(#649aff,#5286ff);box-shadow:inset 0 1px 1px #83afff, 0 1px 2px rgba(0,0,0,0.3); text-shadow:1px 1px 0 rgba(0,0,0,0.3);}
.download-btn:active { background:-webkit-linear-gradient(#649aff,#5286ff);box-shadow:inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);text-shadow:1px 1px 0 rgba(0,0,0,0.3);}

这就是三态时,不同的渐变背景色的运用!只是这用了webkit的私有属性。这个就不用我解释了吧?类似transition。

以上这些是比较基本而且常用到的一些CSS3新的特性来开发项目。在CSS3的运用上,我们还有很长的路要走,毕竟现在国内市场做前端的很痛苦!

忘记说了,这个是项目是我在360极速浏览器扩展中心运用到的一些效果,上线后我去看了下,其中的Transition效果去掉了,采用js来实现。这个具体情况不清楚,可能他们考虑的更多吧!毕竟极速现在是两个内核(IE内核)哦!按钮的也弄成图片,这个我能理解。因为在里面增加了个“+”号!这个东西用文本来控制确实不好实现,在不同系统下、不同字体下会变形。不过好多地方的一些运用还是存留滴,像阴影什么还在。顺带说句,里面也用到了CSS3的display:box;布局!这个很有意思!有兴趣的可以去了解下。

浏览 (35,800) 评论 (0)