Category : Labels: Blog Tutorial, CSS Tutorial
Cross Browser Drop Cap ( Extra Markup )
Kita harus menambahkan kode CSS drop cap kepada huruf awal yang kita tentukan. Cara ini cukup ribet karena kodenya cukup banyak bagi orang yang tidak terlalu tahu mengenai pengkodean. Kelebihannya efek dari kode ini bisa tampil di banyak browser seperti halnya IE. Kenapa cukup ribet ? ya coba anda lihat contoh dibawah ini.
Konfigurasi CSS Drop Cap kode
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
Kita harus menambahkan kode CSS drop cap kepada huruf awal yang kita tentukan. Cara ini cukup ribet karena kodenya cukup banyak bagi orang yang tidak terlalu tahu mengenai pengkodean. Kelebihannya efek dari kode ini bisa tampil di banyak browser seperti halnya IE. Kenapa cukup ribet ? ya coba anda lihat contoh dibawah ini.
Konfigurasi CSS Drop Cap kode
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
Setelah itu kita harus menyisipkan kode pemanggil fungsi drop cap di atas pada setiap kata yang kita tentukan, seperti ini misalnya,
L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
Huruf "L" diatas yang diapit kode merupakan kata yang kita tentukan yang akan berperan sebagai huruf besar pada setiap paragrap alias Drop Cap.
CSS3 No Cross Browser
Nah, untuk yang kedua cara ini cukup mudah, karena kita tidak perlu menambahkan kode yang membingungkan pada setiap paragrap yang kita inginkan agar nantinya menjadi paragrap yang mempunyai style Drop Cap.
Kode CSS nya,
p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
Contoh penulisannya.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
Kelemahannya, hasilnya tidak akan bisa terlihat pada semua browser yang belum support CSS 3.
