"Drop caps" adalah keadaan yang mana huruf pertama pada permulaan ayat dibesarkan berbanding saiz tulisan yang lain dan merangkumi beberapa baris ayat pada perenggan yang sama. Kebiasaanya adalah dalam 2 atau 3 baris. Anda dapat melihat sendiri hasilnya pada ayat dalam tutorial ini.

Anda boleh praktiskan pada mana-mana pelantar perisian sama ada CMS atau fail HTML biasa. Hanya beberapa baris kod sahaja diperlukan dan sedikit pengetahuan dalam CSS.

Tidak memerlukan "Plugin" tambahan

Seperti biasa, CMS mungkin menyediakan modul atau pemasangan fungsi tambahan bagi membolehkan anda membuat kesan "drop caps". Namun sebenarnya, keperluan atau kita menggunakan fungsi yang ada pada CSS sudah cukup. Kerana penggunaan modul tambahan pada CMS bukan sahaja melembabkan proses paparan laman, sebaliknya ianya tidak perlu.

Jadi untuk langkah pertamanya, anda perlu membuka fail CSS yang mengandungi puluhan elemen yang mengawal bentuk paparan laman.

Seterusnya dengan mudah sahaja, masukkan kod aturcara CSS ini:

span.dropcaps {
  font-family: Georgia;
  color: #61b644;
  font-size: 48px;
  float: left;
  font-weight: bold;
  line-height: 48px;
  margin-bottom: -10px;
  margin-right: 5px;
  position: relative;
}

Kod di atas digunakan pada laman Kripkorn Studios. Sudah tentu anda perlu mengubahsuai kod tersebut untuk menjadi seimbang dengan templat yang digunakan. Jadi berikut merupakan penerangan kepada setiap elemen yang saya gunakan dalam CSS.

  1. font-family — jenis tulisan yang akan digunakan. Anda boleh ubah kepada "Arial" atau "Times New Roman"
  2. color — mengawal warna tulisan. Anda perlu mendapatkan kod "hexidecimal" bagi warna pilihan anda
  3. font-size — mengawal saiz tulisan. Sekiranya anda mahu lunjurkan kepada beberapa baris lagi, besarkan saiz ini
  4. float — membolehkan fungsi "drop" dihasilkan. Tetapkan nilai ini kepada "left".
  5. font-weight — mengawal fungsi ketebalan tulisan. Jika anda tidak suka "bold", ubahkan nilai ini kepada "normal"
  6. line-height — ketinggian tulisan. Biasanya nilai ini sama seperti saiz tulisan
  7. margin-bottom — apabila saiz tulisan dibesarkan, ianya akan merangkumi keseluruhan perenggan menjadikan terdapat ruang dan teks pada baris terakhir tidak memenuhi bahagian bawahnya. Nilai negatif disetkan supaya ruangan dibahagian bawah "drop caps" dimansuhkan
  8. margin-right — mengawal ruang antara bahagian tepi teks dan "drop caps"
  9. position — tetapkan nilai ini kepada "relative" sahaja

Memasukkan "Class" pada kandungan atau artikel

Sekarang adalah peringkat untuk menggunakan "class" yang kita tetapkan di dalam CSS. Begitu mudah sahaja, rangkumkan huruf pertama pada perenggan pertama dengan kod aturcara ini:

<span class="dropcaps">M</span>enggunakan CSS sangat mudah

Dan anda akan dapat hasilnya seperti dalam tutorial ini.

Penilaian: 
No votes yet