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的提示效果，详细的请看下面的实现代码：

这个案例效果很像lightbox的效果，鼠标悬浮在图片上时，会将图片放大，并且移至页面中心位置。这个效果的实现并没有使用太多的技术，最关键的就是使用了CSS3 transform中的scale和translate，其中使用scale()来放大图片，而translate()用来改变其位置，另外使用了CSS3选择器的:nth-type-of()分别对六张图片进行放大和定位。同时使用了transition属性，让整个图片放大效果看起来更圆润，详细的效果看代码吧，更有说服力。

这个案例是将Button UI Kit的设计图转换成CSS3的DEMO，效果简单，制作的方法也相对简单，说名实话用来用去的属性也就是那么几个，渐变gradient 、阴影text-shadow和box-shadow、还有就是字体icon的制作@font-face。但话说回来，属性简单，制作方法简单，但对渐变色的配置，阴影效果的拿捏还是要一定的技术，不信，你试试，反正我是信了。（^_^）

今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果，在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie)，使用gradient制作的径向渐变效果，并且使用box-shadow实现立体效果，用text-shadow制作的icon发光效果，详细的可以看代码。

这个DEMO是使用CSS3制作的一个分步注册表单，每个input对应的是每一步，在表单得到焦点时，对应的step也会进行对应的改变。不过这个效果是使用js代码来实现，但整个表单的外观是由CSS3来完成的，整个案例中使用了：@font-face来制作icon图标，使用gradient来制作渐变的按钮效果，使用text-shadow来制作文字阴影效果等等，方便简单点，但细节与创意才是最重要的，喜欢的同学可以看看是怎么实现的吧。