Last Updated: May 15, 2019
·
17.88K
· bluetidepro

Notebook Paper CSS

Final Look:

Picture

HTML:

<div id="instructions" class="paper">test</div>​

CSS:

#instructions {font: 16px 'AmericanTypewriter', Cambria, Georgia; color: #282625; margin: 0 auto; width: 600px;}
.paper {
    padding: 37px 55px 27px;
    position: relative;
    border: 1px solid #B5B5B5;
    background: white;
    background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    -webkit-background-size: 100% 30px;
    -moz-background-size: 100% 30px;
    -ms-background-size: 100% 30px;
    background-size: 100% 30px;
}
.paper::before {content:""; z-index:-1; margin:0 1px; width:706px; height:10px; position:absolute; bottom:-3px; left:0; background:white; border:1px solid #B5B5B5;}
.paper::after {content:''; position:absolute; width:0px; top:0; left:39px; bottom:0; border-left:1px solid #F8D3D3;}

Working Demo: http://jsfiddle.net/bluetidepro/3Rdqy/

5 Responses
Add your response

Looks cool, good job,

over 1 year ago ·

Nice! Would be great for a feed UI :D

over 1 year ago ·

@aeonslab Yeah, or a "to-do" web app or something! :)

over 1 year ago ·

This version places text on the lines when multiple lines exits: http://jsfiddle.net/e4AcL/

Also, I love it!

over 1 year ago ·

sweet

over 1 year ago ·