Text Dengan Huruf Kapital Menjadi Besar dan Turun Ke Bawah
Metode ini dapat menciptakan "drop capitals" yang tidak bergantung pada pseudo classes, tetapi dibuat dengan menggunakan sebuah span yang dapat diterapkan pada setiap text dengan huruf pertama yang dapat terlihat lebih besar dan turun kebawah.
Contoh:
This is a demonstration of how to produce a drop capital with the top of the text inline with the top of the drop capital.
More Detail:
Silahkan letakan Kode CSS kedalam tag <head> template anda dan HTML kedalam tag <body>. Untuk Text yang akan anda berikan efek drop capitals, lihat seperti contoh pada Kode HTML dibawah ini. Kode CSS
<style type="text/css">
#box {display:block; width:250px; line-height:normal; letter-spacing:1px; font-family: times new roman, serif; font-size:16px; color:#000; border:1px solid #ddd; padding:5px; margin:50px auto 100px auto;}
#cap {font-size:50px; color:#909; font-weight:bold; float:left; height:34px; line-height:34px; margin-top:2px; margin-right:1px;}
* html #cap {margin-right:-2px; margin-top:3px;}
</style>
#box {display:block; width:250px; line-height:normal; letter-spacing:1px; font-family: times new roman, serif; font-size:16px; color:#000; border:1px solid #ddd; padding:5px; margin:50px auto 100px auto;}
#cap {font-size:50px; color:#909; font-weight:bold; float:left; height:34px; line-height:34px; margin-top:2px; margin-right:1px;}
* html #cap {margin-right:-2px; margin-top:3px;}
</style>
Kode HTML
<div id="box">
<span id="cap">T</span>his is a demonstration of how to produce a drop capital with the top of the text inline with the top of the drop capital.
</div>
sumber: cssplay<span id="cap">T</span>his is a demonstration of how to produce a drop capital with the top of the text inline with the top of the drop capital.
</div>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon