远方的海
远方的海,WordPress,免费
2014 Dec 08 04 : 32

给你的WordPress文章增加纸张特效

您当前的位置: 首页 > 建站资源 > 前端 > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

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

效果DEMO

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

代码

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

#primary, .widget { 
 position: relative;
 border: 1px solid #eee; 
 -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:''
}

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:前端 建站资源

您可能也会喜欢

发表回复

Post Comment


  1. 电脑爱好者 :

    ie这一系列太难弄兼容了 所幸现在用ie6的人不多了…

    2014-12-29
    • Sven水神 :

      是啊,就连微软都要抛弃IE,下批计划中IE就要被新的浏览器取代了。

      2015-1-1
  2. 知道91博客 :

    这个样式不错哟

    2014-12-18
    • Sven水神 :

      哼哼~~~必须的~o( ̄ヘ ̄o#)

      2015-1-1
  3. 望星湖畔 :

    看起来蛮不错的!!

    2014-12-15
    • Sven水神 :
      400 Bad Request
      Please see http://code.google.com/p/minify/wiki/Debugging.

      你的网站不能回踩评论哦~错误提示如上

      2014-12-16
      • 望星湖畔 :

        不会吧!!又出问题了!!是不能访问,还是别的??

        2014-12-16
      • 望星湖畔 :

        看起来好像是Better WordPress Minify这个插件的原因。已经禁用了,不知道怎么样了~~

        2014-12-16
  4. wu1yi2fan :

    这个样式很好看~完全可以用这个样式写一个纸张主题嘛~

    2014-12-11
    • Sven水神 :

      这个想法不错哦~~

      2014-12-12
  5. xnces :

    网站基本恢复啦,友链可以扔上去了

    2014-12-9
    • Sven水神 :

      好的~稍后就加上~

      2014-12-10
  6. 超級efly :

    前來支持一下~好厲害的樣子!

    2014-12-8