BACK
BACK
BACK
Loading...

Blog / HowTos /  Creating Amazing CSS Book Style Page

February 2, 2016 - Cathy

Creating Amazing CSS Book Style Page

CSS Book Style Markup

There are a lot of amazing effects that can be created using CSS. One of those is a CSS flip book. Essentially the CSS book style will resemble a swatch book that you might look at to view fabric samples or paint samples. To create this animated flip book, CSS rotation transforms and JavaScript will be used.

The intention here is to display a structure similar to a swatch book, with each swatch being clickable. Clicking on a swatch will rotate the other swatches to reveal the one that was chosen. The markup will be a simple structure with several divisions where each one contains an icon span and a h4:

<div id="sb‐container" class="sb‐container">
<div>
<span class="sb‐icon icon‐cog"></span>
<h4><span>All Settings</span></h4>
</div>
<div>
<span class="sb‐icon icon‐flight"></span>
<h4><span>User Modes</span></h4>
</div>
<div>
<!‐‐ ... ‐‐>
</div>
<!‐‐ ... ‐‐>
<div>
<h4><span>Profile</span></h4>
<h5><span>We ♥ color</span></h5>
</div>
</div><!‐‐ sb‐container ‐‐>

CSS Book Style Creation

CSS will be used to style the book. The first thing to do is define the style for the containing wrapper. The width will be the same as one of the swatches so it can be easily centered:

:.sb‐container {
position: relative;
width: 150px;
height: 400px;
margin: 30px auto 0 auto;
}

The goal is to create a swatch book with several swatch “sheets”. Each one will be rotated using the CSS transform property (JS). Give the swatches a realistic width and height and make them absolute. The initial state will be all swatches are stacked on top of each other.

css book style

 

The transform-origin will define how the swatches are rotated. The bottom left corner will be used for that so set a value of 25% 90%. Having the backface-visibility hidden will help avoiding a jagged looking text when rotating:

.sb‐container div {
position: absolute;
top: 0;
left: 0;
width: 130px;
background: #fff;
height: 400px;
border‐radius: 5px;
cursor: pointer;
text‐align: center;
background‐image: url(../images/fabric.png);
transform‐origin: 25% 90%;
backface‐visibility: hidden;
}

Now for each division define a different background color and box shadow:

.sb‐container div:nth‐child(1){
background‐color: #ea2a29;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 1px 1px1pxrgba(0,0,0,0.1);
}
.sb‐container div:nth‐child(2){
background‐color: #f16729;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb‐container div:nth‐child(3){
background‐color: #f89322;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb‐container div:nth‐child(4){
background‐color: #ffcf14;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 4px 4px4pxrgba(0,0,0,0.2);
}
.sb‐container div:nth‐child(5){
background‐color: #ffea0d;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb‐container div:nth‐child(6){
background‐color: #87b11d;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb‐container div:nth‐child(7){
background‐color: #008253;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb‐container div:nth‐child(8){
background‐color: #3277b5;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb‐container div:nth‐child(9){
background‐color: #4c549f;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb‐container div:nth‐child(10){
background‐color: #764394;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb‐container div:nth‐child(11){
background‐color: #ca0d86;
box‐shadow: ‐1px ‐1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}

To make the book look realistic give the bottom most element a very subtle shadow. For every following element that second shadow will be increased. A special background and box shadow will be used on the last swatch as it will act as the cover:

.sb‐container div:last‐child{
background: #645b5c url(../images/cover.jpg) repeat center center;
box‐shadow:
‐1px ‐1px 3px rgba(0,0,0,0.2),
12px 12px 20px rgba(0,0,0,0.6),
inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}

Use the pseudo-class “:after” to add a small brass fitting. A gradient and a box shadow will be used to make it look like metal. The brass fitting will be positioned in the bottom left corner:

.sb‐container div:last‐child:after{
content: '';
position: absolute;
bottom: 15px;
left: 15px;
width: 20px;
height: 20px;
border‐radius: 50%;
background: #dddddd;
background: linear‐gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);
box‐shadow: ‐1px ‐1px 1pxrgba(0,0,0,0.5), 1px 1px1pxrgba(255,255,255,0.1);
}

Next to be styled are the headings:

.sb‐container div h4{
color: rgba(255,255,255,0.9);
text‐shadow: 1px 1px1pxrgba(0,0,0,0.2);
font‐weight: 700;
font‐size: 16px;
text‐transform: uppercase;
border‐top: 1px dashed rgba(0,0,0,0.1);
border‐bottom: 1px dashed rgba(0,0,0,0.1);
margin: 5px;
padding: 5px;
user‐select: none;
}
.sb‐container div:last‐child h4{
background: rgba(0,0,0,0.2);
box‐shadow: 0 1px 1pxrgba(255,255,255,0.1);
}

The big heading on the cover will be rotated and translated into the right position. Values would have to be adjusted if other words were used as it depends on the size:

.sb‐container div:last‐child h5{
font‐size: 50px;
white‐space: nowrap;
text‐align: left;
margin: 0;
padding: 0;
position: absolute;
line‐height: 50px;
top: 0px;
left: 0px;
color: #111;
text‐shadow: ‐1px ‐1px 1pxrgba(255,255,255,0.1);
text‐transform: uppercase;
transform: rotate(‐90deg) translateX(‐157%) translateY(73px);
transform‐origin: 0 0;
user‐select: none;
}

Finally the icon class will be styled. Style the span and the “:before” pseudo-element, which will contain the characters of the icon font:

span.sb‐icon{
display: block;
height: 70px;
width: 70px;
margin: 20px auto;
user‐select: none;
}
span.sb‐icon:before {
font‐family: 'icons';
font‐style: normal;
font‐weight: normal;
speak: none;
display: block;
text‐decoration: inherit;
text‐align: center;
text‐shadow: 1px 1px1pxrgba(127, 127, 127, 0.3);
line‐height: 64px;
width: 100%;
font‐size: 60px;
color: #000;
text‐shadow: 0 0 1px #000;
}
.icon‐cog:before { content: '35'; } /* '5' */
.icon‐flight:before { content: '37'; } /* '7' */
.icon‐eye:before { content: '34'; } /* '4' */
.icon‐install:before { content: '39'; } /* '9' */
.icon‐bag:before { content: '36'; } /* '6' */
.icon‐globe:before { content: '38'; } /* '8' */
.icon‐picture:before { content: '32'; } /* '2' */
.icon‐video:before { content: '30'; } /* '0' */
.icon‐download:before { content: '41'; } /* 'A' */
.icon‐mobile:before { content: '42'; } /* 'B' */
.icon‐camera:before { content: '33'; } /* '3' */

That’s all of the CSS book styling that will be done. The rest of the work will be completed using JavaScript. If the swatch book will be closed initially, it will be necessary to set the CSS transitions for the items ( _setTransition function ). Finally load the click events on the items. When an item is clicked it will rotate so it has 0 degrees. Its siblings will have to be rotated as well so the opened item’s content can be read. A CSS flip book like this can be used for things like product information in e-commerce stores, so that the information is available without occupying too much space. You can also try implementing a CSS transition effect using our simple tips!

Struck with CSS book style? We can help!

 

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5