Membuat Drop Cap dengan CSS

Ide penerapan drop cap pada artikel dapat menjadi sentuhan kecil yang menarik para pembaca, meskipun sebenarnya tidak semudah itu untuk menerapkannya dalam halaman yang terbuat dari kode HTML. Ada dua cara yang bisa kamu gunakan untuk menciptakan drop cap, yaitu dengan menggunakan separator berupa tag <span> dan menggunakan CSS Pseudo-Element :first-letter.

Khusus untuk metode ke dua, Saya tidak menjamin bahwa hasil akhir tampilannya akan tampak sama pada semua jenis peramban sama seperti apa yang beberapa tutorial sejenis katakan dalam artikelnya.

Cara Pertama: Gunakan Tag <span> untuk Menyeleksi Huruf Pertama

Kita tahu bahwa elemen yang paling umum diterapkan dalam teks adalah <span>, maka langkah pertama untuk menerapkan konsep drop cap adalah dengan mengapitkan kode <span> pada huruf pertama, kemudian menamambahkan atribut berupa class dengan nilai yang spesifik. Misalnya class='drop-cap' seperti ini:

<span class="drop-cap">L</span>orem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng enak rasanya. Sed diam nonumy ummi-ummi eirmod tempor kuch-kuch hota hai. Poligami nehi-nehi aishiteru mereketehe hajimeteiru. Ut labore et dolore et rupiahe et mahal banget et gak punya duit. Ciluk babara hotras bagong. Bang-bang-tut bau jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!!
Et dagingo et sabarapa et ditawara et boleh kaga. Mogo morodoko saligobagos cus brot. Cihong! Cihong! Umeeeyyy!!! Magna aliquyam alhamdulillah. Sed diam et justo jus tomat bubur ketek duo gelaso piringo sabarapo dolores et rebum udang rebon. Ayam! Ayam! Ayam! Jus! Yes! Hoooo!!! DHUARRR!!!

Setelah itu kamu buat deklarasi-deklarasi CSSnya seperti ini:

span.drop-cap {
  font-size:300%;
  font-weight:bold;
  font-family:Georgia,Serif;
  float:left;
  margin-right:10px;
  padding:2px 5px;
  border:3px double #777;
  background:#ECE9D8;
}

Letakan kode tersebut di atas ]]></b:skin> atau </style>, maka hasilnya akan menjadi seperti ini:

Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng enak rasanya. Sed diam nonumy ummi-ummi eirmod tempor kuch-kuch hota hai. Poligami nehi-nehi aishiteru mereketehe hajimeteiru. Ut labore et dolore et rupiahe et mahal banget et gak punya duit. Ciluk babara hotras bagong. Bang-bang-tut bau jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!!

Et dagingo et sabarapa et ditawara et boleh kaga. Mogo morodoko saligobagos cus brot. Cihong! Cihong! Umeeeyyy!!! Magna aliquyam alhamdulillah. Sed diam et justo jus tomat bubur ketek duo gelaso piringo sabarapo dolores et rebum udang rebon. Ayam! Ayam! Ayam! Jus! Yes! Hoooo!!! DHUARRR!!! (Hasil tampilan penerapan tag <span class="drop-cap">)

Deklarasi-deklarasi font-size:300%, float:left dan margin-right:10px adalah deklarasi-deklarasi yang paling memiliki peran penting dalam terbentuknya efek drop cap:

• font-size:300% menyatakan ukuran teks sebesar 300% dari ukuran teks normal. Saya lebih menyarankan menggunakan satuan persentase untuk mendapatkan perbandingan ukuran yang proporsional.
• float:left menyatakan bahwa teks akan cenderung mengarah ke samping kiri dengan peraturan bahwa elemen-elemen lain di sekelilingnya akan meliputinya.
• margin-right:10px diterapkan untuk memastikan bahwa kerenggangan sebelah kanan dari drop cap tidak bertabrakan dengan teks yang meliputiya.

Cara ke Dua: Gunakan CSS Pseudo-Element :first-letter

Cara yang ke dua ini jauh lebih praktis, karena di sini kita memanfaatkan kemampuan CSS Pseudo-Element, sehingga kita tidak perlu lagi menerapkan tag <span> untuk menyeleksi huruf-huruf pertama. Dengan CSS Pseudo-Element, semua huruf pertama dapat terseleksi secara otomatis.

Untuk menerapkan cara yang ke dua ini, hal yang paling penting kamu lakukan terlebih dahulu adalah menemukan elemen induk yang meliputi artikel dalam situsmu. Untuk template blogspot standar, sebuah konten posting biasanya akan diapit oleh tag <div> dengan atribut berupa class='entry-content' atau class='post-body'. Nah, dengan modal kelas tersebut kita buat kode CSS seperti ini:

.post-body:first-letter {
  font-size:300%;
  font-weight:bold;
  font-family:Georgia,Serif;
  float:left;
  margin-right:10px;
  padding:2px 5px;
  border:3px double #777;
  background:#ECE9D8;
}

Kode di atas pada akhirnya nanti akan memberikan hasil tampilan yang hampir sama, hanya penerapannya saja yang berbeda. Setiap metode pasti mempunyai keuntungan dan kerugiannya masing-masing. Tugasmu adalah mencari tahu.

Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng enak rasanya. Sed diam nonumy ummi-ummi eirmod tempor kuch-kuch hota hai. Poligami nehi-nehi aishiteru mereketehe hajimeteiru. Ut labore et dolore et rupiahe et mahal banget et gak punya duit. Ciluk babara hotras bagong. Bang-bang-tut bau jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!!

Et dagingo et sabarapa et ditawara et boleh kaga. Mogo morodoko saligobagos cus brot. Cihong! Cihong! Umeeeyyy!!! Magna aliquyam alhamdulillah. Sed diam et justo jus tomat bubur ketek duo gelaso piringo sabarapo dolores et rebum udang rebon. Ayam! Ayam! Ayam! Jus! Yes! Hoooo!!! DHUARRR!!! (Hasil tampilan penerapan CSS Pseudo-Element)