Nastavljamo tamo gdje smo stali u videu # 034 i nastavljamo graditi područje pretraživanja.
Ovaj put usredotočujemo se na "otvoreno" stanje pretraživanja, gradeći same stvarne elemente oblika. Samo polje za pretraživanje koristi tip HTML5 elementa obrasca "search" - koji obično ima neki prilagođeni stil povezan s njim, ali budući da koristimo Normalize (Video # 011), to za nas nije problem.
Izrađujemo novi modularni bit CSS-a (_buttons.scss) za vlastitu upotrebu u gumbima za oblikovanje na web mjestu. Vidiš li što radimo tamo? Za bilo koji dio stylinga koji mentalno ima smisla biti izoliran, kreiramo novu datoteku za. To možemo raditi koliko god želimo bez brige, jer se datoteke ionako sve spajaju zajedno sa Sassom.
Trodimenzionalni izgled gumba stvorio je čitav niz sjena okvira odvojenih zarezom. Boje se lako mijenjaju jer koristite (pogađate!) Varijable.
$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; )Ponavljamo isti isti stil u ulaznom elementu (samo iznutra, a ne izvana), dovršavajući 3D izgled. Iznos koji se pomiče sjenama podudara se s našom varijablom $ offset, što dovodi do određene dosljednosti dizajna.
Ne u ovom videozapisu, ali kasnije shvatimo da je unutarnje sjene na ulazima puno lakše učiniti sa samo dvije obrube umjesto svih sjena (obrub se susreće pod kutom). Nažalost, na gumbu nije moguće.
Ovaj stil unosa unosa završava prožimanjem svih stilova unosa na web mjestu, u dobru ili u zlu.