Membuat Kertas bergaris dengan CSS

Mungkin ini hanyalah salah satu keisengan saya belaka, tidak perlu dihiraukan. Kebetulan saya sedang berbenah blog, karena sudah lama sekali tidak saya urus, sehingga banyak laba-labanya 😆.

Ceritanya pada saat saya memperbaiki template karena saya ganti template (dah bosan), ada beberapa tampilan blog saya yang rusak, dan akhirnya saya terpaksa mengutak-atik lagi. Pas ketemulah postingan saya tentang notasi saron wayangan. Disana terdapat wadah notasi yang saya custom CSS-nya agar nampak beda dengan kalimat lainnya. Maksutnya biar mudah dibaca saja.

Dari memperbaiki postingan itu terbesit diotak saya, "kenapa gak dibuat model kertas bergaris, ya?". Maka dari situlah saya mulai bereksperimen, hingga tampilannya seperti sekarang. Silakan dicicipi link nya: Notasi Saron Wayang

Namun untuk kali ini, saya akan sedikit berkreasi disana, akan saya buat semirip mungkin dengan sticky note yang biasanya ada di meja belajar, atau di pintu lemari es 😁. Sehingga penampakannya nanti jadi seperti ini.

kertas bergaris dengan css

Yah, kira-kira seperti di atas, lah.. Gimana? Mau mencoba??!! Yuk ikuti cara membuatnya, tentu saja dengan versi saya 😁

Cara membuat kertas bergaris dengan CSS

1. Silakan buat rumahnya alias HTML-nya, copy paste kode berikut! (kalau saya, karena ini adalah untuk postingan, maka saya taruh dipostingan saya, dengan mode "edit HTML".

<div class="kertas">
  <h2>Notation Gamelan - Java Music Tradition</h2>
    <p>Gamelan is an amazing original musical art originating from Java, Indonesia. While other nations make musical instruments from wood, Java makes musical instruments from iron. Gamelan has developed in the royal period in the 8th to 11th centuries AD. Gamelan music is one of the original Indonesian cultures that you can find in Java and Bali. The following is an excerpt from Javanese gamelan notation.<br/>Visit here for information: <a href="https://id.wikipedia.org/wiki/Gamelan" target="_blank">Gamelan - Wikipedia.org</a></p>
</div>

2. Untuk CSS bisa Anda buat inline, atau bisa juga buat style di edit HTML, terserah, dah. Kodenya adalah seperti berikut.

.kertas {
  position:relative;
  font-family: 'Chilanka', cursive;
  width: auto;
  max-width: 700px;
  display: inline-block;
  vertical-align: top;
  background: #fff7d9;
  background-image: repeating-linear-gradient(
    rgba(150, 36, 40, .5),
    #ffffed 1px,
    #ffffed 30px
  );
  padding: 0px 40px 20px 55px;
  border: 1px solid #ddd;
  border-bottom-left-radius: 20px 200px;
  border-bottom-right-radius: 200px 20px;
  box-shadow: 1px 6px 7px 1px #ddd;
  transform: rotate(-.5deg);
}
.kertas::before{
  content:"";
  background-color:rgba(150, 36, 40,.2);
  position:absolute;
  width:1px;
  height:100%;
  left:40px
}
h2 {
  line-height: 1.3em;
  margin-bottom: 0px;
  padding: 10px 0;
  font-size:1.7em;display:block;
}
p{text-indent:40px;
  line-height: 1.7em;font-size:1.1em}

3. Selesai

Berikut ini adalah contoh hasilnya: Sticky Note with CSS

Mungkin hanya itu yang bisa saya share-kan kepada Anda, jika ingin merubah style atau CSS, silakan. tapi yang terpenting perhatikan kode CSS class "kertas". Karena kuncinya ada disana. Yaitu pada "background-image".

Terima kasih telah berkunjung di blog agung jaka nugraha. Wassalam!

Cara membuat Kertas Bergaris dengan CSS dan HTML