用css3制作纸张效果(外翻卷角),CSS3效果 纸张
用css3制作纸张效果(外翻卷角)
易采站长站,站长之家为您整理了用css3制作纸张效果(外翻卷角)的相关内容。
用css3制作纸张效果
一、中规中矩的效果
所谓“中规中矩的效果”就是加个投影,贴个胶带什么的。效果如下:
这里纸张本身的效果没有什么说头的,就是个CSS3的box-shadow投影效果而已,相关代码如下:复制代码代码如下:-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
反而是上面的胶带纸效果有点说头,这些微微倾斜的胶带是CSS写出来的,大部分效果源自CSS3,主要有RGBA显示半透明背景色,box-shadow显示淡淡的投影,transform做旋转效果;元素使用after伪类生成,完整代码如下:
复制代码代码如下:.page:after { width: 180px; height: 30px; content: " "; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; }
老外似乎很喜欢使用before和after伪类,国外最近的些教程,技术点等经常见到此玩意。我个人感觉有跟风之嫌,就像是狂热的经济泡沫,不需 要太久,大家会冷静下来重新审视这些曾经上手简单,自我感觉不错的方法。由于目前IE6/7不支持before/after类,所以,某种意义上来说,伪 类的使用少了些兼顾IE下显示的烦恼。
二、外翻卷角纸张效果
纸张一般都是有卷角的,所以,我们可以更近一步,模拟卷角效果来使得纸张的感觉更逼真,这里就要借助于投影了,且是曲线投影。
我们还可以给纸张增加渐变(gradient)效果,以模拟纸张的曲度。
同时,可以给文字增加投影,可以让文字有书写的凹陷感,可以进一步让纸张效果更逼真。
于是,在“中规中矩”纸张基础上,我们做点小手术,结果得到下面的效果:
您可以狠狠地点击这里:渐变卷边纸张效果demo
目前貌似opera浏览器还不支持CSS3渐变,同时webkit核心下浏览器下的gradient渐变的写法已经开始向FireFox浏览器靠拢了。确实,都是CSS3,有必要搞得五花八门吗?以上就是关于对用css3制作纸张效果(外翻卷角)的详细介绍。欢迎大家对用css3制作纸张效果(外翻卷角)内容提出宝贵意见