Продолжаем публиковать стили для оформления обложек книжек для веб-мастеров. В этом примере уже не используются изображения для оформления фона. Смотрите пример обложки, которую мы здесь представим. Но, для начала немного ликбеза из истории. Хм, на самом деле цель этого ликбеза - заполнить пространство на странице правее обложки. Шутка, такая. Так вот. В современном книжном магазине легко купить романчик в мягкой обложке — от Чингиза Айтматова или Ивана Бунина до Чака Паланика, Иэна Бэнкса и Дарьи Донцовой. А кто придумал этот формат? Первым культивировать мягкую обложку стал британский книгоиздатель Аллен Лейн, основатель Penguin Books. Причем, если вам кажется, что сделал он это лишь для коммерции, ибо такие книги легче продать, вы ошибаетесь! Обстановка в Британии 1930-х годов XX века сильно напоминала современную. Молодежь покупала сигареты и не читала литературу. Взрослые уныло вещали о деградации юного поколения. И вот Лейн, мысля категориями «развлечение в обмен на развлечение», предложил бороться с курением и невежеством крайне нетривиально: выпускать книги по цене сигарет. Себестоимость мягкой обложки была соответствующей — даже если посмотреть сейчас, пачка сигарет стоит около 16 лей, а книга — 50. Три пачки — вот уже и книга. В серии Лейна издавались и классика, и современные авторы. Любопытно, что издатель начал распространять свою продукцию в храмах и церквях. Люди приходили на мессы семьями, поэтому родители часто покупали дешевые книжки детям. Позже Лейн воплотил еще одну новаторскую идею: яркие обложки с иллюстрацией. Каждая книжка серии оформлялась символом издательства, пингвином, а выражение лица птицы менялось в зависимости от жанра и темы. Молодежь была в восторге! Вот такая вот история. А теперь к стилям для оформления электронных обложек для сайтов. Сразу представим css-стиль:

.book {
position: relative;
 width: 200px;
 height: 300px; 
}

.book-cover {
 width: 100%;
 height: 100%;
 text-align: center;
 box-shadow: 0px 2px 4px #999;
 border-bottom-right-radius: 2px;
 background-color: #c4ca2c;
 font-family: Helvetica, Arial, sans-serif;
 z-index: 1;
}

.book-cover:before {
 border-left: 10px solid #000000;
 content: "";
 height: 300px;
 left: 0;
 opacity: 0.2;
 position: absolute;
 top: 0;
}

.book-cover h1,
.book-cover h2 {
 margin: 0;
 padding: 0;
 font-weight: 300;
 line-height: 30px;
}

.book-cover h1.title {
 font-size: 1em;
 text-shadow: 2px 1px 1px #EEEEEE;
padding-top:45px;
 color: #666666;
}

.book-cover h2.subtitle {
 font-size: .7em;
 text-shadow: 2px 1px 1px #EEEEEE;
padding-top:15px;
}

.book-top {
 background-color: #EEEEEE;
 border-left: 5px solid #C4CA2C;
 border-top: 2px solid #C4CA2C;
 box-shadow: 1px 0px 2px #999;
 height: 8px;
 left: 5px;
 position: absolute;
 top: -10px;
 width: 195px;
 transform: skew(-45deg, 0deg);
 -ms-transform: skew(-45deg, 0deg);
 -webkit-transform: skew(-45deg, 0deg);
}

.book-right {
 background-color: #EEEEEE;
 border-bottom: 1px solid #DDDDDD;
 border-right: 2px solid #C4CA2C;
 box-shadow: 1px 0px 1px #999;
 height: 296px;
 position: absolute;
 right: -10px;
 top: -4px;
 width: 11px;
 transform: skew(0deg, -45deg);
 -ms-transform: skew(0deg, -45deg);
 -webkit-transform: skew(0deg, -45deg);
}

А теперь контейнер для вывода обложки книги на страницу:
<div class="book"> <div class="book-cover"> <h1 class="title">СТИЛЬНЫЕ ОБЛОЖКИ</h1> <h2 class="subtitle">Автор не известен</h2> </div> <div class="book-top"></div> <div class="book-right"></div> </div>