CSS3 Lined Paper

Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Donasi

Pertimbangkan untuk memberikan donasi melalui PayPal jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat. Terima kasih.

CSS3 Lined Paper

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



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


 

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

5 Komentar:

pak taufik, kalo pengen buat garis merah kayak digambar ini caranya gmn?
http://3.bp.blogspot.com/_xpQK9GsnDPs/TPm5a8bYuBI/AAAAAAAABqk/6NWDn79eA5c/s500/middle.png
saya kecilkan itu gambar s500 :D
@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/
@Balasan Wah! Wah! Makasih! :)
om kok garis-garis saat dibuka digoogle chrome nggak muncul ya?
@Balasan Iya. Di Google Chrome gagal terlihat garis-garisnya. Dulu sudah ada yang pernah laporan juga :'(

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Klik untuk melihat kode: :) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

GitHubblooferscss-decksxcSOColour LoversJSFiddleCSS-Tricks
Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!