Effect Warna Background Saat Hover
Sebuah proyek iseng membuat "Demonstrasi" menciptakan sebuah template mini, atau dasar untuk menampilkan sebuah indeks informasi dengan warna background yang dapat berubah saat di hover.
Metode ini menggunakan satu gambar latar belakang dan memungkinkan template indeks informasi ini dibuat vertikal bersamaan dengan konten.
Anda juga dapat membuatnya dalam berbagai ukuran, asalkan konten dapat disesuai dengan lebar gambar background yang merupakan sebagai lebar tab.
- Firefox
Get Firefox with Google Toolbar
The award-winning Web browser just got better. It's free and easy to use. Join the millions of people worldwide enjoying a better Web experience.
Download Firefox - Free
- Explorer
Get Internet Explorer 7 for your operating system
Upgrade with confidence. Get downloads for Internet Explorer 7, including recommended updates as they become available.
Internet Explorer 7 Download
- Opera
Your life at your fingertips
Try Speed Dial™ in Opera's newest Web browser, Opera 9.20. It makes the fastest even faster.
Download Opera for Windows
Berikut ini adalah Gambar latar belakang yang di gunakan :
Letakan URL Gambar latar belakang tersebut kedalam Kode CSS berikut ini, Lihat Text yang berwarna merah.
#tabs {padding:0; margin:25px 0 0 15px; list-style:none;}
#tabs li {display:inline; padding:0; background:#f8f8f8; float:left; margin-right:35px; position:relative;}
#tabs li.one {width:190px;}
#tabs li.two {width:240px;}
#tabs li.three {width:190px;}
#tabs li a.outer-link {background:#f8f8f8; display:block; width:100%; position:relative;}
#tabs table {border-collapse:collapse; margin:-1px;}
#tabs li b {display:block; background:transparent url(background_tab_top.gif) no-repeat 0 0; padding:2px 0 0 5px; height:15px; font-size:0.9em; overflow:hidden;}
#tabs li div {border:1px solid #888; border-width:0 1px 1px 1px; padding:20px 5px 5px 5px;}
#tabs li h3 {padding:0; margin:0; font-family:georgia, serif; font-size:17px;}
#tabs li p {font-family:verdana, serif; font-size:11px; line-height:1.5em;}
#tabs li a {color:#000; text-decoration:none;}
#tabs li a.inner-link {color:#c00; text-decoration:none;}
#tabs li a.inner-link:hover {text-decoration:underline; cursor:default;}
#tabs li.one:hover, #tabs li.one a.outer-link:hover {background:#fef;}
#tabs li.two:hover, #tabs li.two a.outer-link:hover {background:#cff;}
#tabs li.three:hover, #tabs li.three a.outer-link:hover {background:#ffc;}
</style>
Untuk mengimplementasikan Background Hover Color ini kedalam halaman website anda, silahkan gunakan syntax seperti contoh dalam Kode HTML berikut ini.
<li class="one">
<b>Firefox</b>
<div>
<h3><a class="inner-link" href="http://services.google.com/toolbar/firefox?hl=en_GB">Get Firefox with Google Toolbar</a></h3>
The award-winning Web browser just got better. It's free and easy to use. Join the millions of people worldwide enjoying a better Web experience.
<a class="inner-link" href="http://www.mozilla.com/en-US/firefox/">Download Firefox - Free</a>
<img alt="Mozilla Firefox" src="mozilla.gif" title="Mozilla Firefox" />
</div>
</li>
<li class="two">
<b>Opera</b>
<div>
<h3>Your life at your fingertips</h3>
Try Speed Dial� in Opera's newest Web browser, Opera 9.20. It makes the fastest even faster.
<a class="inner-link" href="http://www.opera.com/download/get.pl?id=&thanks=true&sub=true">Download Opera for Windows</a>
<img alt="Opera for Windows" src="opera.gif" title="Opera for Windows" />
</div>
</li>
<li class="three">
<b>Explorer</b>
<div>
<h3>Get Internet Explorer 7 for your operating system</h3>
Upgrade with confidence. Get downloads for Internet Explorer 7, including recommended updates as they become available.
<a class="inner-link" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 7 Download</a>
<img alt="Internet Explorer 7" src="ie7.gif" title="Internet Explorer 7" />
</div>
</li>
</ul>
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