Rozpoczynamy od miejsca, w którym zakończyliśmy, w filmie nr 034 i kontynuujemy tworzenie obszaru wyszukiwania.
Tym razem skupiamy się na „otwartym” stanie wyszukiwania, budując same elementy formy. Samo pole wyszukiwania używa typu elementu formularza HTML5 „szukaj” - z którym zwykle jest powiązany niestandardowy styl, ale ponieważ używamy Normalizuj (wideo nr 011), nie stanowi to dla nas problemu.
Tworzymy nowy modularny bit CSS (_buttons.scss) do własnego użytku w stylizowaniu przycisków w całej witrynie. Widzisz, co tam robimy? Każda stylizacja, która w myślach ma sens, aby się odizolować, tworzymy nowy plik. Możemy to robić tak często, jak nam się podoba, bez obaw, ponieważ i tak wszystkie pliki są łączone razem z Sassem.
Trójwymiarowy wygląd przycisku jest tworzony przez całą gamę cieni pól oddzielonych przecinkami. Kolory są łatwe do zmiany, ponieważ używaj (zgadłeś!) Zmiennych.
$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; )Powtarzamy ten sam styl w elemencie wejściowym (tylko wewnątrz, a nie na zewnątrz), uzupełniając wygląd 3D. Wartość przesunięcia cieni jest zgodna z naszą zmienną $ offset, co prowadzi do pewnej spójności projektu.
Nie w tym filmie, ale później odkryjemy, że wewnętrzne cienie na wejściach są o wiele łatwiejsze do zrobienia z tylko dwoma granicami zamiast wszystkich cieni (obramowanie styka się ze sobą pod kątem). Niestety nie jest możliwe na przycisku.
Ten styl wprowadzania wstawek ostatecznie przenika wszystkie style wprowadzania w witrynie, na dobre lub na złe.