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 the
border-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;
}
liver Demo : http://jsfiddle.net/chriscoyier/KVjFQ/1/
No comments:
Post a Comment