Vi fortsätter där vi slutade i Video # 034 och fortsätter att bygga ut sökområdet.
Den här gången fokuserar vi på det ”öppna” läget och bygger själva själva formelementen. I själva sökfältet används HTML5-formelementtypen "sökning" - som vanligtvis har en viss anpassad styling associerad med det, men eftersom vi använder Normalisera (Video # 011) är det inget problem för oss.
Vi skapar en ny modulär bit av CSS (_buttons.scss) för eget bruk i stylingknappar över hela webbplatsen. Ser du vad vi gör där? Någon bit av styling som mentalt är vettigt att vara isolerad skapar vi en ny fil för. Vi kan göra detta så mycket vi vill utan att oroa oss, för filerna sammanfaller i alla fall med Sass ändå.
Det tredimensionella knapputseendet skapas bara av en hel massa kommaseparerade rutskuggor. Färgerna är lätta att ändra, för använd variabler (du gissade 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 ekar samma styling i inmatningselementet (endast på insidan snarare än på utsidan) och kompletterar 3D-utseendet. Beloppet som skuggorna kompenseras matchar vår $ offset-variabel, vilket leder till viss designkonsistens.
Inte i den här videon, men senare räknar vi ut att de inre skuggorna på ingångarna är mycket lättare att göra med bara två kanter istället för alla skuggorna (gränsen möter varandra i en vinkel). Inte möjligt på knappen tyvärr.
Den här insatsinmatningsstilen slutar genomsyra alla inmatningsstilar på webbplatsen, på gott och ont.