fw_b4q
Last Updated: July 27, 2016
·
8.767K
· bluetidepro
6028b1c54dac0d98767d9efcb3d643b9

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/

Say Thanks
Respond

5 Responses
Add your response

57
Avatar

Looks cool, good job,

over 1 year ago ·
73

Nice! Would be great for a feed UI :D

over 1 year ago ·
96
6028b1c54dac0d98767d9efcb3d643b9

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

over 1 year ago ·
4569
Feb007acc38e70d57f7b4c205f7e8b26

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

Also, I love it!

over 1 year ago ·
14462
50a08426562bd36dfc68d0c54907468d

sweet

over 1 year ago ·