Membuat Search Box 3D dengan CSS3
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
Inilah hasil sebelum bertemu dengan css :
Langkah 2 : Buat file css untuk membuat boxnya
Ini adalah hasilnya :
Langkah 3 : Membuat scrIpt css untuk inputnya
Inilah hasilnya :
Langkah 4 : Buat script css untuk submit
Inilah hasilnya :
Sudah terlihat bukan bentuknya? Tapi coba klik submit search. Belum terjadi apa-apa kan? Oleh karena itu, tambahkan script :
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 :)
16 Juni 2014
Webinar Gratis 2024
Selanjutnya Pada Bulan Maret 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Webinar Selanjutnya Mei 2024
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
