Make an open book with only CSS/HTML

Today we'll be making a blank, open book style template like the one above using only CSS and HTML.

Before we begin, you'll want a basic understanding of HTML and CSS. It will make it easier to follow this tutorial.

Open your text editor and let's make an html document:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Book Tutorial</title>

<style>

body{
background-color: #DACBB6;
background-image: url('https://i.imgur.com/m5Mig5o.png');
}

</style>

</head>

<body>

</body>

</html>

You can assign a background color or image to the body like I did, if you want to.

Now, let's add the actual book cover by adding this to the CSS between the style tags:

#cover{
width: 820px;
height: 580px;
border-radius: 15px;
background-color: #91697b;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

and this to the HTML between the body tags:

<div id="cover">
</div>

The border radius is optional, depending on if you want rounded corners or not. It's absolutely positioned so it will be vertically and horizontally centered. This is what we have so far:

Let's assign a background image to add texture, and a drop shadow to make it look more convincing. Add these properties to the #cover selector in the CSS:

background-image: url('https://i.imgur.com/BspyVOP.png');
box-shadow: 2px 2px 2px #57443E;
padding: 10px;

I've also added a padding of 10 pixels, to make room for the pages we're about to add.

Let's add our first page. Add this to the CSS:

#page1{
background-color: #fff;
border-radius: 15px;
width: 818px;
height: 578px;
padding: 2px;
box-shadow: 0px 0px 2px #57443E;
}

I've added a padding of 2 pixels to make room for the next page, and adjusted the width and height to make up for the padding (so 820x580 to 818x578)

I've also added a self-explanatory drop shadow, border radius, and background color.

And this to the HTML, inside the "cover" div:

<div id="page1">
</div>

Here's how it looks so far:

We'll now add depth by creating multiple pages on top. For these we'll do the same thing with the page we've just created. Add this to the CSS:

#page2{
background-color: #fff;
border-radius: 15px;
width: 814px;
height: 574px;
box-shadow: 0px 0px 2px #574539;
padding: 2px;
}

#page3{
background-color: #fff;
border-radius: 15px;
width: 814px;
height: 574px;
box-shadow: 0px 0px 2px #574539;
background-image: url('https://i.imgur.com/BspyVOP.png');
}

I've added a background image to page 3 for texture, as this will be the page our book will be opened up to.

Add this inside of the "page1" div in the HTML:

<div id="page2">
</div>

and add this inside of the "page2" div we've just created:

<div id="page3">
</div>

Now this is what we have:

So it doesn't just look like one big page, we need a division down the middle.

Make a div called "line" (or whatever you want to call it) inside of the "page3" div:

<div id="line">
</div>

And let's style it by adding this to the CSS:

#line{
width: 1px;
height: 574px;
margin: 0 auto;
background-color: #A19386;
box-shadow: 0px 0px 10px #2e2a27;
}

I set a margin of "0 auto" to center it, as well as a height equal to that of page 3 and a width of just 1 pixel. This way it appears as a line. I've also added a background color so we can see it, and a box shadow to create another illusion of depth.

Here's what we have:

We are technically done, but to make sure our content appears in the right places, we need to make more divs.

Inside our "page 3" div, above the "line" div, make another div called "leftpage":

<div id="leftpage">
</div>

And let's do the same for the right page. Add this under the "leftpage" div we just created:

<div id="rightpage">
</div>

Now let's style them so they are in the right positions. We'll do this by using floats. Add this to the CSS:

#leftpage{
float: left;
width: 363px;
height: 544px;
padding: 15px;
}

#rightpage{
float: right;
width: 361px;
height: 544px;
padding: 15px;
}

And that's it. Now we can add our own content in the left or right pages by writing inside either the "leftpage" div or the "rightpage" div:

Here's some more examples of what I've done with it:

Thanks for reading!!

REPTH tutorials

Make an open book with only CSS/HTML