CSS3重构百度图片首页中图片展示效果
今天使用百度图片搜索图片时,无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码,使用了一些CSS3属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢
今天使用百度图片搜索图片时,无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码,使用了一些CSS3属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢
今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中,使用的CSS3属性还是那么几个,css3的渐变gradient,盒子阴影box-shadow,css3的选择器等,不过在这个案例中两个特色之处,一个是使用了":before"配合gradient制作了内凹圆角效果,类似于chrome浏览器上的tabs效果,这个效果可有点难度(思路来自于Tabs with Round Out Borders),还有一个亮点就是使用gradient制作了渐变的线条。想一探究竟的同学,看下面的代码吧。
藤藤今天给大家带来一款使用CSS3制作的3D立体表单效果。在这个案例中主要使用了CSS3的渐变制作了body的背景;使用box-shadow制作的3D立体input框和3D立体按钮;使用@font-face制作的icon图标。
站上已经放了多个CSS3制作的表单效果了,但为增强大家的视野,继续跟大家分享一个CSS3制作的登录表单。这个案例其实很简单,主要使用box-shadow做了分层纸张效果,使用gradient制作渐变按钮效果,然后就是@font-face制作的icon效果。其实这些理论方面的知识在站上都能找到,如果你是第一次接触这些,不仿试着查找一下。
W3cplus第三版本皮肤更新好长一段时间了,早就想把站点上的一些CSS3效果分割成单独的案例出来,与大家分享,但受限于时间,今天抽空把页面底部面板效果整理出来了。首先这个效果是有原因的,因为这个效果是当初自己左拼右拼出来的一个效果,后来自我感觉还能接受。上线后也有很多同学问我是图片制作的吗?其实不是的,他是一个CSS3制作的效果。