Featured Post

Cara Membuat Drop Cap pada Artikel Blog

Di entri sebelumnya saya telah membahas tentang cara membuat awal paragraf yang menjorok ke dalam. Kali ini, tidak jauh dari pembahasan sebelumnya; saya akan membahas bagaimana membuat drop cap di artikel blog dengan menggunakan CSS.

Sebelumnya, apa itu drop cap? Drop cap adalah gaya penulisan huruf pertama dalam paragraf pertama artikel dibuat lebih besar. Hal ini sangat lazim ditemui di buku-buku lawas atau mungkin di sebagian besar novel.

Ternyata, dengan CSS kamu juga bisa membuat drop cap di artikel blog kamu. Penasaran bagaimana caranya? Berikut ini adalah contoh drop cap sederhana yang saya buat di CodePen.

Membuat Drop Cap pada Artikel Blog dengan CSS

Kode di bawah ini sengaja saya buat dengan kasus ada 2 paragraf. Hal ini untuk memastikan bahwa hanya huruf pertama di paragraf pertama saja yang mempunyai gaya drop cap. Di artikel-artikel yang tersebar di pencarian Google, hampir tidak ada yang membahas cara ini (dengan 2 paragraf, lazimnya hanya dengan 1 paragraf saja).

See the Pen djGwv by Iskandar Dzulkarnain (@iskael) on CodePen

Apakah kamu sudah menemukan kodenya? Kode yang membuatnya bergaya drop cap adalah p:first-child:first-letter { ... }. Kode :first-child dan :first-letter adalah pseudo-selektor. First-child digunakan untuk menyeleksi bagian pertama paragraf. Sedangkan first-letter digunakan untuk menyeleksi huruf pertama dalam sebuah paragraf.

Mengapa Menggunakan Dua Pseudo-selektor Tersebut?

Coba saja kamu hilangkan pseudo-selektor :first-child. Apa yang terjadi? Di setiap paragraf, huruf pertamanya bergaya drop cap. Tentu ini bukan yang kita inginkan. Lalu apa yang terjadi jika pseudo-selektor :first-letter dihilangkan? Yang terjadi adalah semua huruf yang ada di paragraf pertama akan bergaya drop cap. Jadi itulah sebabnya mengapa menggunakan dua pseudo-selektor tersebut.

Menyenangkan bukan? Kamu juga bisa mengaplikasikannya di blogmu. Selamat mencoba :)

Mungkin Kamu Juga Suka...

Comments

Post a Comment