Codrops CSS3 Lightbox总供有三个效果，今天把第二个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。这个案例与第一个区别其实很小，只是在对图片缩放做了一下不同效果处理。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对缩放。要是你对这个感兴趣，不仿看看。

表单元素向来是前端人员最为头痛的一件事情，众说周知，表单元素的兼容性是最为难处理的，而且想制作一个美丽好看的表单元件，都需要依赖于脚本来实现自定义。其实我们抛开低版本的浏览器，使用ＣＳＳ３来美化还是可以的，她不需要依赖任何脚本代码，能将表单的元件美化的很靓丽。今天就给大家推荐一个纯ＣＳＳ３美化的表单中的下拉选择框（select）的效果。这个效果很简单，使用渐变制作了表单ｓｅｌｅｃｔ的背景色，同时使用ｌａｂｅｌ标签的伪元素“：ａｆｔｅｒ”来制作向右的三角。其中最为有特色的是，使用渐变制作了一个美丽的背景方格效果，详细的请看代码。

Codrops CSS3 Lightbox总供有三个效果，今天把第一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对绽放，要是你对这个感兴趣，不仿看看。

Full CSS3 Lightbox从标题上就知道是一个CSS3制作的一个全屏显示的Lightbox效果。这个效果是在前一个效果的基础做了一定的改良，修改的最显示的地方就是添加了一个假的关闭按钮，其实给Lightbox的全屏图片显示时添加了一个动画效果，有０.９放大到１，而图片居中效果依然使用的是table和table-cell属性。详细的请参考下面展示的案例代码。

这个Lightbox效果也是一个纯CSS3写的效果，这个效果的制作方法也不算复杂，相对来说比较简单。主要使用了CSS3的“:target”属性来控制对应大图的显示与隐藏，而且配用了transition属性来制作了动画效果，而且还有意思的是使用了table和table-cell来实现图片的居中效果。具体效果请看看详细代码。

这个Lightbox效果实现原理很简单，就是点击图片或者使用tab键，当图片得到焦点（:focus）时，图片会在当前位置被放大，同时移动Y轴的距离。整个制作过程中使用了HTML5的新标签figure和figcaption，包含图片以及图片标题，同时在figure相邻位置设置一个span标签，通过选择器来控制span标签制作一个overlayout的朦板效果。这个效果中仅用到CSS3属性也非常的简单，利用border-radius制作了图片边框的圆角效果，使用box-shadow制作了图片的阴影效果，最主要的是使用CSS3的选择器配合transition和transform属性制作了一个类似于Lightbox的效果。

这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现，这个效果初看有些许复杂，一开始不太清楚其实现原理，但仔细看看代码，还是能整明白的。功能主要依赖于css的选择器，以及配合锚点定位来实现。其中很关键一步是HTML的结构，特别是图片的点击播放效果，顺序不能搞错，不然效果无法实现。不过这个效果有一个致命的缺点，那就是对图片的大小有所限制，无法实现图片的自应大小，如果你够有信心的话，可以尝试一下不限制宽度，能否实现这个效果。另外一点，CSS实现的效果，当然没有js实现的效果那么流畅，不过当作挑战性的学习，还是不错的，你不仿一试。

Lightbox效果以往都是依靠jQuery插件或者别的JavaScript脚本来实现，今天开始为大家提供几个纯CSS3制作的Lightbox效果。今天这个Lightbox效果使用的是input[type=radio]配合CSS3的相邻兄弟元素选择器(E + F)来实现，这种制作方法最关键的地方是结构的配合，以及label的for属性与元素的id属性配合一致，并且运用了display:table属性实现弹出层的图片居中效果。详细的请看下面的代码。

这个案例制作了两个效果，一个是CSS制作的导航效果，这个导航效果配一点js代码实现active状态下改变当前项的效果（从文字转变为icon），导航其他效果都是使用css3的常用属性制作的，具体什么属性我就不多说了，大家一看就知道。第二种效果使用纯css3制作了一个twitter的分享按钮，而且这个按钮还带有Tip的提示效果，详细的请看下面的实现代码：

今天这个案例是使用CSS3制作了四个不同的App下载按钮。这个效果中主要使用了gradient制作渐变按钮效果，配合@font-face制作向右的箭头效果，同时使用box-shadow制作阴影效果,而且使用了:nth-child选择器来控制不同按钮的效果。详细的请看具体代码。