Cara Menciptakan Drop Cap Pada Artikel Blog

Di entri sebelumnya aku telah membahas wacana cara menciptakan awal paragraf yang menjorok ke dalam. Kali ini, tidak jauh dari pembahasan sebelumnya; aku akan membahas bagaimana menciptakan drop cap di artikel blog dengan memakai CSS.

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

Ternyata, dengan CSS kau juga dapat menciptakan drop cap di artikel blog kamu. Penasaran bagaimana caranya? Berikut ini ialah pola drop cap sederhana yang aku buat di CodePen.

Membuat Drop Cap pada Artikel Blog dengan CSS

Kode di bawah ini sengaja aku buat dengan kasus ada 2 paragraf. Hal ini untuk memastikan bahwa hanya aksara pertama di paragraf pertama saja yang memiliki 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 kau sudah menemukan kodenya? Kode yang membuatnya bergaya drop cap ialah p:first-child:first-letter { ... }. Kode :first-child dan :first-letter ialah pseudo-selektor. First-child dipakai untuk menyeleksi kepingan pertama paragraf. Sedangkan first-letter dipakai untuk menyeleksi aksara pertama dalam sebuah paragraf.

Mengapa Menggunakan Dua Pseudo-selektor Tersebut?

Coba saja kau hilangkan pseudo-selektor :first-child. Apa yang terjadi? Di setiap paragraf, aksara pertamanya bergaya drop cap. Tentu ini bukan yang kita inginkan. Lalu apa yang terjadi jikalau pseudo-selektor :first-letter dihilangkan? Yang terjadi ialah semua aksara yang ada di paragraf pertama akan bergaya drop cap. Kaprikornus itulah sebabnya mengapa memakai dua pseudo-selektor tersebut.

Menyenangkan bukan? Kamu juga dapat mengaplikasikannya di blogmu. Selamat mencoba :)
Sumber https://www.iskael.com/