Popular Posts
-
Pengenalan PHP Tutorial yang saya tulis kali ini berhubungan dunia website yang menggunakan bahasa PHP. Sebelum masuk ke tips dan trik PHP... -
Catatan Penting: Data yang dapat dijumlahkan harus berupa angka atau data string yang dapat diubah menjadi angka ( string yang terdiri ata...
-
Halo smua ,, kali ini saya akan membagikan bagaimana cara untuk membuat submit form atau proses dari suatu form dengan menggunakan Ajax Jqu...
Sabtu, 04 Juni 2011
Membuar DropCap dengan CSS
02.47 | 
Diposting oleh
Suparno, M.Pd
Huruf kapital besar yang letaknya diawal paragraf yang memakan dua atau lebih baris dikenal dengan ‘drop cap’, ‘dropped initial’, ataupun ‘uncial’. Drop cap sering kita lihat pada suratkabar atau majalah. Nah, kali ini akan dijelaskan bagaimana membuat drop cap pada halaman web Anda. Membuat drop cap menggunakan CSS sangat mudah, tetapi untuk memastikan tipografi yang bagus membutuhkan kombinasi kode CSS .
Contoh:
Ini dia tipografi CSS yang digunakan:
Anda dapat mengubah rule CSS yang digunakan sesuai selera. Kalau ada yang mau ditanya, komen aja langsung.
Menggunakan Tag <span>
Dengan menggunakan tag <span> yang digunakan sebagai elemen inline (dalam baris), kita dapat mengontrol penampilan drop cap.Contoh:
1 2 3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | p{ text-align : justify; line-height : 1.5em; } .dropCap{ display : block; float : left; margin-top : -0.63em; /* ganti dengan -0.205em untuk dua baris */ margin-left : -0.56em; margin-right : 0.5em; height : 4.5em; } .dropCap span{ font-size : 5.6em; /* ganti dengan 3.33em untuk dua baris */ line-height : 1.0em; } |
Label:
Langganan:
Postingan (Atom)