Notebook Paper CSS
Final Look:
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/
Written by Zach Reed
Related protips
5 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#