CSS3入门:由点到面

2012-08-21 09:22 稿源:胡太狼  0条评论

最近尝试着接翻译图书的活儿,但是相碰到内容精致的图书,机会还是很少的,试译了一下Smashing Magazine出版的Mastering CSS for Web Developers书中的一章节:CSS Three——Connecting the Dots(作者:Trent Walton)。总体来看,翻译的投入和产出比不是那么令人满意,倒不是酬金的问题,关键是图书的内容零散,没有体系,每篇文章的技术点也都很泛,既然翻译了就放出来吧。

——Starting Point——

作为Web社区,我们已经在CSS3方面取得了很大的进步。当我们开始使用background-clip和过渡动画(transition/animation)等可视化效果时,text-shadow和border-radius已经司空见惯了。我们似乎花了大量的时间争论何时或如何引入这些属性。一个特性不兼容所有浏览器或暂时未完全文档化,并不意味着我们不应该使用它。对此,我持相反态度。

我们可以利用业余时间在博客文章里讨论总结出CSS3的最佳实践。开发者绞尽脑汁,通过大量实验创造出了一些极具创新且合理的方法供大家来更好地掌握CSS3。现在,有大量的特性结合和使用点等待着我们去挖掘,动起手来吧!

如何起步?

我最喜欢做的事情之一就是浏览CSS特性列表并考虑哪些组合在一起使用更合理。如果我将@font-face和text-shadow、bg-clip:text联系在一起可行吗?webkit-transition和opacity呢?以下是我最近的一些实验结果。虽然有一些可能比其他的更实用,但主要是抛砖引玉,通过新颖的方式鼓励大家去实践。

注:以下的实验效果只适用于Google Chrome或Safari等Webkit内核浏览器。

案例一:CSS3过渡效果

CSS3可视化效果可以从color、background或border等的鼠标悬停(hover)CSS基础特性开始。首先,我们针对链接颜色设置0.4秒的过渡变换效果。

链接CSS代码如下(包括悬停状态):

接着我们需要利用CSS3设定过渡属性(transition-property)、过渡持续时间(transition-duration)和过渡变换效果(transition-timing)。此案例中,我们设定持续时间为0.4秒,变化效果为ease-out(ease-out变换的节奏为原效果迅速消失,新效果会慢慢隐现)。CSS过渡特性详细内容可参考此文章Surfin' Safari Blog post on CSS animations。我特别喜欢这种效果,因为这样可以提醒用户当前状态正在改变。

你也可以进行代码合并:

查看在线案例

最后的效果就是当鼠标悬停在链接位置时,红色文本链接会变化至蓝色。大家可参照着举一反三。接下来的是导航栏的悬浮效果。

先实现3像素的底部边框,以及悬停时的50像素边框:

同时我们为边框延伸设置了0.3秒的过渡效果延时:

查看在线案例

参考案例

以下的网站均运用了上述的一些类似特性。

1. Team Excellence

导航栏使用了webkit过渡效果,0.2秒的效果过渡也避免了访问者过长时间的等待。

2. Ackernaut

Ackernaut为所有链接悬停提供了精细的过渡变换,同时将此特性扩展到网站头部。

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多

关闭