Vi fortsetter der vi slapp i Video # 034 og fortsetter å bygge opp søkeområdet.
Denne gangen fokuserer vi på den “åpne” tilstanden til søket, og bygger selve formelementene. Søkefeltet i seg selv bruker HTML5-skjemaelementtypen "søk" - som vanligvis har noen tilpasset styling tilknyttet, men fordi vi bruker Normaliser (Video # 011), er det ikke noe problem for oss.
Vi lager en ny modulær bit av CSS (_buttons.scss) for vårt eget bruk i stylingknapper over hele nettstedet. Ser du hva vi gjør der? Enhver bit av styling som mentalt gir mening å være isolert, lager vi en ny fil for. Vi kan gjøre dette så mye vi vil uten bekymring, fordi filene blir sammenkoblet sammen med Sass uansett.
Det tredimensjonale knappelooket er skapt bare av en hel haug med kommaadskilte bokseskygger. Fargene er enkle å endre, fordi du bruker variasjoner (du gjettet det!).
$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; )Vi ekko den samme stylingen i inngangselementet (bare på innsiden i stedet for på utsiden), og fullfører 3D-utseendet. Mengden skyggene blir forskjøvet samsvarer med vår $ offset-variabel, noe som fører til en viss designkonsistens.
Ikke i denne videoen, men senere, finner vi ut at de indre skyggene på inngangene er mye lettere å gjøre med bare to rammer i stedet for alle skyggene (rammen møter hverandre i en vinkel). Ikke mulig på knappen dessverre.
Denne innfelt-input-stilen ender med å gjennomsyre alle input-stiler på hele nettstedet, på godt og vondt.