Cara Buat Drop Cap di Blog

Tidak hanya di Word saja, drop cap juga bisa dibuat di Blogger atau WordPress. Cara membuat drop cap di blog pun cukup mudah, hanya dengan beberapa baris kode CSS saja!

Dropped capital atau drop cap adalah huruf besar yang biasa digunakan sebagai elemen dekoratif yang diletakkan pada awal paragraf. Ukurannya biasanya berkisar antara 2-5 baris.

Sebagai contoh, kamu bisa melihat paragraf pembuka artikel ini.

Drop cap sendiri bukanlah hal baru karena sudah digunakan sejak lama. Selain mempercantik tulisan, drop cap juga dipakai untuk menarik perhatian pembaca. Saya sendiri memakainya untuk membedakan paragraf pembuka dengan paragraf lain di sebuah artikel. Enaknya lagi, drop cap bisa mempercantik tampilan artikel tanpa harus mempengaruhi tampilan keseluruhan artikel, karena kita hanya mengubah tampilan satu huruf saja.

Untuk membuat drop cap di blog caranya cukup mudah.

Bagi pengguna WordPress, kita bisa memakai plugin block gutenberg. Namun jika kamu ingin melakukannya secara manual, kita bisa memakai kode CSS.

Cara Buat Drop Cap di Blog dengan CSS

Di sini saya akan menjelaskan 2 cara buat drop cap di blog dengan CSS.

Pertama kita bisa membuat agar semua paragraf pertama secara otomatis memiliki drop cap. Kedua, kita bisa membuat class khusus agar kamu bisa memilih paragraf mana yang akan kamu beri drop cap.

Untuk membuat semua paragraf pertama di blog agar memiliki drop cap, kita bisa memakai pseudo-element CSS :first-child untuk memilih paragraf pertama dan :first-letter untuk memilih huruf pertama di paragraf tersebut, seperti pada contoh berikut ini.

p:first-child:first-letter {
  font-size: 4em;
  float: left
  line-height: 0.6
  margin-right: 0.1em
}

Dan jika kita ingin membuat drop cap di paragraf yng kita inginkan, kita hanya perlu mengubah kode di atas menjadi,

.dropcap {
  font-size: 4em;
  float: left
  line-height: 0.6
  margin-right: 0.1em
}

Untuk mengaktifkannya, cukup tambahkan class .dropcap pada paragraf yang ingin kamu buat drop cap,

<p class="dropcap">Ini adalah paragraf dengan drop cap.</p>

Sebagai catatan, jika tampilan drop cap tidak sesuai dengan apa yang kamu inginkan, ubah nilai font-size hingga margin di kode tersebut. Jika kamu memiliki ukuran font yang berbeda di tampilan mobile, kamu juga mungkin perlu membuat kode CSS yang berbeda agar tampilannya proporsional.

Cara Alternatif Membuat Drop Cap dengan CSS

Selain menggunakan pseudo-element, sebenarnya ada cara lain yang lebih mudah dengan menggunakan initial-letter.

Dengan ini, kita tidak perlu mengatur margin dan line-height karena ukuran huruf drop cap akan secara otomatis mengikuti ukuran huruf pada paragraf tersebut.

Misalnya pada kode ini,

p:first-child:first-letter {
  initial-letter: 2;
}

Ukuran drop cap akan mengikuti besar dua baris di paragraf tersebut. Dengan begini, drop cap akan tampil responsive baik di browser PC maupun mobile.

Sayangnya sampai tulisan ini dibuat, initial-letter belum diadopsi oleh kebanyakan browser, baru Safari saja.

Demikianlah tutorial CSS kali ini, mudah-mudahan cara membuat drop cap di blog ini bisa membantu kamu mempercantik tampilan tulisan di Blogger atau WordPress. Jika kamu memiliki kesulitan, jangan segan untuk meninggalkan komentar di bawah ini yah!