Ми продовжуємо там, де зупинились у Відео № 034, і продовжуємо будувати область пошуку.
Цього разу ми зосереджуємося на “відкритому” стані пошуку, будуючи фактичні елементи форми самі. У самому полі пошуку використовується тип елемента форми HTML5 "пошук", який зазвичай має певний власний стиль, але з огляду на те, що ми використовуємо Normalize (Відео # 011), це не є проблемою для нас.
Ми створюємо новий модульний біт CSS (_buttons.scss) для власного використання в стилістичних кнопках на сайті. Бачите, що ми там робимо? Для будь-якого стилю, який подумки має сенс бути ізольованим, ми створюємо новий файл для. Ми можемо робити це скільки завгодно, не турбуючись, оскільки файли все одно об’єднуються разом із Sass.
Тривимірний вигляд кнопок створений лише цілою групою тіньових вікон, розділених комами. Кольори легко змінити, оскільки використовуйте (як ви вже здогадалися!) Змінні.
$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; )Ми повторюємо той самий стиль у вхідному елементі (лише всередині, а не зовні), завершуючи тривимірний вигляд. Сума, яку тіні зміщують, відповідає нашій змінній $ offset, що призводить до певної послідовності дизайну.
Не в цьому відео, але пізніше ми з’ясуємо, що внутрішні тіні на входах набагато простіше зробити лише двома межами замість усіх тіней (межі зустрічаються між собою під кутом). На жаль, кнопка неможлива.
Цей стиль введення-введення закінчує проникненням усіх стилів введення на сайті, на краще чи гірше.