Jatkamme siitä, mihin jäimme, videossa # 034 ja jatkamme hakualueen rakentamista.
Tällä kertaa keskitymme haun "avoimeen" tilaan ja rakennamme itse muotoelementit itse. Hakukentässä itsessään käytetään HTML5-muotoelementtityyppiä "haku" - johon yleensä liittyy jonkinlainen mukautettu tyyli, mutta koska käytämme Normalize (Video # 011), se ei ole meille ongelma.
Luomme uuden modulaarisen bitin CSS: stä (_buttons.scss) omaan käyttöön tyylipainikkeissa kaikkialla sivustossa. Katso mitä me teemme siellä? Mikä tahansa muotoilu, jolla on henkisesti järkevää olla eristetty, luomme uuden tiedoston. Voimme tehdä tämän niin paljon kuin haluamme ilman huolta, koska tiedostot liitetään joka tapauksessa yhteen Sassin kanssa.
Kolmiulotteisen painikkeen ulkoasun luovat vain joukko pilkuilla erotettuja ruutuvarjoja. Värit on helppo vaihtaa, koska käytä (arvasit!) Muuttujia.
$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; )Toistamme samaa tyyliä syöttöelementissä (vain sisäpuolelta eikä ulkopuolelta), viimeistelemällä 3D-ilme. Varjojen offset-summa vastaa $ offset -muuttujamme, mikä johtaa suunnitteluun johdonmukaisuuteen.
Ei tässä videossa, mutta myöhemmin selvitämme, että tulojen sisäiset varjot on paljon helpompi tehdä vain kahdella reunalla kaikkien varjojen sijasta (reunat kohtaavat toisiaan kulmassa). Ei valitettavasti painikkeessa.
Tämä sisäänsyöttötyyli pääsee tunkeutumaan kaikkiin syötetyyleihin kaikkialla sivustossa, hyvässä tai huonossa.