FishEye adalah sebuah fitur yang built-in pada sistem operasi buatan Apple yaitu Mac OSX. FishEye melakukan pembesaran resolusi icon pada saat pointer mouse lewat di atas icon yang dimaksud. Dengan begitu, pengguna dapat benar-benar yakin kalau icon tersebut akan ia klik. FishEye pada situs web biasanya dibuat menggunakan JavaScript. Namun, kali ini saya akan memberikan tutorial membuat FishEye menggunakan CSS. Caranya ialah:
#menubar {
height: 50px;
width: 750px;
font-family: Tahoma, "Trebuchet MS", "Courier New";
font-size: 12px;
color: #000000;
}
div#menubar div#tombol1 {
text-align: center;
font-family: Tahoma, "Trebuchet MS", "Courier New";
padding: 10px;
height: 50px;
width: 750px;
}
div#tombol1 a:link{
font-family: Tahoma, "Trebuchet MS", "Courier New";
font-size: 16px;
color: #000000;
text-decoration: none;
text-align: center;
height: 50px;
width: 200px;
padding: 8px;
}
div#tombol1 a:visited {
font-family: Tahoma, "Trebuchet MS", "Courier New";
font-size: 16px;
color: #000000;
text-decoration: none;
text-align: center;
padding: 8px;
height: 50px;
width: 200px;
font-weight: bold;
}
div#tombol1 a:hover {
font-family: Tahoma, "Trebuchet MS", "Courier New";
font-size: 28px;
color: #000000;
text-decoration: none;
text-align: center;
padding: 8px;
vertical-align: top;
}
2. Selanjutnya, buat file index.html dan ketikkan listing berikut ini:
<html>
<head>
<title>Black Green Force - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menubar">
<div id="tombol1">
<a href="#">Home</a>
<a href="#">Artikel</a>
<a href="#">Materi</a>
<a href="#">Berita</a>
<a href="#">Testimonial</a>
<a href="#">Kontak</a>
<a href="#">Links</a>
</div>
</div>
</body>
</html>
3. Jalankan file index.html, maka Anda akan melihat FishEye ala Mac OS X menggunakan CSS berhasil dijalankan. Seperti biasa, lakukanlah improvisasi!
