Закрыть   X

  •    
  •    
Печать

Эффект стопки бумаги CSS3

Автор: Алексей Елизаров.

Этот пример создает эффект стопки бумаги с использованием HTML и CSS3. 




Просмотр Скачать

Эффект стопки бумаги на CSS3

Этот пример создает эффект стопки бумаги с использованием HTML и CSS3.

Вам просто нужно применить класс "бумаги" на любой элемент, содержащий контент.

Эффекты могут быть изменены в CSS для изменения ширины, отступов, полей, цвета, границы, угол поворота и т.д. Фон документа применяется с использованием :before и :after элементов.

Надеюсь Вам понравится!

Код HTML
<div class="papers">
  <h1>Эффект стопки бумаги на CSS3</h1>
  <p>Этот пример создает эффект стопки бумаги с использованием HTML и CSS3.</p>
  <p>Вам просто нужно применить класс "бумаги" на любой элемент, содержащий контент.</p>
  <p>Эффекты могут быть изменены в CSS для изменения ширины, отступов, полей, цвета, границы, угол поворота и т.д. Фон документа применяется с использованием :before и :after элементов.</p>
  <p>Надеюсь Вам понравится!</p>
</div>

Код CSS
body
{
  font-family: sans-serif;
  font-size: 100%;
  color: #444;
  background-color: #ddd;
}

.papers, .papers:before, .papers:after
{
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

.papers
{
  position: relative;
  width: 50%;
  padding: 2em;
  margin: 50px auto;
}

.papers:before, .papers:after
{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateZ(2.5deg);
  -o-transform: rotate(2.5deg);
  transform: rotateZ(2.5deg);
  z-index: -1;
}

.papers:after
{
  -webkit-transform: rotateZ(-2.5deg);
  -o-transform: rotate(-2.5deg);
  transform: rotateZ(-2.5deg);
}

.papers h1
{
  font-size: 1.8em;
  font-weight: normal;
  text-align: center;
  padding: 0.2em 0;
  margin: 0;
  border-top: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
}

.papers p
{
  text-align: left;
  margin: 1.5em 0;
}

© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки