Hank Stoever
part time nerd, part time gnar.

Design a Book Cover in CSS with SASS

posted over 4 years ago - 3 min read

In this tutorial, we'll be designing a book cover to be displayed on a webpage. Instead of using an image to represent the cover of a book, using HTML and CSS alone will make your content more accessible and SEO-friendly. It's not that big of a difference, and you can't get as pixel-perfect of a design as you could in Photoshop. Personally, I like to spend my time in code, so designing in CSS is much more efficient.

Plus, this is just an experiment, and hopefully we'll learn something.

Final Product: (demo)

cover final

cover large

The key to this design is the ability to use multipe box-shadow and text-shadow properties.

This is all we need for the HTML:

<div class="book-cover">
  <div class="fade">
    <p class="book-title">The Self-Taught Developer's Handbook</p>
    <br><br><br><br><br><br><br><br><br><br><br>
    <p>By Hank Stoever</p>
  </div>
</div>

The SASS for all of this is:

.book-cover
  $color: rgb(63, 202, 52)
  $width: 300px
  $height: 400px
  $purple: #6d34ca
  :width $width
  :height $height
  :background-image url('/images/tweed.png')
  // cloud hosted version
  //:background-image url('http://subtlepatterns.com/patterns/tweed.png')
  :background-repeat repeat
  :margin 20px auto
  :border 1px solid darken($color, 30%)
  :border-radius 0px 3px 3px 0
  $pages: 1px -1px 0 darken(whiteSmoke, 10%)
  $pageLength: 10
  $pageGap: 1
  @for $i from 2 through $pageLength
    $pages: $pages, #{$i * $pageGap}px -#{$i * $pageGap}px 0 darken(whiteSmoke, ($i * (35 / $pageLength)))
  $bounder: #{$pageLength * $pageGap + 1}px -#{$pageLength * $pageGap + 1}px 0 darken($color, 35%)
  @for $i from 0 through $pageLength
    $bounder: $bounder, #{$i * $pageGap}px #{-1 - $i * $pageGap}px 0px darken($color, 35%)
  :box-shadow $pages, $bounder, 0 0 45px rgba(black, 0.8)
  :box-shadow $pages, $bounder, 0 0 45px rgba(black, 0.8)
  :text-align center
  :text-transform uppercase
  :font-family 'Lato', Helvetica Neue
  .fade
    $padding: 40px
    $binding: 3px
    :background-color rgba($color, 0.3)
    :padding 20px $padding
    :width $width - $padding * 2 - $binding
    :height $height - 20px * 2
    :border-radius 0 3px 3px 0
    :position relative
    :left $binding
    :box-shadow -#{$binding} 0 0 rgba(darken($color, 20%), 0.3), -#{$binding / 2} 0 0 rgba(darken($color, 20%), 0.7)
  p
    :color lighten($purple, 40%)
    :font-size 16px
    $shadow: rgba(darken($color, 30%), 0.6)
    :text-shadow 1px 1px 1px $shadow, 0 -1px 0 $shadow
    &.book-title
      :font-size 18px
      :line-height 1.25em

.book-cover

This refers to the outermost div element with the book-cover class.

It has a background-image from subtle patterns to provide a cool textured look. It has a border-radius of 0px on the left side and 3px on the right side to imitage the spine of the book. The 3d effect is created from overlapped box-shadows. The final box-shadow property in CSS is this:

// gray pages
1px -1px 0 gainsboro,
2px -2px 0 #c2c2c2, 
3px -3px 0 darkgrey, 
4px -4px 0 #8f8f8f, 
5px -5px 0 #133c0f, 

// binder
0px -1px 0px #133c0f, 
1px -2px 0px #133c0f,   
2px -3px 0px #133c0f,   
3px -4px 0px #133c0f,   
4px -5px 0px #133c0f, 

// drop shadow
0 0 45px rgba(0, 0, 0, 0.8)

That's definitely a mouthful. Luckily it's easier to handle with SASS.

Basically, the first part ($pages) goes from the top right outwards to create the 'page' imitation. This is created with a @for loop going from 0 through $pageLength. The farther back pages are supposed to be darker, so I used SASS's darken function. The farthest back page in this situation will be darkened 35%.

darken(whiteSmoke, ($i * (35 / $pageLength)))

The second part is multiple green shadows right behind them but shifted one pixel to the left. This imitates the back of the spine. The last shadow is just a big drop shadow to create some pop on the screen.

Feel free to change the $pageLength variable to any size you want. Change $pageGap to 2 to make the book's pages seem more leafy. You can make some huge looking books!

100 stacks

.fade

The inner .fade container is what lets us change the color of the book cover. Simple alter the $color variable, and the shadows and borders will be automatically changed. You can see that on my current product page for The Self-Taught Developer's Handbook I changed the color to purple. This div is shifted 5px to the right with an equally shifted left box-shadow that is slightly darker, which imitates the crease in the cover. A second layer of box-shadow is darker and half the width, to give depth to the crease.

crease

typography

I was going for a 'letter press' effect with the text on the book. To do this, I used two text-shadow properties:

$shadow: rgba(darken($color, 30%), 0.6)
:text-shadow 1px 1px 1px $shadow, 0 -1px 0 $shadow

close up typography

Wrapping Up

I hope you find this useful in the future if you need to promote your own book. The great thing about using SASS is that it's easily tweakable. I'm still constanstly changing the design I'm using. If you prefer to do your designing in Photoshop, Nathan Barry has an excellent tutorial.

comments powered by Disqus