css3档案纸质效果

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3档案纸质效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3档案纸质效果</title>
<style>
*{
	margin:0;
	padding:0;
}

body{
	background:url(img/bg-image.jpg);
}

.clear{
	clear:both;
}

.paper{
  	background:url(img/btn_tryit.png) no-repeat 10px 0 #FFF;
	position:relative;
	height:auto;
	width:860px;
    margin:30px auto;
	padding:15px;
	border:1px solid #CCC;
    box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	-o-transition:all 0.4s;
}



.paper:hover{
	border-top-right-radius:140px 30px;
}
.paper:before, .paper:after{
	content: "";
	background:url(images/linen-lt.png);
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); 
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
	background:#FFF;
	border:1px solid #CCC;
	position: absolute;
	z-index: -1;
    box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);
	
}

.paper:before {
	height:96%;
	width:96%;
	top:-20px;
	left:20px;
}
 
.paper:after {
	height:96%;
	width:98%;
	top:-10px;
	left:10px;
}


.header,.content,footer{
	float:left;
	width:100%;
}
.header{
	height:70px;
	border-bottom:1px dashed #CCC;
}

.content{
	height:auto;
	min-height:760px;
}

footer{
	height:70px;
}
.guide{
	float:left;
	font:20px Georgia, "Times New Roman", Times, serif;
	line-height:60px;
	color:#CCC;
	margin-left:120px;
}


.search {
	background: transparent url(img/support_search.png) no-repeat;
	width: 195px;
	height: 35px;
	border: 0;
	outline: none;
	padding: 3px 15px 0 39px;
	line-height:35px;
	font-size:18px;
	float:right;
	margin:10px;
}

.search:focus {
    background-position: 0 -38px;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

.avatar{
	float:right;
	background:#FFF;
	margin:5px;
	border:1px solid #CCC;
	box-shadow:2px 1px 4px 1px rgba(0,0,0,0.3);
}

h1{
	font:32px "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin:10px 0 0;
}

table{
	float:left;
	width:600px;
	font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	list-style:none;
	margin:10px 0;
	padding:10px;
	border:1px dashed #CCC;
}

tr{
	height:30px;
	line-height:30px;
}

.discription{
	float:left;
	width:600px;
	height:auto;
	margin:5px;
	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height:20px;
}

.discription p{
	margin:10px 0;
	letter-spacing:2px;
}
</style>
</head>

<body>


<!--=============paper===============-->
<div class="paper">
      <div class="header">
            <div class="guide">search for your requset info</div>
            <input type="text" value="" name="s" class="search">
      </div>

      
      <div class="content">
            <table>
                 <tr><td>Name:</td> <td>Barack Hussein Obama II</td></tr>
                 <tr><td>Sex :</td> <td>male</td></tr>
                 <tr><td>Nationality :</td> <td>U.S</td></tr>
                 <tr><td>Career : </td><td>President</td></tr>
            </table>
            <div class="avatar"><img src="img/FileOfficial_portrait_of_Barack_Obama.jpg"  /></div>
            
            <div class="discription">
            <p>
            Barack Hussein Obama II (i/bəˈrɑːk huːˈseɪn oʊˈbɑːmə/; born August 4, 1961) is the 44th and current President of the United States. He is the first African American to hold the office. In January 2005, Obama was sworn in as a U.S. Senator in the state of Illinois. He would hold this office until November 2008, when he resigned following his victory in the 2008 presidential election.
            </p>
            
            <p>
            Born in Honolulu, Hawaii, Obama is a graduate of Columbia University and Harvard Law School, where he was the president of the Harvard Law Review. He was a community organizer in Chicago before earning his law degree. He worked as a civil rights attorney in Chicago and taught constitutional law at the University of Chicago Law School from 1992 to 2004. He served three terms representing the 13th District in the Illinois Senate from 1997 to 2004.
            </p>
            
            </div>
            
            
  
      </div>
      <div class="footer"></div>
      <div class="clear"></div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)