Продължаваме там, където сме спрели във видео № 034, и продължаваме да изграждаме зоната за търсене.
Този път се фокусираме върху „отвореното“ състояние на търсенето, като изграждаме самите елементи на действителната форма. Самото поле за търсене използва HTML5 елемента от формуляра тип „търсене“ - който обикновено има някакъв персонализиран стил, свързан с него, но тъй като използваме „Нормализиране“ (Видео # 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; )Ние повтаряме същия стил във входния елемент (само отвътре, а не отвън), завършвайки 3D изгледа. Сумата на отместването на сенките съответства на нашата променлива $ offset, което води до известна последователност в дизайна.
Не в това видео, но по-късно разбрахме, че вътрешните сенки на входовете е много по-лесно да се направят само с две рамки вместо с всички сенки (границите се срещат под ъгъл). За съжаление не е възможно на бутона.
Този стил на вмъкване в крайна сметка прониква във всички стилове на въвеждане в сайта, за добро или лошо.