Pure CSS Notepaper

11/16/2014




.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;
}


Artikel Terkait

Next Article
« Prev Post
First
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

6 comments

Wah cakep banget dah efek efek nya, ane coba semuanya aja dahhh

Balas

lmyn mas, biar lebih bervariasi

Balas

serasa kaya mau nulis di kertas mba :D

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.