Vi fortsætter, hvor vi slap i Video # 034, og fortsætter med at opbygge søgeområdet.
Denne gang fokuserer vi på søgningens “åbne” tilstand og bygger selv selve formelementerne. Selve søgefeltet bruger HTML5-formelementtypen "søgning" - som normalt har nogle brugerdefinerede styling tilknyttet, men fordi vi bruger Normaliser (Video # 011), er det ikke et problem for os.
Vi opretter en ny modulær bit CSS (_buttons.scss) til vores eget brug i stylingsknapper på tværs af webstedet. Se hvad vi laver der? Enhver smule styling, der mentalt giver mening at være isoleret, opretter vi en ny fil til. Vi kan gøre dette så meget som vi vil uden bekymring, fordi filerne alligevel sammenkædes sammen med Sass.
Det tredimensionelle knapudseende oprettes bare af en hel række komma-adskilte boksskygger. Farverne er lette at ændre, fordi brug (du gættede det!) Variabler.
$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 gentager den samme styling i inputelementet (kun indvendigt snarere end udvendigt) og fuldender 3D-udseendet. Det beløb, som skyggerne er forskudt, svarer til vores $ offset-variabel, hvilket fører til en vis designkonsistens.
Ikke i denne video, men senere finder vi ud af, at de indre skygger på indgangene er meget nemmere at gøre med kun to rammer i stedet for alle skyggerne (rammen møder hinanden i en vinkel). Ikke muligt på knappen desværre.
Denne typografi med indsat input ender med at gennemsyre alle inputformater på hele webstedet, på godt og ondt.