Membuat Search Box 3D dengan CSS3

16/06/2014    Aulia Rahmah Alhafidz    2690    Website

Halo semua :) CSS3 adalah bahasa style sheet generasi berikutnya. Hal ini memperkenalkan banyak fitur baru dan menarik seperti bayangan, animasi, transisi, border-radius dll Meskipun spesifikasi belum selesai, banyak produsen browser sudah mulai mendukung banyak fitur baru. 

Dalam tutorial ini, kita akan membahas beberapa fitur tersebut seperti text-shadow, border-radius, kotak-bayangan dan transisi untuk membuat kolom pencarian goyang. Langsung saja yaa
 
Langkah 1 : Buat file html dan beri nama index.html
css3-search-box
 
Inilah hasil sebelum bertemu dengan css :
css3-search-box
 
Langkah 2 : Buat file css untuk membuat boxnya
css3-search-box
Ini adalah hasilnya :
css3-search-box
 
Langkah 3 : Membuat scrIpt css untuk inputnya
css3-search-box
Inilah hasilnya :
css3-search-box
 
Langkah 4 : Buat script css untuk submit
css3-serach-box
Inilah hasilnya :
css3-search-box
 
Sudah terlihat bukan bentuknya? Tapi coba klik submit search. Belum terjadi apa-apa kan? Oleh karena itu, tambahkan script :
 
css3-search-box
Sekarang coba jalankan di browser dan klik submit search, lihatkah apa yang terjadi.
Ingin mencobanya? Download filenya disini.
Sekian artikel hari ini semoga bermanfaat ya :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow