CSS3实现11种经典的CSS技术
在CSS2中，我们为了达到一定的设计效果，时常都需要添加额外的<div>或使用PNG图片等方法来实现。当CSS3的时代到来之际，我们不应该只局限于这些老技术，我们应该大胆的去尝试一些新技术。今天我们就跟随Ｎettuts的Vasili的教程《11 Classic CSS Techniques Made Simple with CSS3 》。来学习使用CSS3新技术实现十一种经典的CSS样式效果。
上面的十一种技术，我们将一起来看看CSS2和CSS3实现的对比之处，由于CSS3是一种新的技术手段，在IE6-8下是无法正常运行，所以我们下面所讨论的所有CSS3相关技术实现效果不包含IE6-8，不过部分CSS3技术在IE9+的浏览器要可以支持了，如果你还在使用IE6-8阅读此文，我强列建议你现在就着手安装：Mozilla Firefox、Google Chrome、Safari、Opera你将会体验到更好的效果。
什么是CSS3？
我想CSS大家都听说过，对于一位Web攻城师来说更是不可在熟悉的东东了。那么CSS3呢？其实CSS3在语法方面，和CSS没有太大的不同之处，但是CSS3的功能就强大的多了。正如你看到这十一个技术，你可以使用border-radius设置制作圆角效果、box-shadow制作盒子的阴影效果、text-shadow可以实现文字阴影效果、RGBA可以制作透明通道色、opacity可以实现元素的透明度、background-size可以改变背景图片大小、Multiple Backgrounds用来实现多背景、columns用来制作多列排版、border-image可以制作出图片边框效果、transition可以实现动画效果，@font-face实现自定义字体,当然还有其它的一些CSS3技术，制作一些更炫的效果。
在CSS3.info有一段话是这样描述CSS3的：
CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.
如果你还想了解更多有关于CSS3的介绍，你可以到W3C.org上了解CSS3。
下面我们主要跟随Ｎettuts站长Vasili的教程《11 Classic CSS Techniques Made Simple with CSS3 》一起来学习上面所列的十一种技术，CSS和CSS3实现的不同之处。
一、圆角制作
这个方法是我最喜欢的一个方法，因为在Web应用中，圆角的使用是越来越多见了，使用CSS3 border-radius可以在几秒钟内创建出你需要的任何圆角效果。在CSS3 border-radius还没有出现的时候，我一般都是通过加上四个额外的<div>然后使用四张透明的背景图片来模仿制作圆角（比如说通过RoundedCornr制作圆角图片）或者使用javaScrpt方法实现圆角，也有使用jquery插件来制作圆角（jQuery Corner）。使用图片和js都占用了资源，特别是当用户禁用了js后将无法正常呈现。如果你愿意使用纯CSS制作的圆角效果，你可以参考下面的方法：
经典实现方法：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
$('.box').corners('10px');
});
</script>
<div class="box">
<!--CONTENT-->
</div>
传统方法使用了jQuery的插件Corners实现，当然你也可以使用纯CSS配合背景图片实现，大家可以点击RoundedCornr查看在线的制作方法。
CSS3方法
<style type="text/css">
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
正如你所看到的，我们使用了CSS3的Border-radius来制作的圆角，有关于Border-radius具体使用方法，你可以点击本站的《CSS3的圆角Border-radius》，了解他的使用规则。
大家可以查看DEMO看效果，如果你对圆角的制作感兴趣的话你还可以点击CSS JUICE为大家总结的《25 Rounded Corners Techniques with CSS 》一文，学习更多的圆角制作方法。
二、盒子阴影(box-shadow)
CSS3 Box-shadow给我们在web页面制作中提供了一个强大的工具，现在越来越多的页面使用了阴影效果，来加强其质感。以前经典的处理方法是使用div来模仿阴影效果，不过这种效果生硬，也有使用图片，但受限很多，也有使用Dropshadow.js的插件来实现。下面我们一起来看看经典制作方法和CSS3的方法：
经典CSS方法
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
$('.box').dropShadow({
left: 5,
top: 5,
opacity: 1.0,
color: 'black'
});
});
</script>
<div class="box">
<!--CONTENT-->
</div>
上面的方法使用了jQuery的Dropshadow.js插件。虽然实现也算简单，我但我更喜欢下面的CSS3方法。
CSS3方法
<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
具体大家可以参考下面的DEMO。有关于CSS3 Box-shadow的详细介绍大家可以点击《CSS3 box-shadow》一文查阅。
三、文字阴影效果(text-shadow)
用过ps的朋友都知道文字阴影是如何制作出来的，在LINE25中Chris Spooner介绍了一种新方法《Create a Letterpress Effect with CSS Text-Shadow》，Chris Spooner在文中也是使用的最新技术CSS3的text shadow。而最老的实现方法是下面这种：
CSS经典方法
<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
<div class="fonts">
<span class="font">The quick brown fox jumps over the lazy dog.</span>
<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>
上面方法使用了绝对定位来实现的，不过使用了两个相同文本，如果文本过长就很难定位实现。
CSS3方法
<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>
CSS3提供了一个text-shadow属性来制作文字的阴影效果，有关于CSS3 text-shadow制作阴影文字，大家还可以点击《CSS3 制作文字特效》，文中介绍了多种阴影特效效果，如果你还不知道如何使用CSS3 text-shadow的话，你可以狠狠的点击《CSS3的文字阴影—text-shadow》查阅其具体的使用方法。最后大家可以查看DEMO。
四、自定义字体(@font-face)
一直以来都向往着在web页面制作中使用自己喜欢的字体来排版，现在有了CSS3的@font-face就爽了，可以不使用任何图片，不使用任何的js就能实现各种各样的字体，不过这个属性有个不足之处，不太实适应于中文，具体原因是什么？大家可以参阅《CSS3 @font-face》一文 。在没有CSS3 @font-face时，要想在页面中实现花哨的字体时，我们不得不使用图片或借助js来实现。
CSS经典方法
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>
上面这种实现方法，大家可以点击《The Easiest Way to Use Any Font You Wish 》查看更详细的介绍。
CSS3方法
<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>
我们使用@font-face创建了一个font-family，然后在使用中具体的引用这个font-family。Michael Owens在《6 Ways To Improve Your Web Typography 》中有介绍过@font-face，大家也可以点击本站的前一篇教程《CSS3 @font-face》。最后大家也可以看看下面的DEMO。
五、透明元素(opacity)：
如果你最近有访问Envato website，你就会发现，这个网站上使用了大量的透明属性——CSS3 Opacity。这个属性使用有一段时间了，在IE下我样要配合IE的滤镜一起来使用，只是有一点需要注意的，使用opacity制作透明效果会影响其所有后代元素的透明度。
CSS经典方法
<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
<div class="box">
<!--CONTENT-->
</div>
CSS3方法
<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
用CSS3属性，我们可以不考虑IE下的效果，所以可以直接把IE下的滤镜去掉。具体效果DEMO。如果你想了解其使用方法，可以参阅本站的《CSS3 RGBA》一文。
六、RGBA
大家都知道RGB代表的是工绿蓝三色，但不知道A是什么？其中的A表示的是通道，这是指透明度。
除了border-radius属性之外，其中RGBA也是CSS3属性中最常用的一个。我时常使用它来改变链接色或者背景色。在没有RGBA之前，我们都需要PHP配合来使用。
CSS经典方法
你只需要将下面的代码保存成“rgba.php”，然后在你需要使用rgba的元素上这样调用 url(rgba.php?r=R&g=G&b=B&a=A)
<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>
将上面的代码保存为“rgba.php”，然后在需要运用rgba的元素上这样调用：
<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>
CSS3方法
<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>
CSS3的方法简单多了吧，使用rgba我们可以使用在任何有元素的属性之上，如color,background-color,border-color等，大家可以查看DEMO效果。同时可以点击本站的有关教程《CSS3 RGBA》了解其具体的应用。
七、背景图片尺寸（background-size）
background-size属性是一个很神的东西，当你在创建一个流体布局时，这将帮你改变背景图片大小是非常的方便。
CSS经典方法
<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
z-index: 100;
}
.box .content {
position: absolute;
z-index: 200;
}
</style>
<div class="box">
<div class="content">
<!--CONTENT-->
</div>
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/423_screenr/200x200.jpg" alt="" />
</div>
CSS3方法
<style type="text/css">
.box {
background: #ccc url(http://d2o0t5hpnwv4c1.cloudfront.net/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
-moz-background-size: 50%; /* Firefox */
background-size: 50%; /* w3c */
}
</style>
<div class="box">
<!--CONTENT-->
</div>
有关于background-size的详细介绍，大家可以点击本站的相关教程《CSS3 background-size》。也可以查阅本例DEMO。
八、多背景（Multiple Backgrounds）
以前制作多背景效果，我们都需要多个div来辅助实现，在每个div中放置一个背景图片，然后通过定位来实现。
CSS经典方法
<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
.box2 {
width: 100%;
height: 100%;
background: url(images/text.png) center center no-repeat;
}
</style>
<div class="box">
<div class="box2">
<!--CONTENT-->
</div>
</div>
CSS3方法
<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
具体如何操作Multiple Background请大家移步到教程《CSS3 Multiple Backgrounds》中阅读。大家也可以点击实例的DEMO。
九、多栏排版(columns)
这个属性是最有趣的一个属性，能让你的web页面像报纸杂志一样分多列排版。通常我们都是使用float来制作，也可以使用jQuery的columnizer.js插件动态实现。
CSS经典方法
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
$('.columns').columnize({
columns: 2
});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>
CSS3方法
<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>
这里只做了一个最简单的演示，如果你想了解更多的信息，你可以点击the multi-column page at CSS3.info或者直接点击本站有关于CSS3教程中的《CSS3 Multi-columns 之跨列》。DEMO演示。
十、图片边框(border-image)
border-image到目前为止，只有Firefox3.5+上的版本支持，大家可以点击Chris Spooner’s website，网站里面使用了border-image制作的效果，大家可以参考一二。虽然现在并不被所有浏览器支持，但这将是一种趋势，我们可以先对它进行学习。
CSS经典方法
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
上面的实例告诉我们可以使用borderImage插件实现图片边框 的效果。
CSS3方法
<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
详细使用可以点击《CSS3 Border-image》一文。查看DEMO。
十一、动画效果（Transition）
Web页面上使用动画，能增加用户检验，以至于你的页面不会显得那么呆板。以前实现动画效果，我都都是使用js或jq实现。
CSS经典方法
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').hover(function(){
$(this).stop().animate({
top: '20px'
}, 300);
}, function(){
$(this).stop().animate({
top: '0'
}, 300);
});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
CSS3方法
<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
-moz-transition: top 300ms linear;
-o-transition: top 300ms linear;
-ms-transition: top 300ms linear;
transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
查看DEMO。有关于transition的使用，可以阅读前面的教程《CSS3 Transition》。
上面我们一起见证了CSS3中的十一个新技术给我们带来的好处。有了它们我们制作一些特殊效果将不在是那样的痛苦，当然现在还不能完全得到应用，因为你不得不顾及IE6-8下的用户。但是就只是学习，那将是畅通无阻的。新的技术来了，我们应该有一种激情，去接受这些新东西，不要顾及左右。大家一起随我向前冲吧。如果你对CSS3感兴趣的话，可以点击本站的CSS3栏目组，里面收录了许多有关于CSS3的各种教程，我想你是会喜欢的。当然大家也可以观注W3cplus有关更新。我会尽量录入一些新技术、新教程进来。
在结束本次教程之时，再一次感谢Vasili给我们带来这么优秀的教程《11 Classic CSS Techniques Made Simple with CSS3 》。如果你对本次教程中使用的实例感兴趣你也可以查看DEMO，或者可以直接点击这里下载源码到本地学习。当然要是你有更好的想法或创作，可以直接在评论中与我们一起分享。
如需转载烦请注明出处：W3CPLUS
Material Matters: The Evolution of Air in Sneakers