Luăm locul unde am rămas în videoclipul nr. 034 și continuăm să construim zona de căutare.
De data aceasta ne concentrăm pe starea „deschisă” a căutării, construind ele însele elementele de formă reale. Câmpul de căutare în sine folosește tipul de element de formular HTML5 „căutare” - care are de obicei asociat un anumit stil personalizat, dar pentru că folosim Normalizare (Video # 011), aceasta nu este o problemă pentru noi.
Creăm un nou bit modular de CSS (_buttons.scss) pentru propria noastră utilizare în butoanele de stil de pe site. Vezi ce facem acolo? Orice bit de stil care are sens mental să fie izolat, creăm un fișier nou pentru. Putem face acest lucru oricât ne place fără griji, deoarece fișierele sunt oricum concatenate împreună cu Sass.
Aspectul butonului tridimensional este creat doar de o grămadă de umbre de casetă separate prin virgulă. Culorile sunt ușor de schimbat, deoarece folosiți (ați ghicit!) Variabile.
$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; )Repetăm același stil în elementul de intrare (doar în interior, mai degrabă decât în exterior), completând aspectul 3D. Suma compensată a umbrelor se potrivește cu variabila noastră $ offset, ceea ce duce la o anumită consistență de proiectare.
Nu în acest videoclip, dar mai târziu, ne dăm seama că umbrele interioare de pe intrări sunt mult mai ușor de făcut cu doar două margini în loc de toate umbrele (marginea se întâlnește într-un unghi). Din păcate, nu este posibil pe buton.
Acest stil de introducere a inserțiilor ajunge să pătrundă în toate stilurile de intrare de pe site, în bine sau în rău.