Teochew Thunder: Web Tutorial: The Christmas Flipbook (Part 1/4)

Here's a good light-hearted web tutorial for this Christmas season!

It's a fun project I dreamed up years ago when I was working for a publications company. Basically, it's a HTML-based flipbook that can display content. Funny how working for different kinds of companies helps generate ideas, eh?

Let's kick this off with some HTML. I want to use jQuery for the project, so we will include the link. The div tags have been set to display in a red outline for visibility. The background will be a dark blue.

<!DOCTYPE html>
<html>
   <head>
       <title>Christmas Flipbook</title>

       <style>
           body
           {
               background-color: rgb(0, 0, 40);
               font-size: 12px;
               font-family: arial;
           }

            div { outline: 1px solid red; }
       </style>

       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

       <script>

       </script>
   </head>

   <body>
       <div id="container">

       </div>
   </body>
</html>

The container div has a certain width and height. It will span two pages, so if one page is 300 by 400 pixels, then the entire div will be 600 by 400 pixels. It will put in the middle of the screen via the margin property.

body
{
   background-color: rgb(0, 0, 40);
   font-size: 12px;
   font-family: arial;
}

div { outline: 1px solid red; }

#container
{
   width: 600px;
   height: 400px;
   margin: 10% auto 0 auto;
}

Here's the container.

Now we want to properly define the left and right portions which will serve as containers for the pages. Add two divs inside. Each of them will be styled using the CSS class section. Their ids are left and right respectively.

This is the styling for section. They will fit nicely within the container because widths have been set to 50% and they are floated left. We have set the outline property to a green color for visibiity. And at the same time, disable the div's red outline. We don't need it any more for now; plus it's going to interfere with the green outline.

body
{
   background-color: rgb(0, 0, 40);
   font-size: 12px;
   font-family: arial;
}

div { outline: 0px solid red; }

#container
{
   width: 600px;
   height: 400px;
   margin: 10% auto 0 auto;
}

.section
{
   width: 50%;
   height: 100%;
   outline: 1px solid green;
   float: left;
}

And here they are.

In each div, we will have three divs styled using the CSS class pageholder. They will overlap each other completely. Notice that I gave them very distinct ids. That's because we will be referencing these ids later. left_middle will lay on top of left_back and left_front will lay on top of left_middle. Same for those on the right.

This is the pageholder CSS class. It takes up full width and height of its parent. I have given it a solid blue outline. The divs float left. Also, remove the green outline from section, because we don't want it to interfere with the blue outline.

.section
{
   width: 50%;
   height: 100%;
   outline: 0px solid green;
   float: left;
}

.pageholder
{
   width: 100%;
   height: 100%;
   outline: 1px solid blue;
   float: left;
}

You can see them now! But they overflow outside of the containers.

We will need to ensure that for left_front, left_middle, right_front and right_middle, the margin-left property is set to negative 100%. This, coupled with the left-floated property of the pageholder CSS class, will cause them to overlap nicely!

.section
{
   width: 50%;
   height: 100%;
   outline: 1px solid green;
   float: left;
}

.pageholder
{
   width: 100%;
   height: 100%;
   outline: 1px solid blue;
   float: left;
}

#left_front, #right_front, #left_middle, #right_middle
{
   margin-left: -100%;
}

You can see them now! Fitting nicely into the spaces defined by section.

It's time to style pages and covers. Let's insert one div inside the left_back div. Style it using the CSS class cover.

Here is the base CSS styling for cover. We give it a height and width 100 pixels smaller than the size of its container, then give it a padding of 50 pixels to compensate.

#left_front, #right_front, #left_middle, #right_middle
{
   margin-left: -100%;
}

.cover
{
   width: 200px;
   height: 300px;
   padding: 50px;
}

But the left side and the right side will look different due to lighting and stuff. Here, for the sake of simplicity, we are going to assume that the outer and inner side of the book cover will look the same. Anyway, we specify that cover will appear this way if it is inside a div styled using left. I want cover, in this case, to have a gradient background that goes from scarlet to brown.

.cover
{
   width: 200px;
   height: 300px;
   padding: 50px;
}

#left .cover
{
   background: -moz-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: linear-gradient(to right, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
}

Looks like it works!

And just to add to the illusion of depth, I am going to give it a 3 pixel deep red lining on the top, bottom and left edges. Here, I am using the box-shadow property which is covered in more detail here at this link. (https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)

Doesn't look like much now, but it will wow you later when it's all done!

Now add a similar div in right_back.

We will style it the same way, except that the colors are reversed! And of course, the outlining.

#left .cover
{
   background: -moz-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: linear-gradient(to right, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   box-shadow: 0 3px 0 rgb(100, 0, 0) inset, 3px 0 0 rgb(100, 0, 0) inset, 0 -3px 0 rgb(100, 0, 0) inset;
}

#right .cover
{
   background: -moz-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: linear-gradient(to right, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   box-shadow: 0 3px 0 rgb(100, 0, 0) inset, -3px 0 0 rgb(100, 0, 0) inset, 0 -3px 0 rgb(100, 0, 0) inset;
}

Looks promising, doesn't it?

OK, we've done the covers. Now let's work on pages. Add these divs into left_middle and right_middle. They will be styled using the CSS class page.

This is the base styling. The height and width of this, is slightly lower than that of cover, and there's a two pixel margin at the top. This will serve to have the "page" with the "cover" showing up in the background at the edges.

.cover
{
   width: 200px;
   height: 300px;
   padding: 50px;
}

.page
{
   width: 196px;
   height: 296px;
   padding: 50px;
   margin-top: 2px;
}

#left .cover
{
   background: -moz-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: linear-gradient(to right, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   box-shadow: 0 3px 0 rgb(100, 0, 0) inset, 3px 0 0 rgb(100, 0, 0) inset, 0 -3px 0 rgb(100, 0, 0) inset;
}

#right .cover
{
   background: -moz-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: linear-gradient(to right, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   box-shadow: 0 3px 0 rgb(100, 0, 0) inset, -3px 0 0 rgb(100, 0, 0) inset, 0 -3px 0 rgb(100, 0, 0) inset;
}

And these are the specific stylings. The graduation is from dark brown, to yellow, to beige.

.cover
{
   width: 200px;
   height: 300px;
   padding: 50px;
}

.page
{
   width: 196px;
   height: 296px;
   padding: 50px;
   margin-top: 2px;
}

#left .page
{

   background: -moz-linear-gradient(left, rgb(200, 200, 150) 0%, rgb(200, 200, 150) 25%, rgb(150, 150, 50) 70%, rgb(50, 50, 10) 100%);
   background: -webkit-linear-gradient(left, rgb(200, 200, 150) 0%, rgb(200, 200, 150) 25%, rgb(150, 150, 50) 70%, rgb(50, 50, 10) 100%);
   background: linear-gradient(to right, rgb(200, 200, 150) 0%, rgb(200, 200, 150) 25%, rgb(150, 150, 50) 70%, rgb(50, 50, 10) 100%);
}

#right .page
{
   background: -moz-linear-gradient(left, rgb(50, 50, 10) 0%, rgb(150, 150, 50) 30%, rgb(200, 200, 150) 75%, rgb(200, 200, 150) 100%);
   background: -webkit-linear-gradient(left, rgb(50, 50, 10) 0%, rgb(150, 150, 50) 30%, rgb(200, 200, 150) 75%, rgb(200, 200, 150) 100%);
   background: linear-gradient(to right, rgb(50, 50, 10) 0%, rgb(150, 150, 50) 30%, rgb(200, 200, 150) 75%, rgb(200, 200, 150) 100%);
}

#left .cover
{
   background: -moz-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   background: linear-gradient(to right, rgb(150, 0, 0) 0%, rgb(50, 0, 0) 80%, rgb(30, 0, 0) 100%);
   box-shadow: 0 3px 0 rgb(100, 0, 0) inset, 3px 0 0 rgb(100, 0, 0) inset, 0 -3px 0 rgb(100, 0, 0) inset;
}

#right .cover
{
   background: -moz-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: linear-gradient(to right, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   box-shadow: 0 3px 0 rgb(100, 0, 0) inset, -3px 0 0 rgb(100, 0, 0) inset, 0 -3px 0 rgb(100, 0, 0) inset;
}

Booyah!

While we're here...

Let's add a dashboard and buttons. Set the red outline for divs back on.

div { outline: 1px solid red; }

Add a div below container. Give it the id dashboard.

The styling for dashboard is as follows. It is similar to container, but with a very low height.

#container
{
   width: 600px;
   height: 400px;
   margin: 10% auto 0 auto;
}

#dashboard
{
   width: 600px;
   height: 100px;
   margin: 5% auto 0 auto;
   text-align: center;
}

.section
{
   width: 50%;
   height: 100%;
   outline: 0px solid green;
   float: left;
}

This is where the buttons will go.

Now add buttons here.

The styling for the buttons are here. These are purely aesthetic. I've made them square, and added stylings for hover and disabled.

#dashboard
{
   width: 600px;
   height: 100px;
   margin: 5% auto 0 auto;
   text-align: center;
}

button
{
   width: 50px;
   height: 50px;
   border-radius: 10px;
   border: 3px solid rgb(100, 50, 0);
   background-color: rgb(255, 200, 0);
   color: rgb(100, 50, 0);
}

button:hover
{
   border: 3px solid rgb(255, 200, 0);
   background-color: rgb(100, 50, 0);
   color: rgb(255, 200, 0);
}

button:disabled
{
   border: 3px solid rgb(50, 0, 0);
   background-color: rgb(100, 50, 0);
   color: rgb(50, 0, 0);
}

.section
{
   width: 50%;
   height: 100%;
   outline: 0px solid green;
   float: left;
}

Turn the red outline off, probably for good this time.

div { outline: 0px solid red; }

Here be buttons!

We will work with HTML content in the pages.

Teochew Thunder

Pages

Friday 16 December 2022

Web Tutorial: The Christmas Flipbook (Part 1/4)

While we're here...

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews