CSS3入门——由点到面 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> CSS3入门——由点到面

CSS3入门——由点到面

浏览:3729次出处信息

最近尝试着接翻译图书的活儿，但是相碰到内容精致的图书，机会还是很少的，试译了一下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代码如下(包括悬停状态)：

a { color: #e83119; }
a:hover { color:#0a99ae; }

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

a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}

你也可以进行代码合并：

a { -webkit-transition: color .4s ease-out; }

查看在线案例

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

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

border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }

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

border-nav a { -webkit-transition: border .3s ease-out; }

查看在线案例

参考案例

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

1. Team Excellence

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

2. Ackernaut

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

3. DesignSwap

DesignSwap网站里，所有文本链接都有0.2秒的悬浮过渡效果，个人头像会隐现并变为“浏览详细内容”文本链接。

4. Eric E.Anderson

译者注：该网站已改版，与原内容不符，略去

案例二：背景裁剪

提及text-shadow和@font-face时，background-clip属性不乏亮点。简单说来，我们获取一张图片，将文本覆盖在该图上。代码非常简单，div标签里引入bg-clip类：


kablamo!

接着是CSS部分。首先，图片需要设置为背景图片。-webkit-text-fill-color属性设为transparent，-webkit-background-clip属性设为文本。

bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

查看在线案例

参考案例

仅仅是一个简单的实现方法，却诞生了一些有趣、创造性的案例。

1. Trent Walton

我自己的一个实验，结合bg-clip和@font-face的设计。

2. Neography

将rotate、bg-clip和@font-face综合使用的精彩案例。

3. Everday Works

我所见过的最早实现CSS文本旋转的案例之一。

4. Panic Blog

Panic博客对发表的文章进行了随机旋转，你可以通过刷新来观察微妙的变化。

5. Sam Brown

译者注：该网站已改版，与原内容不符，略去

案例三：CSS变形、阴影和色值

简单几行CSS代码就能取代以前的一些额外的图片及相关标注工作。本案例将box-shadow和RGB值与案例二中的一些变形特性相结合。首先创建4个图片文件，每张图片展示了Smashing Magazine主页的不同时期版本，并配上阴影和相关的旋转效果。

HTML代码如下：

通过CSS添加RGBA阴影：

.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);
}

box-shadow属性中，头两个值分别表示了x和y方向的补偿值，这里x方向设为0，y方向设为3像素补偿。最后的数值表示阴影模糊度大小，这里设为4像素。

RGBa也与上述类似。RGBa分别代表了红色(red)、绿色(green)、蓝色(blue)、不透明度(alpha)。案例中，RGB值为(0,0,0)，不透明度为50%，即0.5。

最后，通过CSS为每个截图添加旋转变换特效：

.smash1 {
margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}
.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}
.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}
.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);
}

查看在线案例

参考案例

1. Butter Label

该网站充分利用了CSS3的相关特性。注意订阅表单处的transform和box-shadow属性。

2. Hope 140

译者注：该网站已不存在

3. Simon Collison

Simon Collison在他的新网站中，为每个缩略图链接都应用了RGBa和box-shadow。

案例四：CSS3动画

如果你想挑找自我，尝试一些新的CSS3特性，那么CSS3关键帧动画(keyframe animation)值得尝试。本案例，我们主要是让一张圆形的png图片沿着矩形边沿轨迹运动。首先在div类里引入原型图片：

第一步，为.circle_motion类设置相关属性，包括动画名赋值：

.circle_motion {
-webkit-animation-name: track;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
}

剩下的工作就是设定关键帧值，简单起见，我将8秒的动画分成了四个部分：

@-webkit-keyframes track {
0% {
margin-top:0px;
}
25% {
margin-top:150px;
}
50% {
margin-top:150px;
margin-left: 300px;
}
75% {
margin-top:0px;
margin-left: 300px;
}
100% {
margin-left:0px;
}
}

查看在线案例

参考案例

1. Hope 140

注：此网站已无法浏览

2. Optimum7

Anthony Calzadilla结合CSS3、JQuery和HTML5技术重新勾勒了蜘蛛侠。具体的可以参考他的文章“Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 - Look Ma, No Flash!”。