由于藤藤忙于考试，所以好久没有和大家分享CSS3的案例了，今天藤藤特意整理了一个DEMO与大家分享。这个案例是一个圆形转盘导航，初看效果可能很多人都会认为不可思议，CSS3能做出这样的效果，是的，真的是CSS3做的。在整个效果中有几个关键之处,扇形形是通过clip、border-radius和transfrom来实现，其中使用gradient和box-shadow制作了不同的颜色块。对于icon就不用说了，@font-face来完成的。如果你感兴趣，不仿自己先思考一下。

好像没有写CSS3方面的Demo效果了，今天在邮件中看到一个有关于CSS3写的文字发光和动画的案例，觉得很有意思，也就动手一试了，真心的爽。这个效果中最关键的是使用了十个相同的标签，来模仿了一个3D立体的效果，同时设置一个抖动的效果，这个效果主要由transform的rotate3d来制作，在不同的时间段设置不同的效果，另外通过text-shadow制作了阴影颜色变化的效果。详细的看代码吧。

最近一直在学习Retina屏幕下图片的处理方法，从《走向视网膜（Retina）的Web时代》一文中知道了Retina这个新名词，同时知道了他是什么东东，同时也继续在探讨Retina方面的知识点，随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法，或者说技巧吧，接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说，这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片，以及Coding实现，可以说是一条龙了。这些都是自以为事，为什么呢？除了这些方法，其实还有更先进的方法，这也就是我接下来要说的事情了。

Retina对我来说是一个全新的概念。初次接触还不知道是什么意，后来翻译后才知道“视网膜”，在互联网上海量搜索一翻，这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物，我一开始看简直不知道是什么东西，后来慢慢的看了一些专业术语，结合业务的高人写的博客，总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记，希望对一些新接触 Retina的同学有许些的帮助。（因为自己对这一块知道的不多，有可能有写错的地方，希望这些地方不会误人子弟，罪过罪过），更希望有错的地方能得到同行朋友的指正。

Breadcrumbs（面包屑），在网站上也是常见的一种UI效果，但这种效果大家看到的都是很普通普通的效果，使用CSS3制作的一些特殊效果，可能很少见吧。虽然早前在《CSS 制作Breadcrumbs》一文中搜集和制作了一些效果，但这些效果都没有运用动画效果。今天这个案例使用CSS3的几个属性制作了一个带有动画的Breadcrumbs效果，感兴趣的可以看看。

Pagination（分页导航）效果，可以说每个网站都会有的效果，制作原理简单，今天我们也用css3制作了一个分页导航的效果，整个效果使用的CSS3属性很少，主要使用gradient来制作了渐变图片，使用border-radius来制作了圆角，不过藤藤在这个案例中为了模仿“active”效果，使用了“:target”属性来做的，实际生产中建议这么使用，因为active可以通过程序来控制，不是我们CSS的菜。详细的看代码吧，希望大家喜欢。

Responsive设计现在是网页设计中的一种趋势，现在浏览网页不在是仅限于PC端，而是有很多类型的屏幕尺寸——桌面、笔记本电脑、平板电脑和智能手机等等。一个网页要能在这么多种类型屏幕上显示，Responsive设计似乎是一种完美的解决方案。因为他允许你创建一个网站，可以适应不同的分辨率。这是具有挑战性的，从桌面到移动端屏幕。为此，内容有需要隐藏的，图片必须能自动适应大小和一些其他网页元素需要相应的改变。详细的介绍可以阅读前面介绍的《Responsive Web Design》和《Responsive设计的十个基本技巧》。在这里，我们要看看网页设计中至关重要的UI组件之一网站导航菜单。因为导航也涉及到响应式设计的变化。

解决方案有许多种，比如说使用选择下拉框制作菜单、CSS下拉菜单、切换导航菜单等，（可以看看《20款Responsive Menu教程》，这里有近20种响应式导航菜单制作案例与相关教程的介绍）。当然这些解决方案都有自己的优缺点，至于使用哪种解决方案，就需要根据您的需求，从中找到一个完美的解决方案来适合你的项目。接下来为大家提供一些响应式导航菜单的制作方法和解决方案，希望能帮你完成更好的Responsive设计。

好久没有处理过IE6下的兼容问题了，今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边，就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料，终于找到了解决方法，放上来与大家分享一下，这个问题有可能不只一个人会碰到。(^_^)

在介绍如何处理这个bug之间我们一起来回顾一下，在IE6-7下，input[type="submit"]和button[type="submit"]存在的问题还不仅是这个，常见的有：button在IE67下的宽度兼容问题、button的行高问题（各浏览器下解析不一样）、button的outline问题，甚至submit在ios下也存在问题。这么多烦人的事，苦逼了前端人员，（具体解决方案可以点击这里查看）。今天就在为大家增加一个问题的解决方案——如何去除IE67下按钮的黑边框

这是一个很简单的按钮效果，其来源于鬼哥的鬼群，看到鬼大问这样的按钮怎么制作，默认效果就不说了，说一下点击时的效果吧。当你点击按钮时，中间会有发光，并向外扩散的淡光效果。看到效果大家在考虑是否使用text-shadow制作，或者说使用box-shadow效果制作。但思量过来，直接在button上使用这两个属性都无法实现，最后决定使用“:after”来制作发光的效果。经过尝试，效果还是制作出来了，只不过没有设计师的那么完美。希望大家能从中找到一点思路。