Membuat Kotak Pencarian CSS3 Rocking
CSS3 adalah bahasa sheet style generasi berikutnya. Ini memperkenalkan banyak fitur baru dan menarik seperti bayangan, animasi, transisi, radius perbatasan dll. Meskipun spesifikasi belum selesai, banyak produsen browser sudah mulai mendukung banyak fitur baru.
Dalam tutorial ini, kita akan mengeksplorasi beberapa fitur seperti ini bayangan teks, batas-jari-jari, bayangan kotak dan transisi untuk membuat bidang pencarian goyang.
Versi photoshop dari bidang pencarian ini dibuat oleh Alvin Thong dan dapat diunduh dari sini. Saya telah mencoba membuat ulang bidang pencarian ini menggunakan CSS3 murni. Perlu dicatat bahwa tidak semua browser mendukung fitur CSS3 dan untuk mencoba tutorial ini, Anda harus menggunakan salah satu browser modern yang mendukung fitur CSS 3.
Siap? Mari kita mulai!
1. HTML5 Doctype
Kami akan mulai dengan markup HTML. Sangat sederhana, setelah DOCTYPE HTML5 dan deklarasi, kami memiliki a dengan ID yang dipanggil #pembungkus dalam . Ini dilakukan hanya untuk menentukan lebar kotak konten dan untuk menyelaraskannya ke tengah halaman.
Ini diikuti oleh a Begini tampilannya: Untuk membuat kotak besar di sekitar formulir, kami akan menambahkan gaya ke Bagian penting dari kode di sini adalah Penjelasan: Di sini, inset kata kunci menentukan apakah bayangan akan berada di dalam kotak. Dua nol pertama menunjukkan x-offset dan y-offset dan 3px menunjukkan blur. Berikutnya adalah deklarasi warna. Saya telah menggunakan nilai rgba di sini; rgba adalah singkatan dari red green blue dan alpha (opacity). Jadi 4 nilai di dalam tanda kurung menunjukkan jumlah merah, hijau, biru dan alfa (opacity). Anda akan melihat bahwa 5 set deklarasi bayangan telah dipukul bersama. Ini dapat dilakukan dengan memisahkan mereka dengan koma. Dua bayangan pertama menentukan efek "inner glow" putih dan deklarasi selanjutnya memberi kotak tampilan yang padat / tebal. Bermain-main dengan nilai-nilai ini untuk memahami cara kerjanya. Sekarang setelah kotaknya selesai, mari beralih ke menata bidang input. Gaya yang dideklarasikan untuk bidang input sangat mirip dengan yang dideklarasikan untuk kotak besar Penjelasan: Anda akan melihat bahwa saat ini, bayangan kabur telah disimpan pada 0 untuk mendapatkan bayangan yang tajam dan offset vertikal 5px digunakan. Dalam deklarasi berturut-turut, blur dipertahankan pada 0px tetapi warna dan offset-y telah diubah. Sekali lagi, bermain-main dengan nilai-nilai ini untuk mendapatkan hasil yang berbeda. Mari gaya tombol pencarian. Terlepas dari warna, sebagian besar tombol pencarian memiliki gaya yang sama dengan kotak luar. Jari-jari batas dan kotak-bayangan serupa telah digunakan pada tombol. Fitur baru yang diperkenalkan adalah Penjelasan: Dalam Keadaan aktif tombol memiliki sedikit lebih banyak perubahan. Dalam hal ini, saya telah memberikan tombol posisi absolut dan nilai 'atas' 5px. Ini telah dilakukan untuk memberikan tampilan yang lebih alami, sehingga terasa bahwa tombol tersebut sebenarnya ditekan hingga 5 piksel. Perubahan lain pada status aktif adalah perubahan warna latar dan bayangan. Perhatikan bahwa saya telah mengurangi y-offset bayangan untuk memberikannya tampilan yang 'ditekan-turun'. Berikut adalah kode untuk status aktif tombol kirim: Ini melengkapi kolom pencarian kami. Kami telah menggunakan beberapa fitur CSS3 baru. Berikut adalah CSS dan HTML lengkap dari bidang pencarian ini. Semoga Anda menikmati tutorial ini. Jangan ragu untuk bereksperimen dengan fitur-fitur ini dan jangan lupa untuk membagikan pemikiran Anda. Catatan Editor: Posting ini ditulis oleh Bharani M untuk Hongkiat.com. Bharani adalah seorang desainer / pengembang dari New Delhi, India.#utama. ID ini berisi gaya yang menentukan kotak putih besar di sekitar bidang input dan tombol pencarian. Ini dideklarasikan di dalamnya. Bentuknya memiliki bidang input teks dan stombol earch. Berikut adalah tampilan formulir tanpa gaya apa pun yang diterapkan padanya: 
Bidang Pencarian CSS3
2. Membuat kotak pembatas
#utama. Dari kode yang ditunjukkan di bawah ini, Anda akan melihat bahwa kotak telah diberi lebar 400px dan tinggi 50px. #main width: 400px; tinggi: 50px; latar belakang: # f2f2f2; padding: 6px 10px; perbatasan: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
batas-jari-jari deklarasi dan bayangan kotak pernyataan. Untuk membuat sudut bundar, kami telah menggunakan deklarasi radius perbatasan CSS3, "-moz-" dan "-webkit-" awalan peramban telah digunakan untuk memastikan bahwa ini berfungsi di peramban berbasis tokek dan webkit. Deklarasi bayangan kotak mungkin terlihat sedikit membingungkan tetapi sebenarnya sangat sederhana. box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Pratinjau
3. Styling bidang input
input [type = "text"] float: left; lebar: 230px; padding: 15px 5px 5px 5px; margin-top: 5px; margin-kiri: 3px; perbatasan: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
#utama. Kami telah menggunakan radius perbatasan yang sama (5px). Sekali lagi, banyak bayangan kotak telah dipukuli. box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
Pratinjau
4. Styling tombol kirim
input [type = "submit"]. solid float: left; kursor: pointer; lebar: 130px; padding: 8px 6px; margin-kiri: 20px; warna latar: # f8b838; warna: rgba (134, 79, 11, 0.8); text-transform: huruf besar; font-weight: bold; perbatasan: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: background 0.2s easy-out;
bayangan teks. text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
bayangan teks deklarasi, tiga nilai numerik pertama adalah masing-masing x-offset, y-offset dan blur. Nilai rgba menunjukkan warna bayangan. Dalam set deklarasi berikutnya (dipisahkan oleh koma), y-offset diberi nilai -1. Ini dilakukan untuk memberikan teks “bayangan batin” efek. Status hover / focus pada tombol submit memiliki nilai warna latar dan bayangan yang berbeda. Pratinjau
Status "aktif" untuk tombol
input [type = "submit"]. solid: active background: # f6a000; posisi: relatif; atas: 5px; perbatasan: 1px solid # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Kode Lengkap (CSS)
#main width: 400px; tinggi: 50px; latar belakang: # f2f2f2; padding: 6px 10px; perbatasan: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; lebar: 230px; padding: 15px 5px 5px 5px; margin-top: 5px; margin-kiri: 3px; perbatasan: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; kursor: pointer; lebar: 130px; padding: 8px 6px; margin-kiri: 20px; warna latar: # f8b838; warna: rgba (134, 79, 11, 0.8); text-transform: huruf besar; font-weight: bold; perbatasan: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: background 0.2s easy-out; input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"]. solid: active background: # f6a000; posisi: relatif; atas: 5px; perbatasan: 1px solid # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
