好久没有逛Red Team的blog了，今天上去发现更新了几个好东东，自己动手做了一遍。觉得很有创意，有几个新知识点以前自己没有使用过，我想大家或许也没有使用过，整理了一下贴上来和大家分享。

前面本站介绍了站上分页导航效果，今天在给大家推荐一个纯CSS制作的分布导航效果，这个效果中没有使用任何图片，并使用jQuery实现了“active”的效果。还有一个特别之处就是使用了WebSymbolsRegular制作了向前向后的箭头效果。

目标

今天我们的目标就是使用纯CSS来制作上图的一个分面导航的效果。

HTML Markup

这个效果用到的HTML结构就相当的简单了，就是一个容器“div#pager”里面放了一些“a”链接标签：

Nicolas Gallagher在Pure CSS GUI icons中使用纯CSS3制作的各种ICON的DEMO，让我再次领会了CSS3的强大。

CSS3中的Transform应用可以说比较广泛了，但其中的3D Transforms去年就听说了，但一直没有使用过。今天在Tutorialzine看到了一篇这方面的教程《http://tutorialzine.com/2012/02/apple-like-login-form/》。自己动手试了一回，效果蛮好的。现在贴上来与大家一起分享。

这篇教程主要使用了CSS3中的3D transform属性和jQuery制作了一个翻转表单的效果。

前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。

为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“display:block;”，唯一不同的是，在此用了不同的类名来区别，相关类名我放在了标题的后面，以便大家对应查看。

1、正方形（square）：

CSS Code:

		.square {
			width: 100px;
			height:100px;
			background: #E5C3B2;
		}
	

上面的方法是，设置宽度和高度一致就可以实现正方形的效果，下面展示一种boder制作正方形的效果：

Google+的“button”效果一直都吸引了我，早就想亲手去体会一下这样的感觉，但一直给自己找借口，直到最近几天，终于动手一试了，试后才知道，他们做的真NB。Google+的UI Buttons形成了一个制作“按钮”、“图标按钮”、“带有标签的图标按钮”、“下拉按钮”、“tip按钮”等按钮的工具或者说UI Buttons框架，使用这一套“UI Button”将会给你的工作带来极大的速度与视觉冲击效果。

那么我们今天的目的就是来看看Google+的攻城师是怎么写的这个代码。因为只有通过代码，我们才能知道其中的原理与制作过程。

HTML Markup:

老样子，首先就需要他的HTML Markup是怎么写的，因为我们在实际应用中这一块是不可缺少的，如果没有这一块，你就无法继续下去，俗话说得好“巧妇难为无米之炊”。下面我们不说别的，直接上代码才是王道：

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象（有的地方称作为“信息状态块”）的制作。那么今天老话重谈，主要使用不同的几种结构来制作这个媒体对象效果：

我们把上图拆分细化一下，可以划成下图的样子：

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

不知道大家有没有经常观注Facebook，不过我是经常观注他，时时了解他的Web页面的设计与变化，因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline。

有关于CSS3制作buttons，本站前面介绍了多个案例：

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的，我简单的说一下吧，这种效果就是浏览器加载你的页面时，给页面的内容赋予一个动画效果，让他不在那么生硬。最早看过这种效果是小志的Blog首页。今天特意看了一下志哥的写的代码，才知道实现起来并不是很困难的事情，不信大家一起来看看我扣出来的代码。

小志博客首页

别的我不多说，我直接使用firebug把志哥的Blog首页代码扒出来，下面我分为两部分：

HTML markup