29
Feb
Efek Ukuran Pada Text Dengan CSS3
Ini adalah "CSS3 Teks Zoom", sebuah efek yang diciptakan dengan CSS3 untuk menampilkan text menjadi lebih besar saat onmouseover diatasnya.
Demo CSS3 Teks Zoom :
Kode CSS
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/archivesiugi/javascr/CSSTextZoom.css" />
Kode HTML
<div id="info">
<h2>CSS3 Text Zoom</h2>
<h2>IE7, IE8, IE9, IE10, Firefox 3, Firefox 4, Firefox 5, Safari, Chrome and Opera</h2>
<p class="info">Absolutely NO javascript</p>
<br /><br />
<ul class="menu">
<li class="p1"><a href="#url1"><span>Promotional Items</span></a></li>
<li class="p2"><a href="#url2"><span>Digital SLR Cameras</span></a></li>
<li class="p3"><a href="#url3"><span>Zoom Lenses and Filters</span></a></li>
<li class="p4"><a href="#url4"><span>Tripods and Monopods</span></a></li>
<li class="p5"><a href="#url5"><span>Flashguns and Accessories</span></a></li>
<li class="p6"><a href="#url6"><span>Photo Framing</span></a></li>
<li class="p7"><a href="#url7"><span>Wedding Photography</span></a></li>
<li class="p8"><a href="#url8"><span>Photograph Albums</span></a></li>
<li class="icons">
<b class="m1">Promotional Items</b>
<b class="m2">Digital SLR Cameras</b>
<b class="m3">Zoom Lenses and Filters</b>
<b class="m4">Tripods and Monopods</b>
<b class="m5">Flashguns and Accessories</b>
<b class="m6">Photo Framing</b>
<b class="m7">Wedding Photography</b>
<b class="m8">Photograph Albums</b>
</li>
</ul>
<br /><br /><br /><br /><br />
<p class="info">copyright © Buku Catatan si Ugi</p>
</div>
<h2>CSS3 Text Zoom</h2>
<h2>IE7, IE8, IE9, IE10, Firefox 3, Firefox 4, Firefox 5, Safari, Chrome and Opera</h2>
<p class="info">Absolutely NO javascript</p>
<br /><br />
<ul class="menu">
<li class="p1"><a href="#url1"><span>Promotional Items</span></a></li>
<li class="p2"><a href="#url2"><span>Digital SLR Cameras</span></a></li>
<li class="p3"><a href="#url3"><span>Zoom Lenses and Filters</span></a></li>
<li class="p4"><a href="#url4"><span>Tripods and Monopods</span></a></li>
<li class="p5"><a href="#url5"><span>Flashguns and Accessories</span></a></li>
<li class="p6"><a href="#url6"><span>Photo Framing</span></a></li>
<li class="p7"><a href="#url7"><span>Wedding Photography</span></a></li>
<li class="p8"><a href="#url8"><span>Photograph Albums</span></a></li>
<li class="icons">
<b class="m1">Promotional Items</b>
<b class="m2">Digital SLR Cameras</b>
<b class="m3">Zoom Lenses and Filters</b>
<b class="m4">Tripods and Monopods</b>
<b class="m5">Flashguns and Accessories</b>
<b class="m6">Photo Framing</b>
<b class="m7">Wedding Photography</b>
<b class="m8">Photograph Albums</b>
</li>
</ul>
<br /><br /><br /><br /><br />
<p class="info">copyright © Buku Catatan si Ugi</p>
</div>
Keterangan :
Silahkan letakan Kode CSS kedalam tag <head> templat anda dan Kode HTML kedalam tag <body> atau dimanapun anda ingin memasang "CSS3 Teks Zoom" ini pada halaman website anda.Untuk text yang akan anda gunakan, silahkan letakan seperti contoh diatas pada text yang berwarna "cyan".
sumber: cssplay
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