CSS Bible Cover Designs

CSS-Bible-Cover-Designs.markdown

CSS Bible Cover Designs

Demo of various Bible Cover designs done entirely in css (Sass/SCSS).

A Pen by Dallas Peters on CodePen.

License.

index.html

<div class="drop">
  <h2>Click us to see thumb versions</h2>
  <ul class="bible-list covers">
    <li class="cover default">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover default">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover default">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover default">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-one">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-two">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-three">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-four">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-five">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-six">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-seven">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-eight">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-nine">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-ten">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-eleven">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
    <li class="cover style-twelve">
      <a href="#">
        <span class="abbr">CEVDCUS06</span>
        <span class="full-name">Contemporary English Version</span>
      </a>
    </li>
  </ul>
</div>

script.js

$('.cover').on('click', function(){
    $(this).toggleClass('thumb');
});

style.scss

@import "bourbon";
$read-font: "CharisSIL", serif;
$eng-read-font: "merriweather", Garamond, "Times New Roman", Times, serif; // 300 | 400 | 700
$ui-font: "proxima-nova", sans-serif;
$serif: $eng-read-font;
$sans: $ui-font;
// Colors
$black: #343b3e;
$black-plus-10: darken($black,10%);
$black-90: lighten($black,10%);
$black-80: lighten($black,20%);
$black-70: lighten($black,30%);
$black-60: lighten($black,40%);
$black-50: lighten($black,50%);
$black-40: lighten($black,60%);
$black-30: lighten($black,70%);
$black-25: lighten($black,75%);
$black-text: #282e30;

$gray:#F9F9F9;
$gray2:#C0C0C0;
$gray3:#d2d2d2;
$gray4:#a9a9a9;
$gray5:#929191;

$blue:#268BD2;
$red:#DC322F;
$orange:#CB4A17;
$violet:#6C71C4;
$magenta:#D33682;
$yellow:#DDB630;
$cyan:#2AA198;
$green:#85991C;

$base:#e2e2e2;
$base2:#93A1A1;
$base3:#839496;
$base4:#657B82;
$base5:#586E75;
*, *:before, *:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

h2 {
  font-size: .7em;
  margin:10px;
  text-transform:uppercase;
  letter-spacing:.3em;
}

.drop {
  background-color:#F9F9F9;
  padding:30px;
  display:inline-block;
  margin:30px;
  font-family:$ui-font;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.bible-list.covers {
  list-style: none;
  margin:0;
  padding:0;
}

.cover {
  display:inline-block;
  float:left;
  margin:8px;
  // Just for the demo
  width:170px;
  height:230px;
  //
  a {
    background: #282E30;
    color:#ffffff;
    text-decoration: none;
    text-align:center;
    display:block;
    width:170px;
    height:230px;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
    position:relative;
    overflow:hidden;
    font-size:16px;
    @include transition(all .3s ease-in);
  }
}

.cover.default {
  font-weight:200;
  font-family: $serif;
  a {
    color:#9F9E91;
    &:before {
      position:absolute;
      border-left: solid 4px #1B2021;
      height:100%;
      left:5%;
      content: "";
    }
  }
  .full-name {
    position:absolute;
    width:100%;
    left:0;
    bottom:40%;
    padding:0 6%;
    font-size:.5em;
    line-height:1.7;
    letter-spacing:.3em;
    margin-left:2%;
    &:before {
      content: "HOLY BIBLE";
      position:absolute;
      left:0;
      letter-spacing:.1em;
      color:#CFCEC7;
      font-size:2.1em;
      bottom:120%;
      width:100%;
    }
  }
  .abbr {
    position:absolute;
    display:block;
    bottom:10%;
    width:100%;
    margin-left:2%;
    font-size:.7em;
    letter-spacing:.2em;
    font-weight:700;
  }
  &:nth-child(2) {
    a {
      color:#AA8B8B;
      background-color:#4D2323;
      &:before {border-color:#3B1818;}
    }
  }
  &:nth-child(3) {
    a {
      color:#779EAB;
      background-color:#023E52;
      &:before {border-color:#0B323F;}
    }
  }
  &:nth-child(4) {
    a {
      color:#E2945E;
      background-color:#9E470A;
      &:before {border-color:#853A05;}
    }
  }
}


// Style one
.style-one {
  .abbr {
    display:block;
    position:absolute;
    top:10%;
    left:-5%;
    letter-spacing: -.1em;
    color: $black-90;
    font-family:$serif;
    font-weight:700;
    font-size:6em;
  }
  .full-name {
    display:block;
    font-weight:200;
    line-height:1.5;
    font-family: $serif;
    font-size: .8em;
    padding: 0 5%;
    color: #E2E2E2;
    letter-spacing: 1px;
    position:absolute;
    bottom:20%;
  }
}

// Style Two
.style-two {
   a {background-image: url('https://dl.dropboxusercontent.com/u/585810/bible-covers/cover2%402x.png');
  background-size:cover;
   }
  .abbr {
    width:80%;
    margin:18% auto 7%;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
    font-weight:800;
    font-size:2.4em;
    color:#1B304A;
  }
  .full-name {
    display:block;
    color:#ffffff;
    text-transform:uppercase;
    font-weight:600;
    font-size:.8em;
    letter-spacing:.1em;
    padding:5%;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
  }
}


// Style Three
.style-three {
   a {
     background-image: url('https://dl.dropboxusercontent.com/u/585810/bible-covers/cover3%402x.png');
    background-size:cover;
    box-shadow: inset 0 0 0 11px #ffffff, 1px 2px 2px rgba(0,0,0,0.3); 
   }
    .abbr {
      position:absolute;
      width:70%;
      bottom:10%;
      left:15%;
      padding-top:10%;
      display:block;
      font-size: .75em;
      color: #789B99;
      letter-spacing: .15em;
      line-height: 13px;
      border-top: solid 1px #ffffff;
    }
    .full-name {
      font-family: $serif;
      font-weight:400;
      color: #FFFFFF;
      letter-spacing: .18em;
      line-height: 1.3;
      word-wrap: break-word;
      display:block;
      position:absolute;
      left: 2.5%;
      bottom: 30%;
      width: 80%;
      left:10%;
    }
}


// Style Four
.style-four {
  a {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 16px #1F3C64, 1px 2px 2px rgba(0,0,0,0.3);
  }
  .abbr {
    position:absolute;
    width:100%;
    bottom: 10%;
    left:0;
    color:#1F3C64;
    font-size:.7em;
    letter-spacing:.2em;
  }
  .full-name {
    width:60%;
    text-align:center;
    display:block;
    margin: 30% auto;
    border-bottom: double 3px #A07D05;
    padding-bottom:1em;
    font-family: $serif;
    font-weight:200;
    font-size:1em;
    word-wrap: break-word;
/*     hyphens: auto; */
    line-height:1.6;
    color:#A07D05;
  }
}

// Style Five
.style-five {
  a:before {
    position:absolute;
    border-left: solid 4px #1B2021;
    height:100%;
    left:5%;
    content: "";
  }
  .abbr {
    position:absolute;
    left:0;
    bottom: 14%;
    width:100%;
    opacity: 0.59;
    font-family: $serif;
    font-weight:400;
    font-size: .65em;
    color: #9F9E91;
    letter-spacing: .4em;
  }
  .full-name {
    width:82%;
    display:block;
    margin:35% auto;
    font-family: $serif;
    font-weight:200;
    font-size: 1em;
    word-wrap: break-word;
/*     hyphens: auto; */
    color: #9F9E91;
    letter-spacing: .1em;
    text-transform:uppercase;
    line-height:1.5;
  }
}

// Style Six
.style-six {
  a {
    background-color: #1973B2; 
  }
  .abbr {
    position:absolute;
    color:rgba(255,255,255,.5);
    bottom:30%;
    left:0;
    width:100%;
    padding: 5%;
    font-size:.7em;
    letter-spacing:.2em;
    font-weight:200;
    background-color: #318FD1;
    border-bottom: solid 1px #80C4F4;
  }
  .full-name {
    position:absolute;
    font-family:$serif;
    bottom:40%;
    font-size:.85em;
    line-height:1.6;
    left:0; 
    font-weight:200;
    letter-spacing:.15em;
    width:100%;
    padding: 5%;
    background-color: #318FD1;
    border-top: solid 1px #80C4F4;
  }
}

.style-seven {
  a {
    color: #0F4844;
    background-color: #ffffff;
    &:before {
      background-image:url('https://dl.dropboxusercontent.com/u/585810/bible-covers/cover3top%402x.png');
      background-size:cover;
      height:18%;
      width:100%;
      position:absolute;
      top:0;
      left:0;
      content: "";
    }
    &:after {
      position:absolute;
      display:block;
      bottom:0;
      content: "Holy Bible";
      font-family:$serif;
      color: #FFFFFF;
      padding: .6em 0;
      text-transform:uppercase;
      font-size: 2em;
      line-height:1;
      font-weight:200;
      background: #1F9289;
      background-image: radial-gradient(50% 113%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
    }
  }
  .abbr {
    display:block;
    font-weight: 800;
    width:90%;
    margin: 30% 5% 0;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:2.2em;
    letter-spacing:-.06em;
    font-family:$serif;
  }
  .full-name {
    position:absolute;
    bottom:50%;
    font-size:.65em;
    display:block;
    text-transform:uppercase;
    line-height:1;
    padding: 0 5%;
  }
}

// Style Eight
.style-eight {
  a {
    background-image: radial-gradient(80% 80%, #3F7499 12%, #032A45 80%);
  }
  .abbr {
    position:absolute;
    width:100%;
    bottom:10%;
    left:0;
    font-size:.7em;
    letter-spacing:.4em;
    color: $yellow;
  }
  .full-name {
    text-transform:uppercase;
    letter-spacing:.08em;
    text-shadow: 0 1px 2px rgba(#062E4A,.9);
    display:block;
    position:absolute;
    top: 50%;
    transform:translateY(-60%);
    padding: 0 5%;
  }
}

// Style Nine
.style-nine {
  a {
     background-image: url('https://dl.dropboxusercontent.com/u/585810/bible-covers/cover9%402x.png');
  background-size:cover; 
  }
  .abbr {
    position:absolute;
    top:5%;
    right:5%;
    background-color: $black;
    padding: .75em 1em;
    font-size:.55em;
    letter-spacing:.2em;
  }
  .full-name {
    position: absolute;
    bottom:20%;
    left:6%;
    width:88%;
    font-size:.8em;
    text-transform:uppercase;
    font-weight:200;
    letter-spacing:.2em;
    word-wrap: break-word;
  }
}

.style-ten {
  a {
    color: #0F4844;
    background-color: #132133;
    &:before {
      background-image:url('https://dl.dropboxusercontent.com/u/585810/bible-covers/cover10bottom%402x.png');
      background-size:cover;
      height:40%;
      width:100%;
      position:absolute;
      bottom:0;
      left:0;
      content: "";
    }
  }
  .abbr {
    position:absolute;
    top:5%;
    right:5%;
    color:#E8D07A;
    font-size:.6em;
    letter-spacing:.3em;
  }
  .full-name {
    position:absolute;
    bottom:38%;
    width:80%;
    right:5%;
    text-align:right;
    color:#E5E0CE;
    font-size:.85em;
    letter-spacing:.15em;
    text-transform:uppercase;
    word-wrap: break-word;
  }
}

// Style Eleven
.style-eleven {
   a {
      background: rgba(129,150,159,1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(129,150,159,1) 0%, rgba(68,94,104,1) 87%, rgba(68,94,104,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(129,150,159,1)), color-stop(87%, rgba(68,94,104,1)), color-stop(100%, rgba(68,94,104,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(129,150,159,1) 0%, rgba(68,94,104,1) 87%, rgba(68,94,104,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(129,150,159,1) 0%, rgba(68,94,104,1) 87%, rgba(68,94,104,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(129,150,159,1) 0%, rgba(68,94,104,1) 87%, rgba(68,94,104,1) 100%);
  background: radial-gradient(ellipse at center, rgba(129,150,159,1) 0%, rgba(68,94,104,1) 87%, rgba(68,94,104,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81969f', endColorstr='#445e68', GradientType=1 ); 
   }
  .abbr {
    position:absolute;
    top:5%;
    left:-5%;
    width:105%;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:-.15em;
    font-size:3.2em;
  }
  .full-name {
    position:absolute;
    bottom:5%;
    left:0;
    width:95%;
    text-align:left;
    font-size:.65em;
    font-weight:200;
    text-transform:uppercase;
    letter-spacing:.2em;
    border-left:solid 5px #93A1A1;
    padding-left:.6em;
    line-height:1.1;
  }
}


// Style Twelve
.style-twelve {
  a {background-image: linear-gradient(-180deg, #4888A2 0%, #055372 100%);}
  .abbr {
    position:absolute;
    bottom:3%;
    left:97%;
    height:15%;
    width:60%;
    overflow:hidden;
    border-right:solid 2px #ffffff;
    font-size:2em;
    font-weight:800;
    transform-origin: bottom left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .full-name {
    position:absolute;
    bottom:49%;
    left:96%;
    height:12%;
    width:65%;
    overflow:hidden;
    font-size:.7em;
    letter-spacing:.1em;
    text-align:left;
    text-transform:uppercase;
    font-weight:200;
    transform-origin: bottom left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}



.thumb a {
  .full-name {display: none;}
  height:60px;
  width:60px;
  border-radius:500px;
  .abbr {
    margin:0;
    padding:0;
    position:absolute;
    top:50% !important;
    bottom:auto !important;
    left:10% !important;
    width:80% !important;
    overflow:hidden;
    font-weight:200 !important;
    font-size:.6em !important;
    text-align:center !important;
    font-family:$ui-font;
    text-overflow:ellipsis;
    letter-spacing:.1em !important;
    color:#ffffff !important;
    @include transform(translateY(-50%));
    }
}