Membuat Drop Cap huruf awal text paragraf besar dengan CSS (cascading style sheets)
Tutorial lainnya dari CSS (Cascading Style Sheets), bagaimana sih membuat huruf awal suatu text paragraf menjadi besar, tekhnik ini disebut juga sebagai drop cap. Text besar yang berada di awal, bisa kita lihat di suatu majalah atau koran. Untuk membuatnya simple, hanya perlu menambahkan properti first-letter.
Properti lengkapnya seperti berikut :
…….Target : first-letter {font-size : …ukuran…px;}
Jika ditulis dalam kode <style> dengan properti “p” + ukuran 75px, maka akan terlihat seperti berikut ini :
<style type="text/css">
p: first-letter {
font-size : 75px;
}
</style>
Oke, sekarang mari kita sisipkan dalam kode html. Buka text editornya, dan ketikan kode html seperti berikut :
<html>
<head>
<style type="text/css">
p:first-letter {
font-size : 75px;
float:left;
}
</style>
</head>
<body>
<p>
Berita terkini, bahwa telah ditemukan suatu kode css untuk membuat awal tulisan menjadi besar, dan dinamai Drop cap. dengan metode ini, maka awal text akan tampak besar dan selanjutnya menjadi kecil. ya seperti itulah metode drop cap, hanya memerlukan kode properti first-letter. bagaimana kalau saya tanya kepada kamu bagaimaan rasanya menjadi manusia, jadi manusia itu tak enak, terkadang harus mengikuti sistem, yang bahkan kita tidak mau melakukannya. ingat ya, satu paragraf itu terdiri dari 3 titik, dan satu titik biasnya terdiri dari 3 koma, tapi tidak memungut kemungkinan bisa lebih dari 3.
</p>
<p>
Berita kedua, lahir dari data menuju dewas, dengan demikian mudah membuat hruf besar diawal iya kan, ya semudah cintaku padamu. hehe, bercanda kawan. jangan diambil hati, dunia itu kejam, tapi tak sekejam diriku hehe. jika kalian mau satu saja paragraf yang menjadi besar maka kalian perlu menambahkan class pada bagian awal, misalnya class="besar" dan ubah di bagaian style, menjadi p.besar:first-letter
</p>
</body>
</html>
Simpan dengan format .html, dan lihat hasilnya akan tampak seperti gambar berikut :
Pada gambar tersebut kita melihat kedua paragraf menjadi huruf besar awalnya. Untuk mengatasinya sangat mudah, hanya perlu menambahkan class saja pada paragraf yang hanya ingin dibesarkan. Contohnya seperti berikut :
<p class=”besar”>
Lebih jelasnya lihat bagian paragraf berikut :
<p class="besar"> Berita terkini, bahwa telah ditemukan suatu kode css untuk membuat awal tulisan menjadi besar, dan dinamai Drop cap. dengan metode ini, maka awal text akan tampak besar dan selanjutnya menjadi kecil. ya seperti itulah metode drop cap, hanya memerlukan kode properti first-letter. bagaimana kalau saya tanya kepada kamu bagaimaan rasanya menjadi manusia, jadi manusia itu tak enak, terkadang harus mengikuti sistem, yang bahkan kita tidak mau melakukannya. ingat ya, satu paragraf itu terdiri dari 3 titik, dan satu titik biasnya terdiri dari 3 koma, tapi tidak memungut kemungkinan bisa lebih dari 3. </p> <p> Berita kedua, lahir dari data menuju dewas, dengan demikian mudah membuat hruf besar diawal iya kan, ya semudah cintaku padamu. hehe, bercanda kawan. jangan diambil hati, dunia itu kejam, tapi tak sekejam diriku hehe. jika kalian mau satu saja paragraf yang menjadi besar maka kalian perlu menambahkan class pada bagian awal, misalnya class="besar" dan ubah di bagaian style, menjadi p.besar:first-letter </p>
Setelah itu, ubah juga pada tag style menjadi :
p.besar:first-letter {font-size : 75px;
float:left;}
Maka hasilnya akan tampak seperti gambar berikut ini :
Penjelasan kode html :
- <html> dan </html> merupakan tag pembuka dan penutup dari kode html
- <head> dan </head> untuk tag heading : penempatan script, kode css, meta dsb.
- <style> dan </style> untuk menyimpan kode design
- p:first-letter merupakan selector dan tambahan kode penentu awal suatu text
- font-size : digunakan untuk memperbesar ukuran text awalnya
- float untuk menentukan posisi left=kiri dan right= kanan
selsai… yeah… selamat berjumpa di artikel selanjutnya
