Oke, setelah lama tidak menulis tutorial baru (lagi buat website baru :D) sekarang saya akan menulis artikel lagi.
Kali ini kita akan mempelajari bagaimana membuat efek mouse hover pada images. Membuat gambar yang berubah, sebenarnya
cukup mudah apabila kita menggunakan Javascript, tapi kali ini saya akan mengajarkannya menggunakan CSS saja, tanpa
Javascript sama sekali.
Mengubah Posisi Background
Cara yang akan kita gunakan disini adalah mengubah posisi background. Jadi kita memiliki gambar tombol ketika berada
dalam posisi normal dan ketika mouse hover dalam 1 gambar. Nah nanti kita tinggal mengubah posisi background pada CSS nya saja sehingga terkesan tombol kita berubah. Bingung? lihat dulu contohnya seperti ini.
Oke pertama-tama anda save tombol dibawah ini, simpanlah dengan nama tombolhover.jpg
Setelah itu buatlah file index.html dan isilah dengan kode berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mouse Hover hanya dengan CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Mouse Hover, CSS" />
<meta name="Description" content="Mouse Hover hanya dengan CSS" />
<style type="text/css" media="all">
a.tombol {
border:0;
display: block;
width: 107px;
height: 31px;
background: url(tombolhover.jpg) no-repeat;
text-decoration: none;
}
a.tombol:hover {
background-position: 0 -31px;
}
</style>
</head>
<body>
<a href="http://www.dhimasronggobramantyo.com" class="tombol"></a>
</body>
</html>
Silahkan dicoba file index.htmlnya, mudah kan? oke sekarang saya jelaskan kenapa bisa begitu.
Fungsi CSS background-position
Jika anda perhatikan pada CSS pada class tombol a.tombol, kita mengatur width:107px dan height:31px, padahal width
dan height gambar kita ukurannya 107px x 62px. Sehingga pada background: url(tombolhover.jpg) yang ditampilkan hanya
selebar 107 px dan setinggi 31px, dimana kita akan dapatkan gambar yang paling atas saja. Lebih jelasnya silahkan lihat
ukuran gambarnya dibawah ini.
Jadi karena kita menampilkan background 31px yang paling atas, maka yang tampil adalah tombol yang atas.
Berikutnya untuk mouse hovernya a.tombol:hover kita menggunakan background-position: 0 -31px. Maksudnya ini kita mengubah
tampilan background pada koordinat y sebesar -31px. Jadi gambar yang ditampilkan berkurang 31px sehingga yang tampil
adalah tombol yang bawah.
Bagaimana? mudah kan, ini hanya dasarnya saja, anda dapat mengembangkannya sendiri. Selamat mencoba...
Jumat, 11 November 2011
Membuat Form Rapih Tanpa Tabel dengan CSS
Jika anda telah mempelajari bagaimana cara membuat Forms yang menggunakan prinsip Web Standards. Sekarang saya akan
mengajari bagaimana agar kita membuat forms yang teratur dan rapih tanpa menggunakan table. Kita hanya akan menggunakan
CSS saja.
Seperti yang kita ketahui, didalam prinsip Web Standards kita menggunakan tag <label> untuk menentukan keterangan dan
posisi fields. Nah dengan bantuan CSS kita akan memanfaatkan <label> untuk menyusun forms kita.
Kita akan membuat Forms seperti Forms komentar di situs ini, dan kita akan membuatnya tanpa Table. Oke langsung saja
kita coba, buatlah file HTML dengan nama forms.html dan file CSS dengan nama style.css. Isilah file style.css dengan
kode berikut ini:
form label {
display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}
form input, form textarea, form select {
width:auto;
margin:5px 0 0 10px;
}
.form br {
clear:left;
}
Dan untuk file forms.html nya isilah dengan kode berikut ini:
<style type="text/css" media="all">@import "style.css";</style>
<form method="post" action="#">
<p>
<label for="posnama">Nama Anda:</label> <input type="text" name="nama"
class="textbox" id="posnama" size="30" /><br />
<label for="pospesan">Komentar Anda:</label> <textarea name="komentar" cols="50"
rows="10" class="textarea" id="pospesan"></textarea><br />
<br /><br />
<input type="submit" name="submit" value="Kirim Komentar" class="buttonsubmit"
/>
</p>
</form>
Jalankan file forms.html, mudah kan? Oke sekarang akan saya jelaskan satu persatu.
File style.css
Yang perlu diperhatikan disini adalah deklarasi untuk label, dimana kita beri float: left; yang memungkinkan tag label
berada disebelah kiri dari field (input) Jangan lupa kita perlu mengatur panjangnya label dengan width: 150px;. Oke
sekarang untuk tag input saya membuat width:auto; agar berapapun lebar bidang yang tersisa, input selalu bisa menempati
bidang terebut. Karena form tidak selalu input saja maka saya juga memberikan kode yang sama untuk textarea dan select.
Untuk tag <br /> yang selalu kita berikan setelah input kita berikan clear:left; agar kode berikutnya berada dibawahnya
tidak disampingnya.
Bagaimana mudah bukan? kode HTML kita cukup singkat, kita tidak memerlukan <table> sama sekali. Dan yang pasti kode
tersebut berfungsi disemua browser yang ada :)
mengajari bagaimana agar kita membuat forms yang teratur dan rapih tanpa menggunakan table. Kita hanya akan menggunakan
CSS saja.
Seperti yang kita ketahui, didalam prinsip Web Standards kita menggunakan tag <label> untuk menentukan keterangan dan
posisi fields. Nah dengan bantuan CSS kita akan memanfaatkan <label> untuk menyusun forms kita.
Kita akan membuat Forms seperti Forms komentar di situs ini, dan kita akan membuatnya tanpa Table. Oke langsung saja
kita coba, buatlah file HTML dengan nama forms.html dan file CSS dengan nama style.css. Isilah file style.css dengan
kode berikut ini:
form label {
display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}
form input, form textarea, form select {
width:auto;
margin:5px 0 0 10px;
}
.form br {
clear:left;
}
Dan untuk file forms.html nya isilah dengan kode berikut ini:
<style type="text/css" media="all">@import "style.css";</style>
<form method="post" action="#">
<p>
<label for="posnama">Nama Anda:</label> <input type="text" name="nama"
class="textbox" id="posnama" size="30" /><br />
<label for="pospesan">Komentar Anda:</label> <textarea name="komentar" cols="50"
rows="10" class="textarea" id="pospesan"></textarea><br />
<br /><br />
<input type="submit" name="submit" value="Kirim Komentar" class="buttonsubmit"
/>
</p>
</form>
Jalankan file forms.html, mudah kan? Oke sekarang akan saya jelaskan satu persatu.
File style.css
Yang perlu diperhatikan disini adalah deklarasi untuk label, dimana kita beri float: left; yang memungkinkan tag label
berada disebelah kiri dari field (input) Jangan lupa kita perlu mengatur panjangnya label dengan width: 150px;. Oke
sekarang untuk tag input saya membuat width:auto; agar berapapun lebar bidang yang tersisa, input selalu bisa menempati
bidang terebut. Karena form tidak selalu input saja maka saya juga memberikan kode yang sama untuk textarea dan select.
Untuk tag <br /> yang selalu kita berikan setelah input kita berikan clear:left; agar kode berikutnya berada dibawahnya
tidak disampingnya.
Bagaimana mudah bukan? kode HTML kita cukup singkat, kita tidak memerlukan <table> sama sekali. Dan yang pasti kode
tersebut berfungsi disemua browser yang ada :)
Membuat Pop up Menu Dengan CSS Tanpa JavaScript
Kali ini kita akan membahas bagaimana membuat Pop Up menu atau ada yang menyebutnya Drop Down atau apalah namanya. Yang jelas kita akan membuat seperti Pop Up Menu ini. Bagaimana menarik kan? Dalam contoh tersebut kita hanya menggunakan HTML dan CSS tanpa menggunakan Javascript sama sekali, jadi kita tidak perlu khawatir dengan kompatibilitasnya dengan browser-browser yang ada.
Memanfaatkan display dan hover
Didalam CSS kita mengenal display nah display ini memiliki nilai visible yang mengakibatkan tampilan menjadi tidak tampak. Oke sebelumnya kita akan membuat vertical menu terlebih dahulu, jika anda binging dalam membuat vertical menu silahkan baca Membuat Menu dengan CSS terlebih dahulu. Oke pertama-tama kita membuat vertical menu terlebih dahulu yang akan menjadi pop up menu kita. Silahkan ketikkan kode berikut dan simpan dengan nama popup.html
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
Jika anda lihat hasilnya maka kita membuat vertical menu dan sebuah link Produk. Nah nanti yang kita lakukan adalah kita membuat Vertical Menu nya menghilang dan ketika mouse kita melewati Produk maka vertical menu nya muncul. Oke sekarang kita akan menghilangkan Vertical Menu nya.
Kita cukup menambahkan display:none untuk menghilangkan vertical menunya. Disini kita memasang display:none; pada ul untuk menghilangkan keseluruhan vertical menu. Seperti inilah kodenya untuk menghilangkan Vertical Menu:
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
Hasilnya seperti ini
Oke, jika anda coba kode diatas maka Vertical Menu nya telah hilang. Nah untuk memunculkannya lagi kita bisa menggunakan display:block;. Silahkan coba kode berikut ini:
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
Hasilnya seperti ini
Pop Up Menu tidak dapat berjalan di IE 6, karena itu cobalah menggunakan Firefox atau IE 7. Tapi tenang saja nanti ada caranya agar dapat bekerja di IE 6
Bagaimana Cara Kerjanya
Jika kita perhatikan kode diatas, kita menambahkan #menu:hover, #menu:hover ul yang isinya adalah display:block;. Nah yang dimaksud dengan #menu:hover, #menu:hover ul adalah kita mengubah #menu:hover dan #menu:hover: ul menjadi display:block;. Seperti yang kita ketahui :hover merupakan kondisi dimana ketika mouse melewati suatu class / id maka kondisinya dijalankan (dalam hal ini mouse melewati #menu dan #menu ul). Pada kode diatas posisi ul didalam menu, maka jika kita melewati #menu maka otomatis kita melewati ul. Sehingga display:block; dijalankan untuk #menu dan ul. Yang mengakibatkan Vertical Menu kita muncul. Bagaimana mudah kan?
Membuat Pop up Menu untuk Internet Explorer 6
Seperti yang saya bilang tadi, Pop Up menu tidak jalan di IE 6. Hal ini dikarenakan IE 6 hanya mengenal :hover digunakan didalam tag <a>, jadi kita tidak bisa menggunakannya di tag lainnya. Tapi untunglah orang bule pintar-pintar. Seseorang bernama Peter Nederlof telah melakukan (yang kita kenal dengan istilah CSS Hack). Ia membuat sebuah file Javascript yang dikenal dengan istilah csshover.htc.
Jadi anda cukup memasang file csshover.htc ini untuk menggunakannya. Saya tidak tau isi dari file csshover.htc ini karena menggunakan Javascript. Nah anda dapat mendownload file csshover.htc terlebih dahulu. Untuk menggunakannya anda cukup memasangnya sebgai behavior di body. Oke silahkan coba kode selengkapnya berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="all">
body {
behavior: url(csshover.htc);
}
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul> </div>
</body>
</html>
Silahkan anda coba dan jalankan di IE 6 atau IE 5. Sekarang Pop Up menu kita berfungsi di semua browser. Selamat mencoba...
Memanfaatkan display dan hover
Didalam CSS kita mengenal display nah display ini memiliki nilai visible yang mengakibatkan tampilan menjadi tidak tampak. Oke sebelumnya kita akan membuat vertical menu terlebih dahulu, jika anda binging dalam membuat vertical menu silahkan baca Membuat Menu dengan CSS terlebih dahulu. Oke pertama-tama kita membuat vertical menu terlebih dahulu yang akan menjadi pop up menu kita. Silahkan ketikkan kode berikut dan simpan dengan nama popup.html
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
Jika anda lihat hasilnya maka kita membuat vertical menu dan sebuah link Produk. Nah nanti yang kita lakukan adalah kita membuat Vertical Menu nya menghilang dan ketika mouse kita melewati Produk maka vertical menu nya muncul. Oke sekarang kita akan menghilangkan Vertical Menu nya.
Kita cukup menambahkan display:none untuk menghilangkan vertical menunya. Disini kita memasang display:none; pada ul untuk menghilangkan keseluruhan vertical menu. Seperti inilah kodenya untuk menghilangkan Vertical Menu:
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
Hasilnya seperti ini
Oke, jika anda coba kode diatas maka Vertical Menu nya telah hilang. Nah untuk memunculkannya lagi kita bisa menggunakan display:block;. Silahkan coba kode berikut ini:
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
Hasilnya seperti ini
Pop Up Menu tidak dapat berjalan di IE 6, karena itu cobalah menggunakan Firefox atau IE 7. Tapi tenang saja nanti ada caranya agar dapat bekerja di IE 6
Bagaimana Cara Kerjanya
Jika kita perhatikan kode diatas, kita menambahkan #menu:hover, #menu:hover ul yang isinya adalah display:block;. Nah yang dimaksud dengan #menu:hover, #menu:hover ul adalah kita mengubah #menu:hover dan #menu:hover: ul menjadi display:block;. Seperti yang kita ketahui :hover merupakan kondisi dimana ketika mouse melewati suatu class / id maka kondisinya dijalankan (dalam hal ini mouse melewati #menu dan #menu ul). Pada kode diatas posisi ul didalam menu, maka jika kita melewati #menu maka otomatis kita melewati ul. Sehingga display:block; dijalankan untuk #menu dan ul. Yang mengakibatkan Vertical Menu kita muncul. Bagaimana mudah kan?
Membuat Pop up Menu untuk Internet Explorer 6
Seperti yang saya bilang tadi, Pop Up menu tidak jalan di IE 6. Hal ini dikarenakan IE 6 hanya mengenal :hover digunakan didalam tag <a>, jadi kita tidak bisa menggunakannya di tag lainnya. Tapi untunglah orang bule pintar-pintar. Seseorang bernama Peter Nederlof telah melakukan (yang kita kenal dengan istilah CSS Hack). Ia membuat sebuah file Javascript yang dikenal dengan istilah csshover.htc.
Jadi anda cukup memasang file csshover.htc ini untuk menggunakannya. Saya tidak tau isi dari file csshover.htc ini karena menggunakan Javascript. Nah anda dapat mendownload file csshover.htc terlebih dahulu. Untuk menggunakannya anda cukup memasangnya sebgai behavior di body. Oke silahkan coba kode selengkapnya berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="all">
body {
behavior: url(csshover.htc);
}
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul> </div>
</body>
</html>
Silahkan anda coba dan jalankan di IE 6 atau IE 5. Sekarang Pop Up menu kita berfungsi di semua browser. Selamat mencoba...
Rabu, 09 November 2011
Apa Itu CSS(Cascading Style Sheets.....???
 |
| Cascading Style Sheets |
"YA". Pun, kalau semisal belum sekarang jadi sudah. Karena Cascading Style Sheet adalah suatu
teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan
menggunakan Metode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan
yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat).
Jelas, dengan sedikit berfikir dan menggunakan logika maka anda akan mendapatkan hasil yang
memuaskan, maka dari itu datang terus ke blog in jika anda benar-benar ingin mempelajari CSS, kalian coba langsung, kemudian jika bisa
dikembangkan, sehingga kalau misalnya anda ingin sedikit memodifikasikan kode yang telah dibuat di
dalamnya sangatlah gampang, apalagi bla...bla...bla... dan bla..bla….(wah... bakat ceramah saya tiba2
kambuh (",) ma'af) ya udah pokoknya CSS itu digunakan untuk memperindah tampilan situs, terserah
anda mo mendefinisikannya bagaimana? (lihat definisi saya yang di tebalkan-kan).
Bagi anda yang baru dalam bidang ini jangan khawatir, karena memang tutorial ini sangat mendasar,
tetapi setidaknya sudah menguasai dasar-dasar HTML. Dan bagi anda yang sudah mahir jangan ngejek
dunks, toh, saya sudah ngaku ini tutorial untuk yang "pemula saja". Hehehe... :-) peace, bro's.
Ya udah, Baca aja deh... syukur-syukur nambah pengetahuan atawa temen dikala gak bisa tidur, gitu baca
tutorial ini langsung (Zzz... Zzz... Zz... grok.. grok...) tertidur deh hehehe... kelihatannya yang belakangan
disebut yang paling sering dipilih.
Langganan:
Postingan (Atom)