Membuat drop cap menggunakan CSS

July 25, 2018
Setelah sebelumnya kita mempelajari text case, kali ini kita akan membahas cara membuat drop cap.
Drop cap di gunakan untuk mempercantik tampilan paragraf di huruf yang pertamanya.
Berikut ini contoh penulisan style nya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p.styleku:first-letter { 
 float: left; 
 font-family: "Lucida Grande"; 
 font-size: 80px; 
 } 
p { 
 text-align : justify; 
 } 
</style> 
</head> 
<body> 
<h1 id="heading1">Ini Judul Heading 1</h1> 
<p class="styleku">Bagian ini adalah paragraf. Bagian ini adalah 
paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. 
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini 
adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah 
paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. 
Bagian ini adalah paragraf. Bagian ini adalah paragraf. </p> 
</body> 
</html>
Hasilnya seperti berikut

p.styleku:first-letter { 
 float: left; 
 font-family: "Lucida Grande"; 
 font-size: 80px; 
 } 

Code style di atas hanya akan berlaku untuk huruf pertama dari paragraf yang memiliki class styleku, dalam hal ini adalah huruf B. Sedangkan properti float digunakan untuk mengatur posisi huruf B tersebut, apakah di sebelah kiri atau kanan, sehingga valuenya adalah left. Apabila value yang dipilih adalah right, maka berikut ini tampilannya:

Selanjutnya kita akan mempelajari cara membuat layout dengan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Wickey

Author:

Facebook Comment

Inside Post