WordPress文章增加纸张特效

Timle.CN:专注 WordPress建站WordPress主题WordPress插件 分享,同时也关注各种 建站资源前端技巧免费资源IT互联网热点 。CTRL+D即可收藏本站,我们期待您的再次光临!

[文章目录]

WordPress写博客,看起来美观舒适是很重要的,虽然现在流行的是扁平化趋势,这里介绍一种让页面纸张化的CSS样式。

效果DEMO

我们截一个效果图:如下(纸张效果不支持低版本的IE浏览器)。我们可以看见,纸张的边缘有卷起,而且颜色是渐变的,这样的文章背景是不是很棒呢!
paper-effect

代码

说明,下面的代码是把id=”primary”的div和class=”widget”的两个部分采取了纸张化效果。如果你要把.post-content改成纸张类,进行相应的替换即可。

#primary,.widget {
    position: relative;
    border: 1px solid #01a3cc;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;
    *zoom: 1
}

#primary:before,.widget:before {
    left: 15px;
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg)
}
#primary:after,.widget:after {
    right: 15px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg)
}
#primary:before,#primary:after,.widget:before,.widget:after {
    position: absolute;
    bottom: 10px;
    z-index: -1;
    width: 70%;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    content: ‘ ‘
}

以上。

转自:远方的海 http://www.seavia.com/jianzhan/paper-effect.html

版权声明:本站所有文章和资源使用CC BY-NC-SA 3.0 CN协议发布,转载应当以相同方式注明并注明文章来自“Timle.CN -> WordPress文章增加纸张特效”。在页面右边可以分享本文哦!

有 1 发吐槽 关于 “WordPress文章增加纸张特效

  1. 沙发
    黍离 2015-04-30
    挺好的!

疑问 难过 胜利 微笑 抠鼻 可爱 抓狂 偷笑 奋斗 衰 撇嘴 色 贼笑 爬虫 鼓掌 发怒 擦汗 握手 酷 玫瑰 哭 呲牙

WordPress文章增加纸张特效
4 票, 5.00 平均等级 ( 99% 分 )