制作Search Box的效果，我想大家都有亲身的体会了，同时我可以十分肯定，制作下面展示的效果，十有八九都是使用图片来实现。那么今天在这个教程中，您将和我一起见证一件事情——如何使用HTML5的占位符（placeholder）属性和CSS3来创建一个超酷而又实用的搜索框。由于“placeholder”是HTML5中的一个新属性，对于部分浏览器是不支持的，如果您想在不支持这个新属性的浏览器中使用这个属性，你可以考虑使用Modernizr的检测功能。
在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。
今天的教程我们是使用CSS3来制作一个Seach Box效果，这种效果的灵感来自于Apple的官网。当您的鼠标点击了Search Box或者说当Search Box获得焦点时，Search Box会慢慢的变长。
今天这个教程，主要使用CSS3来制作一个边栏菜单，在这个教程中，我主要使用了CSS3的多个属性，比如说：CSS3 选择器——伪类选择器中的“:before”和“:after”制作ribbon效果，并配合CSS3的Gradient、RGBA、Border-radius、
上周六参加WebReBuild的上海站活动时，@点头猪分享的《渐近增强——基于CSS3的浏览器分级策略》，里面有一个使用CSS3的Animation制作的蝴蝶飞舞的效果特别吸引人。特决定回来尝试一下，但制作出来的效果总是有不同之处，后来经@点头猪的指点和代码分享，终于整明白了怎么回事。
Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。换句话说：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，你可以直接使用到您的项目中。
要在你的项目中使用，简单的很，就是三步完成：
在Web页面开发中，自从有了<div>的出现，大家就在讨论table。就出现了什么时候？如何使用div，什么时候？如何使用table的争论。虽然争论不少，但最后得出的结论是一致的：当你需要在页面中处理与数据时，table是首选之一。
在CSS2中，我们为了达到一定的设计效果，时常都需要添加额外的<div>或使用PNG图片等方法来实现。当CSS3的时代到来之际，我们不应该只局限于这些老技术，我们应该大胆的去尝试一些新技术。今天我们就跟随Ｎettuts的Vasili的教程《11 Classic CSS Techniques Made Simple with CSS3 》。来学习使用CSS3新技术实现十一种经典的CSS样式效果。
在《jQuery和CSS3给图片制作圆角》一文中说过了，当你在Web页面制作中如果你直接把CSS3中的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。
前一回我在《CSS3制作垂直手风琴》介绍了使用“:hover”来制作手风琴效果。今天，你将学习使用CSS3的另一个属性——:target来制作一个非常简单的动画手风琴的效果。在具体动手之前，我们一起来简单的了解一下这个“:target”。
