Wir setzen dort an, wo wir in Video Nr. 034 aufgehört haben, und bauen den Suchbereich weiter aus.
Dieses Mal konzentrieren wir uns auf den "offenen" Zustand der Suche und erstellen die eigentlichen Formularelemente selbst. Das Suchfeld selbst verwendet den HTML5-Formularelementtyp "Suche", mit dem normalerweise ein benutzerdefiniertes Styling verknüpft ist. Da wir jedoch "Normalisieren" (Video Nr. 011) verwenden, ist dies für uns kein Problem.
Wir erstellen ein neues modulares CSS-Bit (_buttons.scss) für unseren eigenen Gebrauch beim Stylen von Schaltflächen auf der gesamten Site. Sehen Sie, was wir dort machen? Für jedes Styling, das mental Sinn macht, isoliert zu sein, erstellen wir eine neue Datei für. Wir können dies so oft tun, wie wir möchten, ohne uns Sorgen machen zu müssen, da die Dateien sowieso alle zusammen mit Sass verkettet werden.
Der dreidimensionale Button-Look wird nur durch eine ganze Reihe von durch Kommas getrennten Box-Schatten erzeugt. Die Farben sind leicht zu ändern, da Variablen verwendet werden (Sie haben es erraten!).
$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; )Wir geben dasselbe Styling im Eingabeelement wieder (nur innen und nicht außen) und vervollständigen den 3D-Look. Der Betrag, um den die Schatten versetzt sind, stimmt mit unserer Variablen $ offset überein, was zu einer gewissen Designkonsistenz führt.
Nicht in diesem Video, aber später stellen wir fest, dass die inneren Schatten an den Eingaben viel einfacher mit nur zwei Rändern anstelle aller Schatten zu tun sind (Ränder treffen sich in einem Winkel). Auf dem Button leider nicht möglich.
Dieser Inset-Input-Stil durchdringt letztendlich alle Eingabestile auf der Website, egal ob gut oder schlecht.