Как создать наложенные документы (стопка) - CSS / HTML - PullRequest
Новая
       0

Как создать наложенные документы (стопка) - CSS / HTML

3 голосов
/ 24 ноября 2011

Кто-нибудь, кто может помочь мне создать этот эффект:

http://i42.tinypic.com/avr0p1.png

Как вы видите в нижней части контента, похоже, что на каждой из них лежат 3 бумаги "прочее "

Как это можно получить?

Ответы [ 5 ]

6 голосов
/ 24 ноября 2011

Демонстрация наложенных бумаг с чистым CSS / HTML

Используемый код: 

<style>

  #paper{
    position:relative;
    margin:0 auto;
    background:#fff;
    border:2px solid #ccc;
    width:380px;
    height:470px;
  }
  #paper_foo1, #paper_foo2{
    position:absolute;
    background:#fff;
    bottom:-8px;
    height:4px;
    width:370px;
    margin-left:3px;
    border-bottom:2px solid #ccc;
    border-left:2px solid #ccc;
    border-right:2px solid #ccc;
  }
  #paper_foo2{
    width:360px;
  }     
</style>


  <div id="paper">

    <div id="paper_foo1"><div id="paper_foo2"></div></div>
  </div>
2 голосов
/ 24 ноября 2011

Вот, пожалуйста, http://jsfiddle.net/gHKh4/7/

Просто поиграйте с CSS, чтобы получить его по своему желанию.

Preview:

Preview of Paper 3D effect

HTML: 

<body>
<div id="content">
    <h2><strong>Main window</strong></h2>
    <p>My content</p>
</div>
<div id="footer1">
</div>
<div id="footer2">
</div>

</body>

CSS: 

body {
    padding: 20px;
    background: #ccc;
}

#content, #footer1, #footer2 {
    margin: 0px auto;
    background: #fafafa;
    border: 1px solid #aaa;
}

#content {
    width: 80%;
    border-radius: 3px;
    padding: 4px;
 }

#footer1 {
    width: 79%;
}


#footer2 {
    width: 78%;
}

#footer1, #footer2 {
    height: 3px;
    border-top-width: 0px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
2 голосов
/ 24 ноября 2011

Если вы хотите использовать чистый CSS / HTML, вы можете сделать что-то вроде:

HTML 

<div class="content">
    Content
    <div class="backpage"><div class="backpage"></div></div>
</div>

CSS 

.content {
    border: 1px solid #aaa;
    background-color: white;
    position: relative;
}

.backpage {
    z-index: -1;
    border: 1px solid #aaa;
    background-color: white;
    height: 100%;
    position: absolute;
    bottom: -2px;
    left: 5px;
    right: 5px;
}

На самом деле я этого не проверял, но это должно дать вам нечто подобное.Я бы предпочел что-то динамичное, хотя ...

0 голосов
/ 19 февраля 2013

Хотя на этот вопрос уже дан ответ, но я думаю, что это решение может быть кому-то интересно. Только один div в HTML, все сделано CSS и псевдоэлементами.

HTML: 

<div class="page"></div>

CSS: 

.page {
    position: relative;
    width: 600px;
    height: 200px;
    background: white;
    border-style: solid;
    border-color: #888;
    border-width: 2px;
}
.page:before {
    position: absolute;
    content: " ";
    width: 560px;
    height: 4px;
    left: 18px;
    top: 200px;
    border-style: solid;
    border-color: transparent #888 #888 #888;
    border-width: 2px;
}
.page:after {
    position: absolute;
    content: " ";
    width: 520px;
    height: 4px;
    left: 38px;
    top: 206px;
    border-style: solid;
    border-color: transparent #888 #888 #888;
    border-width: 2px;
}

http://jsfiddle.net/6zTu9/

0 голосов
/ 24 ноября 2011

Я бы предложил использовать фоновое изображение в css для вашего контента внутри.Я открыт для других предложений.

HTML: 

 <div class="myDiv">
     <!-- content here -->
 </div>

CSS: 

 .myDiv {
     background-image: url('threepapers.png');
 }

Я бы использовал PNG для фонового изображения, потому что это позволяет прозрачность

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...