中规中矩的效果

所谓中规中矩的效果就是加个投影,贴个胶带什么的。效果如下:

您可以狠狠地点击这里:中规中矩纸张效果demo

这里纸张本身的效果没有什么说头的,就是个css3box-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;

}

老外似乎很喜欢使用beforeafter伪类,国外最近的些教程,技术点等经常见到此玩意。我个人感觉有跟风之嫌,就像是狂热的经济泡沫,不需要太久,大家会冷静下来重新审视这些曾经上手简单,自我感觉不错的方法。由于目前ie6/7不支持before/after类,所以,某种意义上来说,伪类的使用少了些兼顾ie下显示的烦恼。

关于transform属性

 

0
选择一个心情
网站建设 网站制作 网页设计 网站建设公司 沈阳网站建设 沈阳网页设计 高端网站设计 沈阳网站制作公司 高端网站建设 沈阳网络公司 沈阳网站制作
沈阳易势科技有限公司 © 2006-2013 , all rights reserved. 辽b2-20150173-8号 "));
网站地图