前面在CSS3 Ribbons一文中介绍了一个纯CSS3制作的“Ribbons”效果，今天收集了更多的“Ribbons”效果，以供大家参考与学习，希望大家能喜欢。

在看具体每个demo之前，我们一起来看下面一个截图：

前几天在W3cplus Demo站上放了一个CSS3 Sliding Form Helps效果。

今天我们就一起来看看他是如何实现的。

最近一直在整理W3cplus Demo站点，收集和写了一些CSS3的Demo效果。今天整理了一下Mary Lou写的《How to spice up your menu with CSS3》效果，整理一下与大家一起学习。

iPhone上的UI的确是精致，让人爱不释手。今天用CSS3写了一个Checkbox的效果，采用了两种不同的方法来实现，另外在此基础上写了一个我们常用的checkbox的效果。

众所周知，想要美化表单中的元件，都少不了jQuery的帮忙，有关于这方面的介绍，本站也有过几篇相关的文章，比如说《美化表单——自定义单选按钮和复选按钮》、《自定义表单——JQuery制作个性化Checkbox》和《美化表单——自定义Checkbox和Radio样式》。那么有没有办法不使用jQuery呢？就是大家所说的纯CSS？如果你看了这篇文章后，你就会说，原来也可以实现呀。

这两天制作了一个登入栏效果的案例，简单点说就是集成了以前本站介绍的几个效果。

1、CSS3制作Login栏

2、CSS3和jQuery制作翻转表单

好久没有逛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制作了一个翻转表单的效果。

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

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

HTML Markup:

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