Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 5 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE 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.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* 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

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!