Эффект стопки бумаги CSS3
Этот пример создает эффект стопки бумаги с использованием HTML и CSS3.
Код CSS
Эффект стопки бумаги на 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; }