本教程介绍了如何使用CSS3的渐变和框阴影功能创建灵活的折叠纸效果，适用于网页内容区域的背景。通过逐步指导，包括设置HTML结构、样式化页面、设置折叠部分样式、添加渐变和阴影，最终实现响应式的折叠纸视觉效果。
css3实现折叠效果
在本教程中，我们将学习使用CSS3功能（例如背景渐变和框阴影）创建灵活的（响应式）折叠纸效果，该功能可以为网站的内容区域提供漂亮的背景。
步骤1：设置<head>
让我们从制作一个非常基本HTML页面开始。 我们将使用HTML5，因为..为什么不呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Flexible Folded Paper Effect</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>首先，我们确保使用HTML5文档类型，设置标题，在样式表中调用，还使用viewport meta标签，这样我们的效果将在移动设备和平板电脑设备上响应。 最后，有一个polyfill可以在较旧的浏览器中识别html5元素，并且还有一个针对IECSS3渐变的修复程序，我们稍后将在本教程中使用它。
步骤2：设置<body>
<body>
<div id="page-wrap">
<div class="paper">
<section>
<h1>Flexible Folded Paper Effect</h1>
<hr /><h2>Achieved with a mixture of CSS3 gradients and box-shadows.</h2>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Praesent lectus lacus, tristique at dictum ac, porta at magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.<br/><br/>Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.</p>
</section>
<section>
</section>
<section>
</section>
</div>
</div> <!-- END page-wrap -->
</body>
</html> 现在，在页面的主要部分中，我们有一个div容器包装了该页面，另一个有包装了“纸”。 在此div内，每当我们要在纸张中放置折叠部分时，都会添加一个<section>标记。 这些部分有两种类型，因此稍后在CSS中，我们将能够使用“奇数”和“偶数” n子选择器在它们之间进行区分。 这样，我们HTML尽可能保持语义，没有多余的类名。
在这些部分中，我添加了一些内容。 标题和一些占位符文本。 这是一个非常普通的普通页面结构，但是我们拥有通过移至CSS来创建折叠纸效果所需的一切。
步骤3：样式化整体页面
在CSS中，我们将完全从头开始创建效果，没有图像，只是为了好玩。
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #777;
}
#page-wrap {
margin: 0 auto;
max-width: 980px;
width: 100%;
}
.paper {
margin: 30px auto;
background: #f5f4f0;
max-width: 960px;
width: 90%;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
h1 {
font: bold 50px "Georgia", serif;
text-align: center;
text-shadow: 0 1px 0 #fff;
margin-bottom: 20px;
}
h2 {
font: bold 25px "Georgia", serif;
text-align: center;
}
这些是页面的基本样式。 我们声明一个固定的最大宽度和一个实际宽度的百分比，以使整个“纸”元素具有灵活性。 标头样式显然仅用于示例，取决于您的艺术技巧，可以根据您的设计更改标头样式。
步骤4：设置两个折叠部分的样式
section {
width: 100%;
min-height: 100px;
position: relative;
padding: 30px;
}
在这里，我们确保每个部分在其父元素上延伸100％。 我们定义了一个最小高度，这样，如果您想像示例中那样添加空折叠部分，它们的高度将不会为0px。 然后，我们声明相对位置，并添加一些填充，再次仅针对此设计。
注意：声明position: relative;非常重要position: relative; 在这个部分; 我们需要它放置真正可以产生效果的阴影元素。
步骤4：添加渐变
.paper section:nth-child(even) {
background: -moz-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #e9eae5), color-stop(100%, rgba(244, 245, 240, 0)));
background: -webkit-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: -o-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: -ms-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: linear-gradient(135deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9eae5', endColorstr='#00f4f5f0',GradientType=1 );
}
这次我们仅对每个偶数截面元素进行样式设置，因此意味着第二，第四，第六等。我们正在应用渐变，以给人一种在3D空间中的阴影投射在纸张上的印象。 此渐变是此设计中最重要的部分之一，选择与纸张互补的颜色很重要。
在这种情况下，纸张为＃f5f4f0，因此渐变的灰色（从左上角到右下角对角渐变）为＃e9eae5至完全透明。
您可以使用多种工具为您生成渐变，例如：
- 卡洛斯拉
- Damian Galarza的 CSS3渐变生成器
- 适用于OS X的Gradientapp
步骤5：添加阴影
完成此操作后，现在让我们在纸下添加一些阴影。
.paper section:nth-child(odd):before {
z-index: -1;
position: absolute;
content: "";
bottom: 0px;
left: 10px;
width: 50%;
top: 20px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.paper section:nth-child(odd):after {
z-index: -1;
position: absolute;
content: "";
bottom: 0px;
right: 10px;
left: auto;
width: 50%;
top: 20px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
现在我知道，对于那些不习惯使用CSS3转换或伪元素的人来说，这似乎令人望而生畏，但这实际上是很简单的。
在这里，我们只是为每个奇数部分添加阴影。 我们首先将带有z索引的多余元素推到纸张后面。 我们在这里声明一个绝对位置，这就是为什么我们需要在父元素中声明相对位置的原因。
基本上，我们要制作两个黑盒，它们占据折叠部分宽度的一半（宽度：50％；），然后给它们提供盒子阴影，然后将它们旋转5°。 这些多余的元素大多是隐藏的，但它们的放置方式使它们产生深度的错觉，就像纸张从页面上移开一样。 这些阴影会增强渐变产生的效果。
步骤6：添加最终阴影
现在，我们需要为编号均匀的部分重复类似的过程。
.paper section:nth-child(even):before {
z-index: -1;
position: absolute;
content: "";
bottom: 20px;
left: 10px;
width: 50%;
top: 0;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.paper section:nth-child(even):after {
z-index: -1;
position: absolute;
content: "";
bottom: 20px;
right: 10px;
left: auto;
width: 50%;
top: 0;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
与之前完全相同，但有一些细节。 显然，我们的目标是偶数元素而不是奇数元素，并且位置不同，因此阴影位于框的顶部并以其他方式旋转，从而在每个“折”。 这里：
步骤7：添加一些媒体查询
您会注意到，我们一直在使用百分比作为宽度，并一直在为响应式设计设置环境。 如果您以现在的示例为例，并调整其大小，则效果很好。 但是有缺陷。 可以通过在某些时候进行的一些更正来解决这些问题。
@media only screen and (max-width: 600px) {
h1 {
font-size: 25px; }
h2 {
font-size: smaller; }
.paper section:nth-child(even):after {
right: 20px; }
.paper section:nth-child(odd):after {
right: 20px; }
.paper section:nth-child(even):before {
left: 20px; }
.paper section:nth-child(odd):before {
left: 20px; }
}因此，在这里我们只是缩小了标题（再次是为了演示），我们还不得不稍微替换伪元素，因为它们是在小视口中显示的。 我选择600px作为断点纯粹是因为那时候阴影在我眼中变得太大了，这再次完全打开了，您可以根据自己的设计进行更改。
浏览器兼容性
由于我们使用CSS3渐变 ，因此浏览器的兼容性仅限于现代浏览器和Internet Explorer10。我们的渐变确实具有备用过滤器属性，可让我们访问IE9，因此仅对IE8和更早的版本提供优惠。 IE8实际上以多种方式启动（我们的CSS3选择器 ， 转换规则和框阴影 ，因此让我们完全忘记IE8！）幸好，这是一个正常的降级，并且页面的内容可以完全访问：
IE8
不要忘记，您的媒体查询还需要包含only关键字，以防止IE8默认情况下解析其所有内容。
结论
所以你有它！ 使用CSS3渐变，框阴影和伪元素创建的灵活的折叠纸效果。 我希望您喜欢本教程，并希望从中学到一些有用的东西。 在评论中让我知道，我很想听听您的意见。
css3实现折叠效果
扫一扫
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
