A 034. videóban ott folytatjuk, ahol abbahagytuk, és folytatjuk a keresési terület kiépítését.
Ezúttal a keresés „nyitott” állapotára összpontosítunk, maguk a tényleges formaelemek épülnek fel. Maga a keresőmező a HTML5 űrlap elemtípus „search” típusát használja - amelyhez általában valamilyen egyedi stílus társul, de mivel a Normalizálást (Video # 011) használjuk, ez nem jelent problémát számunkra.
Létrehozunk egy új moduláris CSS-bit (_buttons.scss) saját használatra a webhely stílusgombjaiban. Látod, mit csinálunk ott? Bármilyen stílust, amelynek mentálisan van értelme elkülönülni, új fájlt hozunk létre a számára. Megtehetjük ezt, amennyit csak akarunk, aggodalom nélkül, mert a fájlok egyébként összefűznek a Sass-szal.
A háromdimenziós gomb kinézetet csak vesszővel elválasztott doboz árnyékok egész halmaza hozza létre. A színek könnyen változtathatók, mert használj (kitaláltad!) Változókat.
$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; )Ugyanezt a stílust visszhangozzuk a beviteli elemben (csak a belső oldalon, nem pedig a külső részen), kiegészítve a 3D-s megjelenést. Az árnyékok eltolásának összege megegyezik a $ offset változónkkal, ami némi tervezési konzisztenciát eredményez.
Nem ebben a videóban, de a későbbiekben kitaláljuk, hogy a bemenetek belső árnyékai sokkal könnyebben elvégezhetők, ha az összes árnyék helyett csak két szegély van (a szegély szögben találkozik egymással). Sajnos a gombon nem lehetséges.
Ez a beillesztés-beviteli stílus végeredményben átjárja az összes beviteli stílust az egész oldalon, jóban vagy rosszban.