Mencipta Kotak Mencari CSS3 Rocking
CSS3 adalah bahasa lembaran gaya generasi akan datang. Ia memperkenalkan banyak ciri baru dan menarik seperti bayang-bayang, animasi, peralihan, radius sempadan dan sebagainya. Walaupun spesifikasi belum dimuktamadkan, banyak pengeluar pelayar telah mula menyokong banyak ciri-ciri baru.
Dalam tutorial ini, kami akan meneroka beberapa ciri-ciri seperti bayang-bayang teks, jejari sempadan, kotak-bayang-bayang dan peralihan untuk membuat medan carian goyang.
Versi photoshop dalam bidang carian ini dibuat oleh Alvin Thong dan boleh dimuat turun dari sini. Saya cuba mencipta semula bidang carian ini menggunakan CSS3 tulen. Perlu diperhatikan bahawa tidak semua penyemak imbas menyokong ciri CSS3 dan untuk mencuba tutorial ini, anda harus menggunakan salah satu pelayar moden yang menyokong ciri CSS 3.
Sedia? Mari kita mulakan!
1. HTML5 Doctype
Kami akan bermula dengan markup HTML. Ia sangat mudah, selepas Doktrin HTML5 dan pengisytiharan, kami mempunyai a dengan ID dipanggil #wrapper dalam . Ini dilakukan hanya untuk menentukan lebar kotak kandungan dan menyelaraskannya ke tengah halaman.
Ini diikuti oleh a Begini bagaimana kod tersebut kelihatan seperti: Untuk membuat kotak besar di sekitar borang, kami akan menambah gaya kepada Sekeping kod penting di sini ialah Penjelasan: Di sini, kata kunci inset menentukan jika bayangan akan berada di dalam kotak. Dua sifar pertama menunjukkan x-offset dan y-offset dan 3px menandakan kabur. Seterusnya adalah perisytiharan warna. Saya telah menggunakan nilai rgba di sini; rgba bermaksud biru hijau dan alpha merah (opacity). Jadi 4 nilai di dalam kurungan menunjukkan jumlah merah, hijau, biru dan alpha (opacity). Anda akan mendapati bahawa 5 set pengisytiharan bayangan telah disatukan bersama. Ini boleh dilakukan dengan memisahkannya dengan koma. Dua bayang pertama menonjolkan kesan "cahaya dalaman" putih dan deklarasi seterusnya akan memberikan kotak yang padat /. Bermain-main dengan nilai-nilai ini untuk memahami bagaimana ia berfungsi. Sekarang bahawa kotak itu selesai, mari teruskan ke styling field input. Gaya yang diisytiharkan untuk medan input agak sama dengan yang ditakrifkan untuk kotak besar Penjelasan: Anda akan melihat bahawa kali ini, bayang-bayang kabur telah disimpan pada 0 untuk mendapatkan bayang-bayang tajam dan offset menegak 5px digunakan. Dalam perisytiharan berturut-turut, blur telah disimpan pada 0px tetapi warna dan y-offset telah berubah. Sekali lagi, bermain-main dengan nilai ini untuk mendapatkan hasil yang berbeza. Mari gaya butang carian. Selain warna, butang carian mempunyai gaya yang sama dengan kotak luar. Radius sempadan dan bayang-bayang kotak yang sama telah digunakan pada butang. Ciri baru yang diperkenalkan ialah Penjelasan: Di dalam Keadaan aktif butang mempunyai sedikit perubahan. Dalam ini, saya telah memberikan butang kedudukan mutlak dan nilai 'atas' 5px. Ini telah dilakukan untuk memberikan rupa yang lebih semula jadi, sehingga merasakan bahawa butang itu sebenarnya telah ditolak sebanyak 5 piksel. Perubahan lain pada keadaan aktif adalah warna latar belakang dan bayang-bayang. Perhatikan bahawa saya telah mengurangkan y offset bayang-bayang untuk memberikannya 'ditekan-turun' rupa. Berikut adalah kod untuk keadaan aktif butang hantar: Ini melengkapkan medan carian kami. Kami telah menggunakan beberapa ciri CSS3 yang baru. Berikut adalah CSS dan HTML lengkap medan carian ini. Harap anda menikmati tutorial ini. Jangan ragu untuk bereksperimen dengan ciri-ciri ini dan jangan lupa berkongsi pendapat anda. Nota editor: Jawatan ini ditulis oleh Bharani M untuk Hongkiat.com. Bharani adalah pereka / pemaju dari New Delhi, India.#main. ID ini mengandungi gaya yang menentukan kotak putih besar di sekitar medan input dan butang carian. Ini diisytiharkan di dalamnya. Borang ini mempunyai medan input teks dan sbutang earch. Inilah cara bentuknya kelihatan tanpa apa-apa gaya yang digunakan untuknya: 
Field Search CSS3
2. Membuat kotak terikat
#main. Dari kod yang ditunjukkan di bawah, anda akan melihat bahawa kotak telah diberikan lebar 400px dan ketinggian 50px. #main width: 400px; ketinggian: 50px; latar belakang: # f2f2f2; padding: 6px 10px; sempadan: 1px pepejal # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; jejari sempadan: 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;
jejari sempadan pengisytiharan dan kotak-bayang pengisytiharan. Untuk mencipta sudut bulat, kami telah menggunakan perisytiharan radius sempadan CSS3, awalan pelayar "-moz-" dan "-webkit-" telah digunakan untuk memastikan bahawa ini berfungsi dalam pereka berasaskan gecko dan webkit. Pengisytiharan kotak bayangan mungkin kelihatan sedikit mengelirukan tetapi sebenarnya sangat mudah. 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;
Pratonton
3. Menggayakan medan input
input [type = "text"] float: left; lebar: 230px; padding: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; sempadan: 1px pepejal # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; jejari sempadan: 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;
#main. Kami telah menggunakan jejari sempadan yang sama (5px). Sekali lagi, pelbagai bayang-bayang telah menjadi kelab. box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
Pratonton
4. Menggayakan butang hantar
input [type = "submit"]. solid float: left; kursor: penunjuk; lebar: 130px; padding: 8px 6px; margin-left: 20px; warna latar belakang: # f8b838; warna: rgba (134, 79, 11, 0.8); teks-transform: huruf besar; font-weight: bold; sempadan: 1px pepejal # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; jejari sempadan: 5px; teks-bayangan: 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 # ccc; -webkit-transition: background 0.2s easy-out;
bayang-bayang teks. teks-bayangan: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
bayang-bayang teks perisytiharan, tiga nilai angka pertama adalah x-offset, y-offset dan blur masing-masing. Nilai rgba menunjukkan warna bayangan. Dalam set deklarasi seterusnya (dipisahkan oleh koma), y-offset diberikan nilai -1. Ini dilakukan untuk memberi teks itu “bayang dalaman” kesan. Keadaan hover / focus dari butang penyerahan mempunyai nilai yang berbeza dari warna latar belakang dan bayang-bayang. Pratonton
"Aktif" untuk butang
input [type = "submit"]. solid: active background: # f6a000; kedudukan: relatif; atas: 5px; sempadan: 1px pepejal # 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 # ccc;
Kod Lengkap (CSS)
#main width: 400px; ketinggian: 50px; latar belakang: # f2f2f2; padding: 6px 10px; sempadan: 1px pepejal # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; jejari sempadan: 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-left: 3px; sempadan: 1px pepejal # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; jejari sempadan: 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"]. pepejal float: left; kursor: penunjuk; lebar: 130px; padding: 8px 6px; margin-left: 20px; warna latar belakang: # f8b838; warna: rgba (134, 79, 11, 0.8); teks-transform: huruf besar; font-weight: bold; sempadan: 1px pepejal # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; jejari sempadan: 5px; teks-bayangan: 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 # 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"]. pepejal: aktif latar belakang: # f6a000; kedudukan: relatif; atas: 5px; sempadan: 1px pepejal # 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 # ccc;
