CSS3 Lined 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;
}
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:
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 :'(