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;
}
Here’s a demo of the completed theme:
Good job, Allen. Keep up with the good work!
This is exactly the kind of thing I envisioned in 1998 before I started designing websites. Then, I realized how difficult it would be.
Thanks for making it look easy!
In this case, text-indent is bad solution. In long, multiline row text will glue to red lines. Padding on left with summ of left margin and padding will fix it.
14 years old? I thought I was the only one!
Me too!
Same ‘ere
Someone should make a website for young teens interested in web development to collaborate on random things :)
so im not the only one?
15 here!
So I’m definitely not the only one.
There are many of us!
Wow! And I thought I was the only CSS developer my age. @kevin: agreed
I got started myself in front in design/ development when I was around 15 too, I’ve been doing it believe it or not for 10+ years now! Glad to hear young people are getting very involved still in front end development. You can make lots of $ as a front-end developer, and plus, its fun! Good luck to all of you in the field.
Try and to not add Sentence case letters to classes and id makes it easier to work on linux servers :D
btw I’m 15 so we should really start that Blog. I might after I finish some client work soon
Yea im 17 and have been doing web development for 5 years now. If someone wants to start that blog I’ll definitely collaborate on that. I’ve created my own blog before but I hated the design, so I’d like to be part of something bigger.
@Ryan: It’s on! I’ll post it as soon as I’m done.
It’s great to see so many people my age doing what I’m interested in. If anyone’s interested, my site’s alexforey.com, which I wrote myself from scratch.
Anyway, just like to say thanks a lot, this kind of content is really important on the web today, and big thanks to CSS-Tricks for letting it happen.
@Ian: Alright let me know what you got. I’m also working on a version as well with some friends of mine. We’ll see who wins ;)
Does anyone know if that blog was actually made? :)
I am only 13, but I started when I was 9.
Very nice tutorial Allen, thank you for this.
@Miles, I know exactly what you mean…I wanted the same thing.
Wow, I was definitely not this good three years ago! Haha.
Props to you, Mr. Allen.
One idea I had was to write
.list::beforeinstead of.lines. That way we don’t need to add an extra element in there. Just add one more parameter ofcontent:'';to the css and you’re golden.Then you can set .list to position:relative, and :before to height:100%; and you now don’t have to worry about changing the height of .lines each time a list item is added or subtracted.
And, I’m only 16, and I thought I was the only one. . .
A very good article and I love the result. I would like to actually say thanks to Chris here.. I started Web Dev pretty early and I think the only blog that I remember visiting a lot was Eric Meyer’s, so it is great to see everything you do here is not only helping other young developers (well, I am 18 now so not quite so young any more!) but also giving them a chance to post an article here.
I can see a few different ways of doing this, what would you say is the better way?
One suggestion I would make is for the red lines, a 4px double would probably do pretty well.
I thought I’d take a crack at some updates myself =)
http://jsfiddle.net/chriscoyier/KVjFQ/42/
Differences:
I could see a fun developer-y extension of this being adding contenteditable attribute to list items and saving out the changes to a DB.
Thanks again Allen!
Would be kind of cool if there was an easy way to make all the list points have a ‘title’ attribute of their content so hovering over the points which are too long would reveal their full content.
Extra update: use `border-left: 4px double #ffaa9f;` instead of the two separate borders. You don’t need the width property with that either.
BH
Instead of text-indent, which is only applied to the first line, you should probably use padding-left to push the text, regardless of the length, past your red lines.
The possibility of a multiple line li also means you should rethink the lines being created by the border. One solution (using CSS3) might be to use background linear gradients, keyed to your line height.
Come to think of it, you might be able to make those red lines using the same technique applied to the ul and get rid of the .lines div entirely.
What do you think?
Thanks everybody for the comments I hope to get better in the future and this was just a little side project.
@Chris –
I really appreciate you featuring me on your website; really means a lot!
@Chris Coyier
You can remove the pseudo element and replace it with a gradient-background on the .list block :
background:linear-gradient(left, #f5f5f5 0%, #f5f5f5 24px, #ffaa9f 25px, #f5f5f5 26px,#f5f5f5 27px, #ffaa9f 28px,#f5f5f5 29px, #f5f5f5 100%) ;
linear-gradient may need prefix for your browser.
Would it be possible to add in ticks/crosses/ some kind of way of making it look like a checklist that is half completed?
… as a background-image on the li
I like it.
One way to make the red lines happen more automatically would be to use an data URI in the css. The image needed is so small that I think it suits this case well, though I suppose it’s technically not “pure” css since you can’t really edit it without using a special tool.
If you just plugged this straight into the demo you’ll get some weird effects on hover due to the transitions being set to ‘all’, also the image doesn’t quite line up on hover – All easily remedied though.
equivalent width in .list:before ;) qiqiqiqi…
ty ☻
Damn, 14 years old and already has better design than me, now I’m depressed.
It seems as though you might be able to accomplish the two left borders (the outer note border & the double red lines) by utilizing the
outlineattribute (which i believe is CSS3).This would allow the red lines to grow with the container as well as removing the need for the empty
div.I’m by no means a designer, and i have no idea what the support for
outlinelooks like among today’s browsers. These guys know more about it than i do!Allen, I wanted to check out your site but I’m getting a (nicely done) 404 page for everything other than home.
I am very sorry about that and I know it looks bad! You see, I just launched on the 2nd of this month and I’ve been so wrapped up in things that I haven’t been able to write all of those articles. On top of that I am re-designing http://allenlawson.net so when the look changes the articles will be written, up and working.
Thanks so much.
Site looks great.
Am curious to read a couple of your articles. Particularly the one regarding your choice to not use WordPress.
Do you have an estimated date of re-launch?
Same here, I would love to read your articles! Hope you can get your site up soon, Allen.
Taking it a little further… http://dabblet.com/gist/1896726
Thanks for the best article….This is awesome…
found I had to change ul id=List to ul class=list to make it work
Al
Great article, although there is a bug in the HTML code. Too bad that Allen’s site is broken, would have loved to read some of his articles.
wow chris nice timing i did this bullet.planimus.com like 2 days ago!! :( and it gave me hell to make
Always wonderful to see CSS where an image would have been used in the past.
This thingy is flawed… what happen if the text doesnt fit in one line… the container stretched which cant be in original notebook :)…You have to make it such way so that if the text overflows it should be in the new line and the list below should go down to next line.
Great tutorial!
I’m a 16-year-old web developer/designer myself and and hoping to maybe be featured on this blog sometime in the future (I’ll write an article or two and email them to Chris to see what he thinks).
I’d tend to agree with most of the points made about stopping the list from being a fixed width and for changing the .lines div into a pseudo element – but otherwise, good job!
Cool, thanks for it!
your blog is really loading on stunning speed . above css trick effective is is looks very beatiful . its looks good in personal blogs i think
I don’t know about anybody else, but I was disappointed when I couldn’t click and edit the list. This idea is screaming out for “content editable” and a nifty HTML5 storage solution to save what the user changes.
I know that wasn’t the original idea, it’s just what springs to mind, it’s what my sub-conscious was expecting.
Originally in my design I did add content editable. I took it ou to. Last minute before I sent the file over to Chris because I really didn care for it. My whole idea was to make a notebook themed list I wasn’t focused on functionality. But yes this projects screams HTML5 and CSS3
Well done Allen. I started web development when I was 15, but was no way near this good at that age. Nice!
Really great to see that the young web community has also started contributing. Though I am 18 as of now, but I never even thought of making something like this so far.
Hats off to your kiddo :)
Perfect, just what I was after !
Just done a little tuning to your code :)
Added CSS:
.choose { float: right;
position: relative;}
.checkbox {
content: “”;
width: 0.55em;
height: 1em;
top: 50%;
left: auto;
-webkit-transform: rotate(45deg) skew(5deg);
-webkit-transform-origin: 50% 50%;
-moz-transform: rotate(45deg) skew(5deg);
-moz-transform-origin: 50% 50%;
-o-transform:rotate(45deg) skew(5deg);
-o-transform-origin:50% 50%;
-ms-transform: rotate(45deg) skew(5deg);
-ms-transform-origin: 50% 50%;
right: 1.1em;
border: .35em solid;
border-top: none;
border-left: none;
margin-top: -0.35em;
margin-right: 0.5em;
border-color: #DDD;
}
.checked { border-color: #06AB06;}
.strikeout { text-decoration: line-through;}
Added HTML: add <div class=”choose”>
<div name=”option” value=”done” class=”checkbox”></div>
</div> inside each <li>
Added JS (jQuery)
$(“.list”).find(“.checkbox”).each(function(i, el) {
$(this).click(function(){
$(this).toggleClass(‘checked’);
$(this).parent().parent().toggleClass(‘strikeout’);
});
});
Try it :) nice workout Allen :D
Impressive work for a “youngster”! Or “oldster” for that matter.
You don’t need to avoid padding, just use background-origin to properly position the background relative to the content box.
I made a similar demo 2 months ago: http://dabblet.com/gist/1560717
I made a similar looking page for my Apache directory indexes using css gradients & multiple background images:
CSS Demos
Nice work Allen. Congratulations and keep going!
There is a much better way of doing this, that doesn’t require changing the height, and doesn’t require a dummy div.
ul{list-style:none;padding:0;background:#ffe;box-shadow:0 0 7px #000}
li{height:36px;border-bottom:solid 1px #bba}
li:before{content:””;border-right:2px solid #ffaa9f;width:60px;float:left;height:100%;margin-right:10px}
Try it on any list =)
Great tutorial! I can’t wait to play with this idea…
Hi Allen I’m not going to comment on possible improvements you could make etc on this great post you’ve put together, what I’d like to express to you is that you are 14 years old, at a real breakthrough moment in web technology. You have a clear passion for this, and at 14 you are developing, thinking and working out problems with this technology. Sieze this opportunity, continue to do this work and you will absolutely succeed. In four years you will be 18, if you are doing this now at 14 and continue to build and develop you will be a serious expert by that time, a real expert.
Well done, so good to see the web community rightly encouraging you.
PS: you should read the book ‘outliers’ and the 10,000 hour rule especially, your generation has an amazing future the timing is amazing for you.
Comments like this keep me going (; definitely made my day.
To think that 14 years ago I created my first website. Great to see inspiring young minds. Keep up the great work.
A very good idea to apply list as a lines. Although I would prefer to use gradients as a paper line. But, using list as a helper element will give us a new idea: Hey, we can use this as sort of a small menu if you insert anchor tag in it :)
PS: Umm.. I think you mean
<ul class="list">instead of<ul id="list">Hey Allen, I am so excited and surprises. when I was 14 years old, I was not as good as like you. You will be an expert and will have expertise to make differences on web technology in the future. keep going to make a wonderful work. in 4 years later, you will be an extremely expert developers. Good job
:)
Great trick man, very nice effect!
-Chris
Your solution isn’t the best one in my opinion – first of all it seems to be a bit broken in FF10 as the “lines” div is shorter than the list itself. Why not just put the gray outline on the element, assign it a left padding of 40px and give elements a left “double” red border? This way you don’t even need the .lines element. Oh and the text-indent also seems to not work quite as expected if the text is split into multiple lines, maybe using padding would be prefered?
I like how simple the design looks…
I tried testing this on google chrome, will this be compatible with IE6??
ie6? wow really?
Pretty cool, A classic theme in a modern device looks great.
I’ll never have enough time to dev this kind of things, even if I’m thinking about.
Thanks to demography (among other things) for young folks who have time AND imagination enough for doing so.
Cool post. Yep.
For the record: At 14 years old I was painting.
Computers was for SciFi movies.
http://kougiland.com/css3-notebook.html
Coming this from a 14 year old is quite enticing. Not only the result is great but the CSS is optimized too. Great going Allen!
Wow… 14 years old? I was started in web development at 16 years old. Great job Allen!
Your Awesome
Hi Allen,
I am not getting the line, its displaying just list of text with red margin. your code is not look like the above pix………..
Nice article. This is what i was looking around. Thanks a lot.
I personally would have used a list position of ‘outside’ so the text wrap has the same left alignment. Otherwise, a neat effect Chris!
Best,
Dan DiGangi
@ddigangi
Hello friends,
My Requirement is, i have to enter the text in text area box, but it should look like a page in the note book………… can you people help me for this Requirement ?
The lines could also be done with ::after to avoid the extra DIV:
http://jsfiddle.net/codepo8/KVjFQ/1953/
I learned that from an awesome speaker at Converge SE
Is there any other young (14 yrs old) web developers out there from the UK? I am fluent in CSS/HTML/JS(inc jQuery)/PHP, if you have similar talents then add me on Twitter (@tompntn) and we can help and discuss each others work etc… Know it’s a long shot but worth a try :)
im 13 i know: html5, css3, javascript, jquery, and asp.net i live in germany im american i am making a website where young teens can learn web development and more i have two employees who are also 13 wanna the join the codin team?
@Tom Pointon that means you xD