Effect Warna Background Saat Hover | Buku Catatan si Ugi

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.


Demo Background Hover Color :

  • 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

    Mozilla Firefox
  • 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

    Internet Explorer 7
  • 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

    Opera for Windows




More Detail :

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.

Kode CSS
<style type="text/css">
#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>
Silahkan letakan Kode CSS tersebut kedalam tag <head> templat anda.

Untuk mengimplementasikan Background Hover Color ini kedalam halaman website anda, silahkan gunakan syntax seperti contoh dalam Kode HTML berikut ini.

Kode HTML
<ul id="tabs">
<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=&amp;thanks=true&amp;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







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan