Стильная книжка - book cover css

Для оформления на вашем сайте каталога книг, которые можно скачать или купить, например, вам может понадобиться стиль книжной обложки. Например, такой как вы видите здесь. Дизайн обложки книги - должен создавать образ. Обложка книги является побудителем желания у покупателя приобрести книгу, чтобы узнать суть ее содержимого. Обложка книги должна продавать ее, саму книгу, она является витриной, которая интригует человека, заинтересовывает, заставляет сделать конкретные действия. Поэтому, обложка книги должна иметь положительное восприятие, располагающее, заинтересовывающее, ну и конечно, она должна являться носителем той идеи, которая заключена в саму книгу. Но, обложка книги это не только реклама содержимого книга и средство привлечения внимания покупателя. Обложка имеет и просто эстетическое значение, например, как элемент вашего интерьера, если у вас есть домашняя библиотека. Обложка - способ самовыражения для автора и дизайнера вашего издания. Все чаще книги у нас ассоциируются с электронной версией, которую можно читать на вашем электронном ридере. Но, традиция представлять книгу с помощью обложки прижилась и для электронных книг. Так удобно сделать имитацию книжной полки в вашем каталоге имеющихся у вас электронных книг. И еще - это способ передать информацию графически о типе издания, который скрывается под обложкой. Вы смотрите на картинку обложки и понимает, что перед вами именно книга, а не журнал, буклет, брошюра или газета. Это, однозначно книга. Ладно, достаточно агитации, перейдем к сути. Приведем коды css-стиля, с помощью которого можно создать такую обложку, как представлено здесь:

.cover {
 background: linear-gradient(rgba(0,150,0,0.3), rgba(0,100,0,0.3)), 
 url('http://upbyte.net/picture/demo/tweed.png');
 width: 200px;
 height: 300px;
 border: 1px solid black;
 border-radius: 2px 4px 4px 2px;
 box-shadow: 6px 0px 0px 0px rgba(0,0,0,.2) inset,
 3px -1px 0px 0px #fff,
 4px -2px 0px 0px #eee,
 5px -3px 0px 0px #fff,
 6px -4px 0px 0px #eee,
 7px -5px 0px 0px #fff,
 8px -6px 0px 0px #eee,
 9px -7px 0px 0px #fff,
 10px -8px 0px 0px #eee,
 11px -9px 0px 0px #fff,
 12px -10px 0px 0px #000,
 11px -10px 0px 0px #000,
 9px -9px 0px 0px #000,
 8px -8px 0px 0px #000,
 7px -7px 0px 0px #000,
 6px -6px 0px 0px #000,
 5px -5px 0px 0px #000,
 4px -4px 0px 0px #000,
 3px -3px 0px 0px #000,
 2px -2px 0px 0px #000,
 1px -1px 0px 0px #000,
 0px 0px 20px 0px #333;
}

.cover p.title {
 font-family: sans-serif;
 font-size: 18px;
 text-align: center;
 text-shadow: -1px 1px 0px #000;
 color: #fff;
 width: 92%;
margin-left:4%;
 margin-top: 20px;
}

.cover p.author {
 font-family: sans-serif;
 font-size: 13px;
 text-align: center;
 text-shadow: -1px 1px 0px #000;
 color: #eee;
 width: 90%;
margin-left:5%;
 padding-top: 20px;
}

Теперь контейнер для отображения книги:
<div class="cover"> <p class="author">Автор книги</p> <p class="title">Название книги</p> </div> Вам еще понадобится файл для оформления фона: забрать.