CSS_tombol_3D

Document Sample
CSS_tombol_3D Powered By Docstoc
					2005-2007 Syarif Winata

Membuat Tombol 3D dengan CSS
Author E-Mail Website Published : : : : Syarif Winata syarifwinata@softhome.net http://syarwin.wordpress.com April, 2007

Seluruh dokumen ini dapat digunakan untuk keperluan Pendidikan. Tidak diperkenankan digunakan untuk tujuan kepentingan yang bersifat profit. Penulisan ulang harus melalui ijin Penulis.

Membuat tombol di Halaman sebuah website bisa menggunakan aplikasi grafis seperti halnya adobe photoshop. Namun dengan CSS pun ternyata bisa dengan bentuk 3D. Caranya mudah dan dalam hal ini saya menggunakan Macromedia Dreamweaver untuk membuatnya. 1. Buka aplikasi Macromedia Dreamweaver

2. Lakukan Klik Kanan kemudian Pilih CSS Styles

New CSS Style

1

2005-2007 Syarif Winata

3. Isi form yang disediakan berikut option-option lain seperti pda gambar berikut ini

4. Isi form yang disediakan seperti Type, Background, untuk Block cari Display = Block.

5. Untuk bagian border contoh isiannya adalah sebagai berikut :

2

2005-2007 Syarif Winata

6. Jika sudah klik OK dan DONE. 7. Lakukan seperti Langkah No.2 yakni KLIK Kanan, kemudian pilih CSS Styles Edit Style Sheet

8. Pilih Class yang sudah kita buat dalam hal ini adalah .tombolku, kemudian klik Duplicate

9. Tambahkan Kata :hover , dan pilih Use CSS Selector dan Klik OK

10. Layar akan menampilkan seperti pada Langkah No.8, namun kali ini terdapat 2 Class, pilih class .tombolku:hover dan pilih edit

3

2005-2007 Syarif Winata

11. Secara otomatis akan ditampilkan seperti pada langkah No.4, yang perlu kita ubah adalah bagian Background saja. Jika sudah pilih OK dan lanjut dengan DONE. 12. Pada lembar kerja buat lah sebuah text yang akan kita beri LINK.

13. Block tulisan tersebut kemudian pada bagian Propertis berikan Link misalnya kita beri link ke http://www.google.com

14. Jika sudah, block tulisan tadi kemudian pada bagian bawah layer cari kode <a>, pilih kode tersebut dan lakukan klik Kanan.

15. Pilih Set Class

tombolku

16. Simpan file anda, dan coba di browser hasilnya adalah :

Nah .. silahkan dicoba

4


				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:26
posted:7/5/2009
language:Indonesian
pages:4