Drop Cap Berbeda Style Pada Tiap Posting

Membuat Drop Cap Berbeda Style Pada Tiap Posting - Kelebihan membuat drop cap dengan cara manual adalah kita bisa memberi gaya (style) berbeda pada tiap drop cap yang kita buat, baik itu untuk posting, Judul Posting ataupun bagian-bagian lain yang perlu untuk menggunakan drop cap.

Berbeda halnya dengan membuat drop cap menggunakan CSS Pseudo Element yang hasilnya bersifat otomatis, untuk membuat drop cap secara manual kita memanfaatkan tag <span> untuk paragraf yang menggunakan drop cap.

Sebagai contoh membuat drop cap secara manual, saya menggunakan css properti pada drop cap menggunakan CSS Pseudo Element pada postingan kemarin, sebagai berikut:

CSS

.drop_cap {
  font:bold 64px "Times New Roman", Times, serif;
  color:#888888;
  float:left;
  margin:7px 10px 0 0;
  padding:1px 5px;
  border:2px dotted #E6E6E6;
  background:#ADADAD;
  text-shadow: 1px 1px 0px #C2C2C2;
  line-height:1;
<!-- Style lainnya bisa ditambahkan disini -->
}

Dan hasilnya sebagai berikut:

Paragrap artikel kalian...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Seperti disebutkan pada judul diatas membuat drop cap dengan style yang berbeda pada tiap posting, maka penempatan properti css-nya pun tidak lagi dalam class .post-body, melainkan manual pada halaman posting pada mode HTML (walaupun penempatan css properti bisa saja diditempatkan pada class .post-body, tapi bayangkan berapa class yang mengapit post-body harus dibuat...), maka dari itu kita menggunakan tag span untuk drop cap-nya.

Dan penulisan kode pada posting menjadi seperti ini:

<span style="font:bold 64px 'Times New Roman', Times, serif; color:#888888; float:left; margin:7px 10px 0 0; padding:1px 5px; border:2px dotted #E6E6E6; background:#ADADAD; text-shadow: 1px 1px 0px #C2C2C2; line-height:1;">P</span>aragrap artikel kalian...

class drop_cap (.drop_cap) tidak dicantumkan sebagai selektor, karena sudah diganti dengan style (<span style="css disini">Karakter pertama</span> isi artikel), itu dimaksudkan supaya bisa mengganti dengan properti-properti yang lain dengan style yang berbeda pada tiap post. Cara penulisan css pada postingan seperti ini valid HTML5.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Dengan membuat drop cap berbeda pada tiap posting, supaya mengasah daya kreatif kita untuk menampilkan bentuk-bentuk drop cap yang lebih menarik dan lebih baik.