Kami melanjutkan di mana kami tinggalkan di Video # 034 dan terus membangun area pencarian.
Kali ini kami berfokus pada status "terbuka" dari penelusuran, membangun elemen bentuk sebenarnya itu sendiri. Bidang penelusuran itu sendiri menggunakan jenis elemen formulir HTML5 "penelusuran" - yang biasanya memiliki beberapa gaya ubahsuaian yang terkait dengannya, tetapi karena kami menggunakan Normalisasi (Video # 011), itu bukan masalah bagi kami.
Kami membuat bit modular CSS baru (_buttons.scss) untuk digunakan sendiri dalam tombol gaya di seluruh situs. Lihat apa yang kami lakukan di sana? Setiap sedikit gaya yang secara mental masuk akal untuk diisolasi, kami membuat file baru untuk. Kita bisa melakukan ini sebanyak yang kita suka tanpa khawatir, karena semua file digabungkan bersama dengan Sass.
Tampilan tombol tiga dimensi dibuat hanya oleh sekumpulan bayangan kotak yang dipisahkan koma. Warnanya mudah diubah, karena menggunakan variabel (Anda dapat menebaknya!).
$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 di elemen input (hanya di dalam daripada di luar), melengkapi tampilan 3D. Jumlah bayangan diimbangi sesuai dengan variabel $ offset kami, yang mengarah ke beberapa konsistensi desain.
Tidak dalam video ini, tetapi kemudian, kami menemukan bahwa bayangan bagian dalam pada masukan jauh lebih mudah dilakukan hanya dengan dua batas daripada semua bayangan (batas bertemu satu sama lain pada suatu sudut). Sayangnya tidak mungkin pada tombol.
Gaya masukan-sisipan ini akhirnya menembus semua gaya masukan di seluruh situs, baik atau buruk.