Huruf Awal Lebih Besar Pada Paragraf

Drop Caps Pada paragraf

Under88 - Tips Cara membuat huruf pada awal sebuah paragraf memang sudah tidak asing aling.. karena tips ini biasa di pakai pada saat kita membuat postingan blog untuk memperjelas sebuah paragraf atau sebagai hiasan postingan..kali ini saya akan menjelaskan dengan teknik yang sama, namun ada beberapa cara yang bisa di lakukan, yaitu dengan markup tambahan atau tanpa markup. dan CSS akan berperan penting dalam proses pengerjaan. lihat tutorialnya... !!

Cross-browser (dengan markup)

Hanya membungkus karakter pertama dari paragraf pada huruf awal, kemudian target SPAN dengan Style CSS.
Contoh 1 :

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.

<span class="hurufawal">L</span>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.
</p>

.hurufawal { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

CSS3 (tanpa markup)

Target karakter pertama dari paragraf pertama menggunakan penyeleksi class pseudo.Tidak ada markup tambahan yang diperlukan, tetapi tidak mendukung IE <9 .
Contoh 2 :

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.

<p>
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.
</p>

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; }