菜单效果在网上琳琅满目，w3cplus也制作了不少。今天根据Metrostyle的UI设计效果，配合CSS3的transform，aimation属性制作了一个下拉的动画导航效果。这个效果在webkit浏览器下得到较好的支持，在Firefox下有些卡。其中最关键的地方使用了两个额外标签控制翻转的前后效果，详细的制作过程看代码吧。

布局在W3cplus说的也比较多了，但Responsive的列布局还是第一回说，（如果你是第一次听说Responsive这个词，建议你点击这和先了解Responsive）。今天看到一篇有关于Responsive的列布局教程，觉得值得一读，将其译成中文，希望对有需要的同学有所帮助。

通常我们进行列布局，都需要在第一列添加一个类名“first”，在最后一列添加一个类名“last”，主要用来清除他们之间的margin，（有关这方面的介绍可以详细阅读为之写的《CSS解决方案》中的《项目列表解决方安》，这里详细介绍了类似于列布局的相关方法，或者点击这里了解如何避免重复列末尾的Margin。）而且还通过添加类名“clearfix”来清除浮动。这些都是比较古老的解决方案了，今天我们一起来看一个新方案，就是使用CSS3的伪元素选择器“nth-of-type”来实现一个简单的Responsive列布局效果。Nick La使用这种方法制作了一些WordPress主题模板。制作这些模板中，他没有使用“first”和“last”类名就实现了多列在不同设备下都能自适应，换句话说，他就是能实现四列、三列、两列等等之间的切换。

Lavalamp Menu是一种很好的效果，早期在国外的博客中看到过这种效果，是通过jquery插件制作的，一开始还不知道这种效果就叫Lavalamp呢？后来为之告诉我的，今天使用CSS3写了一个垂直的Lavalamp的导航效果，这个效果其实很简单，主要是ribbons的制作要点功夫，然手就是选择器的使用，如果你掌握了这两个部分的知识，那么制作这个效果只是一个思路问题，看看代码你就知道了。

Accordion Slider 以前都是使用jQury或别的js脚本来制作，今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处，第一是HTML结构中的input[type="radio"]是必备的，第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是css的兄弟元素选择器（~），这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现，不过这种方法实现要借助js来显示默认的第一张图片，有兴趣的可以将这个案例改装一下。

早期制作手风琴菜单都需要依赖于js的脚本来实现，自从CSS3出现后，制作这种效果不在需要依赖于任何脚本。另外实现手风琴效果的制作方法有很多种，但较为常见的是使用css3的“:target”选择器来实现。在本例中也是一样的，通过“:target”选择器来控制下接菜单的“max-height”，原理简单，方法也简单，只是细节处理稍加注意。

这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果，整个效果未采用任何js脚本代码，其中下接的折叠效果是通过transform的rotate来实现的，而transition是用来控制动画更具线性，当然这个效果也用到了transform的3d旋转属性，感兴趣的可以围观一下。扩大你自己的视野。

3D的文字特效都是通过text-shadow属性来制作的，其原理很简单，就是多个text-shadow的属性值叠加，模拟出3D的效果。其中主要一点就是掌握角度值，也就是X轴和Y轴的位置。今天我通过3D css Text Generator在线工具，生成了0、45、90、135、180、224、270、315和360九个不同角度的3D文字效果，将其代码放上来给大家参考。当然大家还可以通过这个在线工具，设计相关的参数。工具使用方法很简单，我就不细说了。

上次花一天的时间写了一篇《Responsive设计的十个基本技巧》，在这篇文章中主要向大家介绍了Responsive设计的十个基本技巧，其中涉及的面也非常的广，一时理解或者说学习起来还是有一定的难度。有些初次听过Responsive的或者初次接触Responsive的同学还是有点难度，为了能帮助大家进一步的了解和学习Responsive，今天我为大家整理了一篇《Responsive Web Design》，这篇文章主要从几个内容引导大家如何学习Responsive设计。希望对大家有所帮助。

登录表单的案例，在w3cplus上已经有很多个，但我们一直没有放下这一块的效果制作，虽然结构与制作方法是类似的，但有很多效果实现的技巧还是略有差别，因为我们有一个目标，希望这上面展示的案例效果，能直接拿到项目中使用，另外一件事就是帮助有需要的同学在工作闲空时间学习CSS3的各种知识以及实战经验，来回馈广大前端人员一直对w3cplus的大力支持，希望大家喜欢。

这个案例是一个登录后个人信息控制面板，包含了个人用户头像，整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。