Kami mengambil dari tempat kami berhenti dalam Video # 034 dan terus membina kawasan carian.
Kali ini kita memfokuskan pada keadaan "terbuka" carian, membina elemen bentuk sebenarnya sendiri. Medan carian itu sendiri menggunakan elemen elemen bentuk HTML5 "carian" - yang biasanya mempunyai beberapa gaya khusus yang berkaitan dengannya, tetapi kerana kami menggunakan Normalize (Video # 011), itu tidak menjadi masalah bagi kami.
Kami membuat sedikit CSS modular (_buttons.scss) untuk kegunaan kami sendiri dalam butang gaya di seluruh laman web. Lihat apa yang kita buat di sana? Sebilangan gaya yang secara mental masuk akal untuk diasingkan, kami membuat fail baru untuk. Kita boleh melakukan ini sesuka hati tanpa rasa bimbang, kerana failnya semuanya digabungkan bersama dengan Sass pula.
Tampilan butang tiga dimensi dibuat hanya dengan sejumlah bayangan kotak yang dipisahkan dengan koma. Warnanya mudah diubah, kerana penggunaan (anda dapat meneka!) Pemboleh ubah.
$bottomSide: #3852b1; $rightSide: #203891; .button, #rcp_submit ( border: 0; // kill default styling background: #4e68c7; box-shadow: // right side // bottom 1px 0px 1px $rightSide, 0px 1px 1px $bottomSide, 2px 1px 1px $rightSide, 1px 2px 1px $bottomSide, 3px 2px 1px $rightSide, 2px 3px 1px $bottomSide, 4px 3px 1px $rightSide, 3px 4px 1px $bottomSide, 5px 4px 1px $rightSide, 4px 5px 1px $bottomSide, 6px 5px 1px $rightSide; )Kami menggemakan gaya yang sama dalam elemen input (hanya di bahagian dalam dan bukan di luar), melengkapkan tampilan 3D. Jumlah bayangan yang diimbangi sepadan dengan pemboleh ubah $ offset kami, yang membawa kepada beberapa konsistensi reka bentuk.
Bukan dalam video ini, tetapi kemudian, kita mengetahui bahawa bayang-bayang dalaman pada input jauh lebih mudah dilakukan hanya dengan dua sempadan dan bukannya semua bayang-bayang (perbatasan saling bertemu pada sudut). Tidak mungkin pada butang malangnya.
Gaya input sisipan ini akhirnya meresap semua gaya input di seluruh laman web, menjadi lebih baik atau lebih buruk.