Tips Dan Trik Seputar Bisnis Online dan Internet Marketing

CSS membuat Font Drop Caps pada halaman Website

Font drop capsPada postingan saya kali ini saya akan menunjukkan caranya membuat efek Font Drop Caps seperti dalam gambar disamping ini.

Efek Font Drop Caps adalah cara untuk membuat font di awal tulisan menjadi besar yang ukurannya bisa anda tentukan sendiri dan biasanya efek ini bisa anda temui di surat kabar atau portal berita, tetapi itu tidak ada salahnya jika anda mengetahui cara untuk membuat efek tersebut.

Langsung saja kita praktek untuk mendapatkan Code script nya …

Langkah pertama anda mesti membuat file Html terlebih dahulu untuk itu sudah saya persiapkan codenya seperti nampak seperti di bawah ini :

 

<link href=”style.css” rel=”stylesheet” type=”text/css”><!– penghubung file CSS dengan halaman HTML–>
<p class”dropcaps”>Contoh penggunaan first-letter dalam membuat drop caps dalam halaman web. Drop-caps ini akan menempati beberapa baris tulisan sampai ukuran tingginya dapat dilewati oleh baris tersebut sendiri. Style ini biasanya ada pada koran dan majalah – majalah. Untuk mengatur besar dan ukuran dari drop cap ini dapat dilihat file CSS dan atur besar setiap nilai dari property class ini. </p>

 

Contoh penggunaan first-letter dalam membuat drop caps dalam halaman web. Drop-caps ini akan menempati beberapa baris tulisan sampai ukuran tingginya dapat dilewati oleh baris tersebut sendiri. Untuk mengatur besar dan ukuran dari drop cap ini dapat dilihat file CSS dan atur besar setiap nilai dari property class ini.

p.dropcaps:first-letter { /*membuat class baru*/
font-size : 60px;         /*menentukan ukuran font dengan menggunakan persen*/
font-weight : bold;       /*font akan ditebalkan*/
float : left;             /*font drop caps akan diletakkan di sebelah kiri*/
width : 1em;              /*font drop caps akan dilebarkan 1em*/
}

Anda copi code diatas pada notepad anda dan simpan dengan nama index .html

Selanjutnya anda copi juga code CSS untuk membuat efek Font DropCaps dibawah ini

Setelah itu anda simpan dengan nama style.css

Untuk penyimpanan supaya bisa berubah menjadi file html maupun file CSS, caranya sama seperti anda membuat file .htaccess pada postingan saya yang lainnya dan anda bisa melihatnya disini

Kemudian anda taruh didalam satu folder, setalah itu anda jalankan file index.html dengan melakukan klik dua kali supaya muncul pada browser anda.

Anda bisa merubah ukuran seperti keterangan disampingnya, dan font dropcaps anda akan berubah dengan sendirinya.


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang

Kiriman oleh : Google FeedBurner

 

 

Leave a Reply



*