CSS3 Lined Paper

Tabel Konten
  1. Kertas Kuning 
  2. Kertas Putih 
  • Catatan Tambahan 
  • CSS3 Paper

    Kertas Kuning 

    .paper1 {
      width:60%;
      padding:0px 20px;
      margin:10px auto 10px;
      font:normal 11px Georgia,Serif;
      line-height:30px !important;
      background-color:#F2EA7E;
      background-image:-webkit-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
      background-image:-moz-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
      background-image:-ms-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
      background-image:-o-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
      background-image:repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
      border-top:40px solid #F2EA7E;
      border-bottom:40px solid #F2EA7E;
      -webkit-box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);
      -moz-box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);
      box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);
      color:#666;
      -webkit-border-radius:7px;
      -moz-border-radius:7px;
      border-radius:7px;
    }

    Kertas Putih 

    .paper2 {
      width:60%;
      padding:0px 20px;
      margin:10px auto 10px;
      font:normal 12px Georgia,Serif;
      line-height:30px !important;
      background-color:#E9E7ED;
      background-image:-webkit-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
      background-image:-moz-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
      background-image:-ms-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
      background-image:-o-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
      background-image:repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
      border-top:40px solid #E9E7ED;
      border-bottom:40px solid #E9E7ED;
      -webkit-box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);
      -moz-box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);
      box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);
      color:#222;
      -webkit-border-radius:7px;
      -moz-border-radius:7px;
      border-radius:7px;
    }

    Lihat Demo

    Catatan Tambahan 

    Selalu pastikan bahwa setiap elemen di dalamnya memiliki tinggi, padding dan margin pada kelipatan 30 piksel. Ukuran huruf tidak terlalu berpengaruh karena line-height jauh lebih berperan terhadap posisi dan jarak tiap baris elemen. Sebagai contoh, jika Anda menerapkan elemen heading level 2, maka setidaknya aturlah ukurannya agar tetap berada pada kelipatan 30 piksel sesuai dengan tinggi masing-masing garis untuk memastikan bahwa semuanya tampak teratur:

    .paper1 h2 {
      font-size:20px;
      line-height:30px !important;
      margin:0px 0px 30px;
      padding:0px 0px;
    }

    5 Komentar

    • Putra

      pak taufik, kalo pengen buat garis merah kayak digambar ini caranya gmn?

      saya kecilkan itu gambar s500 :D

    • Taufik Nurrohman

      @Alam Perwira Gunakan CSS pseudo-element:

      .paper2 {
      padding:0px 20px;
      margin:10px 10px;
      width:auto;
      ...
      ...
      position:relative;
      padding-left:100px;
      }
      .paper2:before {
      content:"";
      width:2px;
      position:absolute;
      top:-40px;
      bottom:-40px;
      left:60px;
      background-color:#D8C4C9;
      }

      Demo: http://jsfiddle.net/tovic/HY6uC/1/

      • budkalon

        Wah! Wah! Makasih! :)

    • DISTRIK eXCe

      om kok garis-garis saat dibuka digoogle chrome nggak muncul ya?

      • Taufik Nurrohman

        Iya. Di Google Chrome gagal terlihat garis-garisnya. Dulu sudah ada yang pernah laporan juga :'(

    Komentar telah ditutup.