今天的教程我们是使用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就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，你可以直接使用到您的项目中。

要在你的项目中使用，简单的很，就是三步完成：

前面我在《13个CSS技巧》和《7个不能遗忘的CSS样式》收集了一些实用的CSS技巧，主要是用来处理一些CSS的样式。今天在这篇教程，我依旧收集和整理了一些CSS技巧，其中有一些技巧大家可能已经使用过了，有些可能大家在实际项目中并碰到，另外有一些技巧我也在以前的教程中有单独提出来并做了详细的解说，今天主要是把他们放在一起，方便大家的查阅和学习。这些CSS技巧能帮大家解决一些恼人的问题，从而也能帮大家提高自己CSS方面的技术。别的先不说了，我们一起开始吧。

一、跨浏览器的兼容

浏览器的兼容问题，大家都有碰到过了。兼容问题对于新手来说都是一件棘手的事情。下面的一些hack写法，可能帮你解决浏览器的特定问题。

今天这个教程中主要和大家一起来探讨和学习：如何使用CSS来制作图形，比如说圆形，半圆形，三角形等。前面有几个教程中都有使用了纯CSS使用border来制作三角形，今天我特意在网上查阅了一下，介绍这样的教程还是蛮多的，因此我也决定整理一份相关教程出来与大家一起分享。最早发现使用border制作三角形是人物Eric Meyer的发现的，但我没有找到Eric Meyer介绍的教程，可相关教程就很多，我在此就不列出来了，我们开始今天的学习之旅吧。

如何工作？

很少会有人意识到，当浏览器绘制的border，会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色，其他边框色为透明色，这样我们就很容易制作出三角形，然后改变其大小来实现不同的效果。我们一起来看一段代码：

大家说CSS很简单，三下五除二就能把CSS拿下，初学时，我也是这么认为的，也是这样给我很大的信心从事这一行，但后面随着相关知识面的提高，我越来越感觉CSS是蛮深的东西，而且越来越觉得自己掌握的CSS还是很薄弱。从而决心要先把CSS这座山头攻下来。大家平时在Web制作中碰到CSS的问题，总会觉得烦人，其实我个人认为最好的解决方案往往都是最简单的。今天在这篇教程中要和大家一起分享CSS的几种小技巧。

今天要给大家介绍七个CSS样式片段，我认为这几个片段对我们项目的制作帮助还是蛮大的，如果你认真看完这篇教程后，我想你会喜欢这几个CSS样式，而且我相信你会马上运用到你即将要制作的下一个项目中，或者说会马上运用到你现在制作的项目中。在具体介绍之前先要告诉大家，这个几CSS样式片段是David Walsh从Paul Irish的HTML5 Boilerplate项目中挖掘出来的。

Tabs的效果在Web页面制作中，可以说是随处可见，我也知道有关于这样的教程在网上上相当的多，前面本站在《纯CSS3制作Tabs选项卡》中介绍了纯CSS制作的Tabs，而《CSS3+jQuery制作切角的Tabs》介绍了使用CSS3+jQuery制作Tabs的方法。今天依然要介绍的是使用jQuery来制作Tabs，但这种方法相对来说是简单易于理解的，就算我这样的初学者都能理解。

在Web页面开发中，自从有了<div>的出现，大家就在讨论table。就出现了什么时候？如何使用div，什么时候？如何使用table的争论。虽然争论不少，但最后得出的结论是一致的：当你需要在页面中处理与数据时，table是首选之一。