Design

Create a notebook like layout using CSS3 alone

May 22, 2012 by Sreejesh KV in Design, Development with 18 Comments

Using CSS3 gradients instead of images to create backgrounds is a cool technique which offers a lot of flexibility in the design process. If we use images as backgrounds, every time we need a slight update in the background, say, making it a little more lighter in color, we need to take the image file , edit it in photoshop and then replace it. But with the emrgence of this technique, all that we have to do is just edit a few lines in the stylesheet. Pretty time-saving. Isn’t it?

In this tutorial, we will be creating an old note book design by just using CSS alone. No images has been used anywhere in this example.

Final Result

Here is how the output will look like.

HTML

<div
class="note">
<p>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Donec quis sem
nec eros viverra ultrices. Suspendisse rutrum dapibus enim, a
lacinia enim malesuada in. <br /> Quisque
sollicitudin, justo at facilisis semper, enim urna ornare dui,
non adipiscing risus ligula ac mauris. Aliquam convallis dapibus
orci a luctus. Cras consequat, massa blandit faucibus sagittis,
diam erat tristique sapien, a aliquet nisi sem sit amet mauris.
Donec euismod facilisis mollis. Phasellus malesuada arcu sed urna
egestas eget lacinia massa pellentesque. Nam scelerisque molestie
fermentum. Nullam sodales iaculis erat, sed venenatis mauris
commodo vel.
</p>

<p>
Praesent
tempor diam eget dui ultricies lobortis. Suspendisse leo leo,
congue sit amet imperdiet vitae, suscipit ac tellus. Nullam
mollis, elit nec laoreet pharetra, urna diam feugiat nisl, a
ultricies diam nisi sit amet erat. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
id justo eget mauris vulputate eleifend id non quam. Vivamus nisi
nisi, pulvinar ultrices consectetur a, tincidunt nec nisl.
Vivamus eu turpis augue. Fusce sit amet eros non odio consectetur
semper. Phasellus nisl odio, vestibulum pellentesque accumsan
non, facilisis id quam. Mauris ac tellus quis ligula mollis
consectetur vel quis lectus. Suspendisse vestibulum lacinia
tortor, a porttitor turpis blandit non. Vestibulum egestas, massa
in ultricies mollis, enim purus condimentum orci, eu volutpat
ante erat placerat augue. Sed eleifend purus quis metus euismod
eu dapibus metus luctus. Suspendisse suscipit hendrerit odio, non
mollis diam auctor non.

</p>
</div>

CSS

div.note{
width:450px;
padding:2px 15px 15px
60px;
margin:5px;
overflow:hidden;
line-height:20px;
font-size:12px;
color:#2061AF;
text-align:justify;
border:1px
solid #DDD;
box-shadow:3px 3px 5px #ccc;
text-shadow:0 0
3px #8FC2FF;
background:linear-gradient(left, #c42830 0px,
transparent 1px,transparent 3px,#c42830 3px, transparent 4px)
50px 0 repeat-y,
linear-gradient(top, transparent 19px,#2374AC
20px,transparent 20px),
linear-gradient(top, #fff 5px, #fff8e0
20px);
background-size: 100px 20px;
}

div.note
p{
margin:20px 0;
}

Code Explanation

We will use three separate gradients in this example to generate the basic notebook page design.

The first one is used for drawing to closely spaced vertical lines which we will use as the left margin of the notebook.
We will position this gradient 50px from the left side of the page and repeat it over the y-axis so that it covers the entire page-height.

Here is the CSS code to generate this gradient

-moz-linear-gradient(left, #c42830 0px, transparent 1px,transparent 3px,#c42830 3px, transparent 4px) 50px 0 repeat-y

The second gradient is used for drawing the horizontal lines within which is the text content of the page will be enclosed. This is just a single horizontal line which is repeated in both directions.

Here is the gradient-image code

linear-gradient(top, transparent 19px,#2374AC 20px,transparent 20px)

We will set the background-size property to

background-size: 100px 20px;

This will give us a vertical space of 20px between two horizontal lines.

Lastly, the third gradient is used to give an old touch to the paper. You can avoid this step if you think this is unnecessary.

linear-gradient(top, #fff 5px, #fff8e0 20px)

Now we, have to ensure that the text contents of the div will appear only at the desired place.
So we set line-height as 20px and give the div a left-padding. We also need to adjust the paragraph top margin as a multiple of the line-height.

So that is it. You have created an awesome Old notebook design just by using a few lines of css.

Demo

You can view a live demo of this snippet Here

(NB: This example will work on modern browsers only.)

Tagged css gradients, css tutorials, css3, old notebook

Sharing

CSS speech bubbles

18 Comments

Cathy KerrMay 24, 2012 at 8:27 pmReply

Sreejesh, I have used HTML a little but CSS never!

Tell me, can you give me simple codes that I can make it on HTML too?? Why I am not copying the code you have given? the reason is since I am not comfortable with the language, I am not sure whether it will be wise for me to use it..
Cathy Kerr recently posted..insurance marmalade
DynnaLouMay 30, 2012 at 11:58 amReply

This is definitely a great help and I think every businessman should be aware with this kind of post.. Thanks!
DynnaLou recently posted..Joe Barrys Panic Away Review
Sean ColferJune 27, 2012 at 7:06 amReply

Thanks a lot for sharing. I was actually looking for such code for I want to include a page like that on my blog.
Sean Colfer recently posted..http://kimkardashiantapenews.com/kim-kardashian-enjoys-being-with-older-man/
n42kJuly 6, 2012 at 7:23 pmReply

Woah, this looks impossible to do with CSS3. Thank you for this tutorial, I loved it! The best part is that I don’t need any images so it loads very, very fast. I’m still amazed by how this was done and will have to go through the code some more times, however, I’m sure I’ll understand it after a while. I would appreciate if you could post some more CSS3 tutorials like this!
BreakfreeJuly 13, 2012 at 10:22 pmReply

I have come across lots of websites with this kind of layout and always wondered how to put it on mine, but on tutorials it seemed rather difficult or not what I was exactly looking for. Thanks for displaying this useful information on how to create this amazing layout. What is more it seems very simple.
DesireeJuly 17, 2012 at 3:01 amReply

WOW, now this is really cool! It never occurred to me I can produce the good ol’ fashioned paper effect without an image!

I still have a lot to learn about CSS3 and HTML5, their possibilities are endless.

Thank you for the great tutorial, I’ll surely use it in one of my next projects.
ollierexxJuly 18, 2012 at 7:40 amReply

Wow, how is that even possible ? I saw a guy who made one like that in CSS (like the notebook app on Iphones)
http://puu.sh/Jo97
Could we just modify the colors and add a background to get a similar effect?
FlipKupJuly 22, 2012 at 11:47 amReply

That was so easy and well-written. I do not even have to grab my own images to make this possible! Thank you for the great tut, Ill be sure to try this out on my own blog sometimes in the future, a very nice notebook-feel will go well with my posts!
BloomaticAugust 1, 2012 at 8:01 amReply

Thank you for sharing this code. I haven´t thought yet where I can use, but that style reminds me of the old pieces of paper from school. Maybe I can use it in any project with my students or in a work with similar characteristics. I’ll try to practice it, I think it´s a fun design.
ohiotom76August 14, 2012 at 3:40 amReply

Very creative use of CSS, I suppose you could even take it a step further and look for a hand written style font on Google web fonts to really make it look organic. Or for a real challenge, it might even be possible to pull off graph paper.
antistarSeptember 3, 2012 at 7:53 amReply

Really easy-to-use tutorial and really cool outcome too. Thanks so much for sharing! I’ll be trying out this lined paper CSS template for myself soon.
cheaSeptember 10, 2012 at 11:02 amReply

Hmm… Yeah, I don’t know how many times I had to edit images in Photoshop when I wanted to tweak the design of my sites. Between that and adding content, I was in over my head most days. This is a good idea. It seems to me that using this idea might also speed up page loading, as there won’t be as many images to load.
MatieSeptember 11, 2012 at 10:10 amReply

Simply amazing, thank you for sharing. It saves you time and kilobytes, especially if you are designing a blog template.

I find that CSS3 is the most practical version to date, it simplifies things that you don’t necessarilly have to be an specialist to set up a great website.
PaladinOctober 3, 2012 at 5:38 amReply

I have come across lots of websites with this kind of layout and always wondered how to put it on mine, but on tutorials it seemed rather difficult or not what I was exactly looking for. Thanks for displaying this useful information on how to create this amazing layout. What is more it seems very simple.
Paladin recently posted..Donator Usergroup Added!
BrianDouglasOctober 25, 2012 at 6:10 pmReply

THIS is incredible. I haven’t looked much at all at the new features of CSS3 yet because I haven’t *had* to. However, I see now that I should, and really must. This is awesome.
BrianDouglas recently posted..3 Adsense Revenue Sharing Sites
McColloughNovember 6, 2012 at 9:18 amReply

OK, this is really neat! Thank you for sharing. I’m an entry level coder myself, and even I found this easy enough to follow. I guess, now I’m going to have to stop using the excuse: “CSS3 is too hard.”
majikstoneNovember 9, 2012 at 6:09 amReply

Your result is not bad, but I like this one better: http://cssdeck.com/labs/css3-notebook-paper. The only application I could think of for this is an online diary application.
Karen May JonesNovember 29, 2012 at 7:17 amReply

This is really cute. However, you say it isn’t supported in older browsers. I would not want to use a code that isn’t displayed in older browsers. So, for this simple effect, if I have a need for notebook background, I will stick to using an image for now.

I will give you an A for effort as this code seems to have made a lot of people happy. Also, I learned about the Yaxis today, so I’m happy about that. I’m a css noob, but I have worked with it in my HTML program’s style sheet creation function.

Thanks!