Demo of various Bible Cover designs done entirely in css (Sass/SCSS).
A Pen by Dallas Peters on CodePen.
Created
April 8, 2015 13:18
-
-
Save dallasbpeters/7f18052e9efdd6efa645 to your computer and use it in GitHub Desktop.
CSS Bible Cover Designs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.cover').on('click', function(){ | |
| $(this).toggleClass('thumb'); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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%)); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment