Metode Membuat Pure CSS Notepaper

Metode Membuat Pure CSS Notepaper - Ya benar Metode Membuat Pure CSS Notepaper. Apakah anda tau apa itu notepaper?. Jika belum mengerti apa itu notepaper? silahkan cari di Google. Jika sudah mengerti maka lanjutkan saja membacanya. Berbeda dengan notepaper yang anda punya di rumah. Bedanya notepaper kali ini bisa di terapkan di blog / website milik sendiri. Metode ini saya ditemukan blog yang masih baru. Milik Mbak Arlina. Silahkan terapkan langkah - langkah berikut.


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

Demo

View me

Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell