Thursday, 8 March 2012

How To Create a Notebook Design with CSS


How To Create a Notebook Design with CSS

This tutorial will show you how to create a notebook themed website using only CSS.


First, we will start out by creating a basic wrapper by specifying that the body tag should have the following CSS properties:
body {
  background-color: #f5f5f5;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}
Next, we are going to make an unordered list, I'll call mine list:
.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 500px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}
The reason why its important to add padding:0; is because later on in the tutorial when we add the red notebook lines things will get messed up. Width can be specified to whatever you want; I just did 600px because it fits the best. Another key property here is the border. This keeps it looking nice and clean.
Next we style the li's:
.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
}
This is pretty much self-explanatory. Just make sure you add theborder-bottom: 1px dotted #ccc;. This, to me, is what really gives it the whole “notebook paper” theme.
If you want, you can use the pseudo class :hover on li to make it look even cleaner. Who doesn’t appreciate a nice hover affect?
.list li:hover {
  background-color: #f0f0f0;
  -webkit-transition: all 0.2s;
  -moz-transition:    all 0.2s;
  -ms-transition:     all 0.2s;
  -o-transition:      all 0.2s;
}
Here is our HTML so far:
<!DOCTYPE HTML>
<html> 

<head>
   <meta charset="UTF-8">
   <title>CSS Theme: Notepad</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>

  <h4>Notes</h4>

  <ul id="List">
    <li>Eat Breakfeast</li>
    <li>Feed Pugsly, the cow</li>
    <li>Sit Down</li>
    <li>Eat lunch</li>
    <li>Call mom</li>
    <li>Tweet about feeding my cow, pugsly</li>
    <li>Join a hangout in google+</li>
    <li>Prepare Dinner</li>
    <li>Eat Dinner</li>
    <li>Get ready for bed</li>
    <li>Go to bed</li>
  </ul>

</body>

</html>
Lastly, we will add the vertical red lines:
.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: 40px;
}​
This is probably the best-looking thing about this tutorial, but it’s the thing I hate the most just because there was no way for me to make it to where if you added a new list item that it re-sized on its own. So every time you add a new li you have to add to the height of the red lines – which is a big pain in the butt. Other than that just make sure that you specify a width of 2px or else it will be one line.
One last thing, you must add text-indent of 25px the list-items so that the text does not render right next to the red lines.
Once you are ready to add the red lines, insert this code before the <ul>.
<div class="lines"></div>
Your final CSS will look like this:
body {
  background-color: #f5f5f5;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}
h4 {
  color: #cd0000;
  font-size: 42px;
  letter-spacing: -2px;
  text-align: left;
}
.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 500px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}
.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
}
.list li:hover {
  background-color: #f0f0f0;
  -webkit-transition: all 0.2s;
  -moz-transition:    all 0.2s;
  -ms-transition:     all 0.2s;
  -o-transition:      all 0.2s;
}
.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: 40px;
}