Huruf Awal Lebih Besar Pada Paragraf

cara membuat 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; }
BlogUNDER88 Tutorial Blogger Blogspot

3 comments:

  1. udh di follow kawan..
    follow back dong,
    http://denbo-1.blogspot.com

    ReplyDelete
  2. Keren jadinya ya gan \o/
    Thank's tutorial nya.

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top