Cara membuat dropcap di website

Drop cap dekorasi karakter pertama di awal paragraf pertama dibuat lebih menonjol dengan memperbesar ukuran huruf.

Teknik drop cap sering dibuat dalam karya tulis media cetak, koran, majalah, buku dan media cetak lainnya. Teknik dekorasi drop cap dalam artikel blog sudah tidak asing lagi.

Beberapa theme blog WordPress sudah menyediakan fitur tambahan untuk membuat ‘Drop Cap’.

Bila thema WordPress atau Blogspot kamu tidak ada fitur tersebut, jangan berkecil hati.

Kamu bisa menambahkan sendiri fitur drop cap. Caranya cukup sederhana, tambahkan style CSS berikut dalam child theme WordPress kamu:

/* Drop Cap Style*/
p:first-child:first-letter { 
	float: left; 
	font-size: 4em;
	padding-right: 0.1em;
	/* Kode Opsinal */
	line-height: 0.85em; 
	font-weight: bolder;
	color: gray;  
}

Arti dari p:first-child:first-letter untuk memberitahukan kepada HTML, agar merender karakter pertama (first-letter) di awal paragram pertama (first-child), ukuran hurufnya lebih besar/menonjol dari ukuran normal.

Sedangkan pada paragraf-paragraf yang lain tidak ada penekanan style.

Pada beberapa blog, web, kode tersebut juga akan menciptakan efek drop cap pada tempat lain, misalnya; di bagian footer, sidebar atau page lain.

Setelah insert kode tadi, tiba-tiba muncul drop cap dimana-mana, jangan panik.

Kemungkinan besar, theme blog kamu tidak membungkus tag <p></p> dalam element <article>, tapi dalam tag <div> biasa.

Cukup tambahkan element article seperti ini:

/* Drop Cap Style*/
article p:first-child:first-letter { 
	float: left; 
	font-size: 4em;
	padding-right: 0.1em;
	/* Kode Opsinal */
	line-height: 0.85em; 
	font-weight: bolder;
	color: gray;  
}

Maksudnya, HTML akan merender drop cap jika ada tag <p> di dalam element <article> <p>Lorem ipsum... </p> </article>.

Biasanya, tag <article> cuma boleh dipanggil sekali saja di dalam body HTML. Jadi, ruang lingkup render drop cap hanya terbatas di dalam element itu saja.

Ingin menampilkan drop cap di sidebar, di footer, atau dalam tag div khusus lainnya?

Cukup tambahkan class .drop-cap seperti berikut:

/* Drop Cap Style*/
.drop-cap p:first-child:first-letter { 
	float: left; 
	font-size: 4em;
	padding-right: 0.1em;
	/* Kode Opsinal */
	line-height: 0.85em; 
	font-weight: bolder;
	color: gray; 
}

Kemudian, panggil class <div class="drop-cap"><p>Lorem ipsum...</p></div> dimana saja sesuai keinginan kamu. Mudah bukan?