Drop Cap Otomatis Dengan CSS Pseudo Element

Cara Membuat Drop Cap Otomatis Dengan CSS Pseudo Element - Drop cap untuk sebuah content artikel pada blog akan membuat tampilan artikel menjadi lebih menarik, dengan menentukan properti font yang cocok dan properti pendukung lainnya untuk menjadikan drop cap menjadi lebih baik dari segi tampilan, pernggunaan drop cap dengan CSS Pseudo Element akan membuat drop cap tersebut berlaku otomatis pada tiap awal huruf pada conten artikel.

CSS Pseudo Element yang dimaksud adalah CSS Pseudo Element :first-letter, sebagai contoh penggunaaan drop cap menggunakan CSS Pseudo Element sebagai berikut:

CSS

.class:first-letter {
  font:bold 64px "Times New Roman", Times, serif;
  color:#888888;
  float:left;
  margin:7px 10px 0 0;
  padding:1px 5px;
  border:2px dotted #E6E6E6;
  background:#ADADAD;
  text-shadow: 1px 1px 0px #C2C2C2;
  line-height:1;
<!-- Style sisanya bisa ditambahkan disini -->
}

Penggunaan Drop Cap CSS Pseudo Element ini sangat cocok dipergunakan jika blog kalian sudah memiliki post yang cukup banyak dan memutuskan menggunakan drop cap pada setiap postingannya, karena CSS Pseudo Element ini bersifat otomatis untuk awal karakter pada setiap post.

Berbeda jika kita membuat drop cap hanya untuk postingan tertentu saja, untuk membuat drop cap pada postingan tertentu dengan style yang berbeda-beda pada tiap post, kita bisa Membuat Drop Cap Tersebut Dengan Cara Manual.

Untuk menerapkan drop cap pada content posting tentunya harus mengetahui nama selektor yang dipergunakan, setelah itu bisa menambahkan properti pada CSS Pseudo Element tersebut. Untuk pengguna Blogger.com biasanya menggunakan nama selektor .post-body ( jika tidak ada .post-body mungkin penamaan selektornya berbeda).

Penerapan CSS Pada Class-nya

CSS

.post-body:first-letter {
  font:bold 64px "Times New Roman", Times, serif;
  color:#888888;
  float:left;
  margin:7px 10px 0 0;
  padding:1px 5px;
  border:2px dotted #E6E6E6;
  background:#ADADAD;
  text-shadow: 1px 1px 0px #C2C2C2;
  line-height:1;
<!-- Style sisanya bisa ditambahkan disini -->
}

Pembuatan drop cap ini bukan hanya bisa dipergunakan untuk conten posting saja, melainkan bisa dipergunakan untuk judul posting (title post) atau bagian-bagian lain yang diperlukan, yang penting mengetahui nama selektor yang dipergunakan pada bagian tersebut.

Properti CSS drop cap diatas hanya sebagai contoh sederhana saja (hasil akhir seperti pada gambar diatas), masih bisa dikembangkan lebih baik dengan memperhatikan faktor tipografi yang baik dan penggunaan warna yang cocok.