CSS3基础CSS制作45度封页套效果和折页效果的步骤

CSS制作45度封页套效果和折页效果的步骤

网页中加入封页套或折页的效果会更个性更有立体感,一般这种效果是通过一个小图片定位的方法实现的,本文主要分享用纯CSS的方法实现这样的效果:

CSS封页套和折页效果.png

CSS实现45度封页套效果

这里的封页套效果相当于是一个倾斜了45度的等腰梯形加上模拟的阴影所得,下面先写出html部分代码:

 <div class="page">
  <div class="nook">Hot</div>
  <ul>
    <li>………</li>
    <li>………</li>
  </ul>
 </div>

先定义列表的总体CSS样式:

.page {
 width:330px;height:300px;
 border:2px solid #18a;margin:20px;position:relative;
}
.page ul {
 list-style:none;line-height:2;margin:10px;padding:0;
}
.page ul li {
 padding:5px 0 0 15px;
}

这里使用了nook这个div制作这个封页套,首先制作一个等腰梯形(梯形的制作原理):

.nook {
 width:50px;height:0;
 border-left:30px solid transparent;
 border-right:30px solid transparent;
 border-bottom:30px solid #28d;
}

接下来通过CSS将这个梯形旋转-45度,并定位到列表左上角的位置:

 transform:rotate(-45deg);
 position:absolute;left:-33px;top:7px;
  /*--下面顺便定义文字样式--*/
 color:#ffc;font-size:16px;
 text-align:center;line-height:28px;

CSS封页套1.png

这个倾斜的梯形做好后,还需给梯形下底的两个角模拟一个阴影的效果:

.page:after {
 content:" ";width:10px;height:5px;background-color:#179;
 position:absolute;left:61.5px;top:-6.2px;z-index:-1;
}
.page:before {
 content:" ";width:5px;height:10px;background-color:#179;
 position:absolute;top:61.5px;left:-6.2px;z-index:-1;
}

模拟阴影的方法有很多,我这里是通过伪元素在梯形下底的位置放了两个小矩形,得到的效果如下图:


CSS封页套2.png

CSS实现45度折页效果

关于45度折页效果,实现方法有很多种,这里先分享一个简单的做法,首先写出html部分代码:

 <div class="page2">
  <ul>
    <li>……</li>
    <li>……</li>
  </ul>
 </div>

先定义列表的总体CSS样式:

.page2 {
 width:330px;height:280px;
 border:2px solid #333;margin:10px;position:relative;
}
.page2 ul {
 list-style:none;line-height:2;margin:20px;padding:0;
}
.page2 ul li {
 padding:2px 0 0 10px;
}

模拟右下角的折页效果相当于在右下角放了两个等腰直角三角形,如下图:


CSS折页1.png

所以这里只需定义两个等腰直角三角形并定位到相应位置即可(CSS制作三角形的方法):

.page2:before {
 content:" ";
 width:0px;height:0px;
 border-right:40px solid transparent;
 border-top:40px solid #333;
 position:absolute;right:-2px;bottom:-2px;
}
.page2:after {
 content:" ";
 width:0px;height:0px;
 border-left:40px solid transparent;
 border-bottom:40px solid #fff;
 position:absolute;right:-2px;bottom:-2px;
}

这里我把下方的三角形背景设置为白色,所以看上去就像页角这部分被折起来了:

CSS折页2.png

以上是通过两个小三角形来实现的折页效果,其实这里也相当于是一个从左上到右下角的线性渐变,所以也可以这么做:

.page2:after {
 content:" ";
 width:40px;height:40px;
 position:absolute;right:-2px;bottom:-2px;
 background:linear-gradient(to bottom right,#333,#333 50%,#fff 50%,#fff);
}

这样只需用这一个伪元素就完成了,不过这里仅仅模拟了45度的折角,如果要模拟其他角度,可能需要多做一些尺寸的计算了……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/160.html