deZige

Drop Cap Otomatis Dengan CSS Pseudo Element

Membuat drop cap otomatis pada content posting dengan CSS Pseudo Element dengan memperhatikan tipografi yang baik

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.

Drop Caps Otomatis Pada Posting

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.

8 comments:

  1. Master, juragan, agan, hatur nuhun.. saya pingin belajar banyak dari anda. Salam kenal.. :tp

    ReplyDelete
    Replies
    1. Terima kasih, Salam kenal juga, tapi maaf sebelumnya kalau saya juga masih dalam tahap belajar.

      Delete
  2. Wihh ...
    baru pertama lihat blog agan, ternyata bagus bang template nya ..
    sipp.. :cl

    sungkem :nw

    ReplyDelete
  3. Gimana kalau dibagian awal posting itu gambar. Jadinya kan text setelah gambar.
    Itu bisa gak diatur dengan CSS??

    ReplyDelete
  4. Tips yang bermanfaat gan. Setelah saya cari-cari, akhirnya nemu caraya juga di blognya agan. Makasih tutorialnya gan. Kunjung balik + komentar balik ke blog saya ya gan :)

    ReplyDelete
  5. Mantap gan blognya, saya mengambil beberapa panduan termasuk backround untuk blog saya makasih banyak tutorialnya, Dropcapnya sangat menarik, kalau boleh di bagi ilmunya bang

    ReplyDelete
    Replies
    1. Terima kasih, silahkan mas, untuk background saya menggunakan di subtlepattern lebih banyak pilihan

      Delete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige