Pure CSS Notepaper

by Arlina Fitriyani

HTML

<script src="http://fonts.googleapis.com/css?family=UnifrakturCook:700"></script>
<article class="notepad">
    <p>To kill a mockingbird, you need only force it to read this copy. This is Meaningless filler. (Elvis movies.) It is not meant to be a forum for value judgments nor a scholarly diatribe on how virtue should be measured.</p>

    <p>Here are the vegetables required:
    <ul>
        <li>Potato</li>
        <li>Carrot</li>
        <li>Broccoli</li>
        <li>Pumpkin</li>
        <li>Squash</li>
        <li>Peas</li>
        <li>Beans</li>
        <li>Corn</li>
        <li>Cabbage</li>
    </ul></p>

    <p>The whole point here (if such a claim can be made in an admittedly pointless paragraph) is that this is dummy copy. Real bullets explode with destructive intensity. Such is not the case with dummy bullets. In fact, they don’t explode at all. </p>
</article>

CSS

body {
    background: #e6e6e6;
}
.notepad {
    background: #f6f6f6;
    box-shadow: 0 1px 4px hsla(0,0%,0%,.25);
    margin: 50px auto;
    position: relative;
    width: 492px;
    background-image: -webkit-radial-gradient(#e6e6e6 21%, transparent 21%),
                      -webkit-radial-gradient(hsla(0,0%,0%,.25) 21%, transparent 26%),
                      -webkit-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 95%,
                                                   hsla(180,25%,50%,.1) 95%, hsla(180,25%,50%,.1) 100%);
    background-image: -moz-radial-gradient(#e6e6e6 21%, transparent 21%),
                      -moz-radial-gradient(#e6e6e6 10%, transparent 12%),
                      -moz-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 95%,
                                                   hsla(180,25%,50%,.1) 95%, hsla(180,25%,50%,.1) 100%);
    background-image: radial-gradient(#e6e6e6 21%, transparent 21%),
                      radial-gradient(#e6e6e6 10%, transparent 12%), 
                      linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 95%,
                                                   hsla(180,25%,50%,.1) 95%, hsla(180,25%,50%,.1) 100%);
    background-position: 6px 6px, 6px 5px, 50% 18px;
    background-repeat: repeat-y, repeat-y, repeat;
    background-size: 48px 48px, 48px 48px, 24px 24px;
    padding: 48px 24px 24px 84px;
}
.notepad:after {
    border-left: 1px solid hsla(0,75%,50%,.2);
    border-right: 1px solid hsla(0,75%,50%,.2);
    bottom: 0;
    content: '';
    left: 58px;
    position: absolute;
    top: 0;
    width: 2px;
}
.notepad:before {
    bottom: 8px;
    border-radius: 4px;
    box-shadow: 0 10px 10px hsla(0,0%,0%,.25);
    content: '';
    height: 100px;
    max-width: 300px;
    position: absolute;
    right: 5px;
    width: 300px;
    z-index: -10; 
    -webkit-transform: rotate(2deg);    
       -moz-transform: rotate(2deg);   
        -ms-transform: rotate(2deg);   
        ...