I was reading about Gill Sans and I looked at the sweet Penguin cover in that article and I wondered if I could do the same in CSS.

Here’s my attempt:
HTML/CSS is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* { border: 0; margin: 0; padding: 0; }
body {
margin-top: 50px;
font-family: "Gill Sans", sans-serif;
text-align: center;
}
.book {
background: rgb(255, 102, 0);
border: 1px black solid;
margin: auto;
width: 390px;
height: 594px;
display: inline-block;
}
.details {
background: #fff3d3;
}
.metadata {
text-transform: none;
}
h1, .author, .banner, .details {
text-transform: uppercase;
}
h1 {
font-size: 36px;
letter-spacing: 7px;
padding-top: 20px;
padding-bottom: 10px;
}
.section {
height: 198px;
margin: 0;
border: 0;
}
hr {
border: 1px rgb(255, 102, 0) solid;
margin: auto;
width: 18%;
}
.banner {
display: flex;
justify-content: center;
}
.publisher {
background: rgb(255, 102, 0);
font-size: 24pt;
text-align: center;
align-self: center;
}
.publisher img {
vertical-align: middle;
}
.author {
font-size: 18pt;
margin: 10px;
}
.logo {
display: flex;
justify-content: center;
}
.colophon {
align-self: center;
font-variant: small-caps;
text-transform: uppercase;
}
.colophon img {
vertical-align: middle;
}
/* 3D */
.book {
position: relative;
-moz-perspective: 100px;
-moz-transform: rotateY(-3deg);
-webkit-transform: perspective(100) rotateY(-3deg);
outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
box-shadow: none;
margin: 0;
}
.book:before,
.book:after {
position: absolute;
top: 1.5%;
height: 97%;
content: ' ';
z-index: -1;
}
.book:after {
width: 5%;
left: 100%;
background-color: #ded2b2;
box-shadow: inset 0px 0px 5px #aaa;
-moz-transform: rotateY(20deg);
-webkit-transform: perspective(100) rotateY(20deg);
}
</style>
</head>
<body>
<div class="container">
<div class="book">
<div class="banner section">
<p class="publisher"><img src="penguinbooks.png" width="162" height="111"></p>
</div>
<div class="details section">
<h1>The Kraken Wakes</h1>
<hr>
<p class="author">John Wyndham</p>
<p class="metadata">Author of <i>The Day of the Triffids</i></p>
</div>
<div class="logo section">
<p class="colophon">Complete <img src="penguin.png" height="100" width="80" alt="Penguin Logo"> Unabridged</p>
</div>
</div>
</div>
</body>
</html>
You can see it on it’s own page at bluebones.net/penguin.