CSS Notepad Paper

  • follow us in feedly
Published June 17, 2013 by Brad Knutson
CSS Notepad Paper

I’ve been on a bit of a CSS kick lately, and been looking at a lot of “CSS only” examples. There is so much that you can accomplish with CSS.

With the rise of mobile users, and the ever increasing screen resolution, making web pages that are built for higher resolution devices is becoming more and more important. Have you ever viewed an image-intensive website on a “retina” screen? It’s remarkable how much desktop and laptop screens leave to be desired. I actually find it distracting. So web developers are left with a choice – double the resolution of the image, or find another way to display their content.

Page load times are becoming every important for SEO ranking factors, as as confirmed by Matt Cutts, so lately developers have been avoiding doubling the size of their images so they look pretty on mobile devices.

I was considering this conundrum and thought of a very simple example – a piece of notepad paper. Normally, you could get a really cool high resolution image of a page and use it as a background image, but we can actually accomplish the same thing (to a point) with CSS!

Say hello to my beautiful CSS notepad paper!

CSS Notepad Paper Example

View Demo

Note: The page lines only appear in Firefox, Chrome and Safari, but the rest of the page displays in all modern browsers.

HTML

The HTML required for this is really simple, nothing special.

<body>
<div class="notepad">
            <!-- Content goes here -->
        </div>
    </body>

CSS

CSS is where we will do the heavy lifting to create this effect.

html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
    background-image: url('path/to/background.jpg');
}
.notepad {
    font-family: 'Handlee', cursive;
    padding: 50px 40px;
    margin: 50px auto;
    width: 900px;
    height: 1200px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    background: #fcf59b;
	background:
		-webkit-gradient(
			linear,
			left top, left bottom,
			from(#81cbbc),
			color-stop(2%, #fcf59b)
		);
	background:
		-moz-repeating-linear-gradient(
			top,
			#fcf59b,
			#fcf59b 38px,
			#81cbbc 40px
		);
	background:
		repeating-linear-gradient(
			top,
			#fcf59b,
			#fcf59b 38px,
			#81cbbc 40px
		);		
	-webkit-background-size: 100% 40px;
}
p {
    font-size: 28px;
    line-height: 41px;
}

See that? No images (unless you want a background image for the entire page – but that could be a color or gradient as well).

This means that not only does this page look great, but it also loads incredibly fast.

Really the only tricky part of the CSS is using transform: rotate(-4deg); to rotate the page, and gradients to create the blue lines on the paper.

You could go even farther by creating folded or rolled up page corners, or put a coffee stain background image on the page. It’s important to get creative with it!

Let me know your thoughts by leaving a comment below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

4 thoughts on “CSS Notepad Paper

  1. Sammy

    Really great post! It works perfectly in mozilla. But not in IE and for webkit based browsers like Android’s and even my opera. Could you help please?

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">