Create a Pure CSS Notepaper

Now we will try to load the page with css for notepaper, here is the script :

.notepad {
    background: #f6f6f6;
    box-shadow: 0 1px 4px hsla(0,0%,0%,.25);
    margin: 50px auto;
    position: relative;
    width: 492px;
    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;
    transform: rotate(2deg);
}

p {
    color: #333;
    font: 16px/24px serif;
    margin-bottom: 24px;
}

p:first-child:first-line {
    font-variant: small-caps;
}

p:first-child:first-letter {
    color: #444;
    float: left;
    font: bold 48px/48px UnifrakturCook, Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    padding-right: 12px;
}

ul {
    color: #333;
    font: italic 16px/24px serif;
    line-height: 24px;
    column-count: 2;
}

For example the results can be seen in this : Result

Share this with short URL: Get Short URL

Share this