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.
love it!