Ketika kita membaca buku atau artikel di majalah, di bagian awal atau setiap babnya biasanya dimulai huruf pertama yang tipografinya dibuat berbeda dengan huruf lainnya. Huruf pertama pada paragraf pertama ini bisa berupa huruf kapital dengan ukuran font yang sangat besar, dengan gaya dan jenis font yang berbeda, yang jelas yang terlihat menarik. Inilah yang disebut dengan Drop Cap. Pada aplikasi word processing seperti Microsoft Word, kita dengan mudah menyisipkan drop cap pada dokumen kita dengan hanya menekan satu tombol/menu saja. Untuk membuatnya di halaman web, kita dapat melakukannya hanya dengan menggunakan CSS.

Berikut ini adalah contoh suatu paragraf dengan drop cap.

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.

dan CSS yang digunakan untuk paragraf di atas adalah sebagai berikut

p:first-letter {
float: left;
padding: 0 3px 0;
font-size: 50px;
font-style: italic;
font-family:georgia,"Times New Roman";
}

dengan memanfaatkan pseudo-selector CSS :first-letter maka efek drop cap pun bisa didapat di halaman web.

Selector p:first-letter akan diaplikasikan ke semua tag p (paragraf), bila ingin CSS tersebut diaplikasikan hanya untuk huruf pertama pada paragraf pertama, gunakan pseudo-selector :first-of-type yang sebenarnya sama seperti :nth-of-type(1).

CSS lengkapnya seperti ini di bawah ini.

p:first-of-type:first-letter {
float: left;
padding: 0 3px 0;
font-size: 50px;
font-style: italic;
font-family:georgia,"Times New Roman";
}

Dengan mencoba-coba dan mix-match antara gaya, jenis, ukuran font, menambah border, dsb maka drop cap pun bisa dapat lebih menarik lagi.

Related Posts

• E-Book: Web Design – CSS ^[2]
• Tool Javascript untuk Web Developer ^[3]