Vaizdo įraše Nr. 034 tęsiame ten, kur baigėme, ir toliau kuriame paieškos sritį.
Šį kartą mes sutelkiame dėmesį į „atvirą“ paieškos būseną, kurdami pačius faktinius formos elementus. Pats paieškos laukas naudoja HTML5 formos elemento tipą „paieška“ - su kuriuo paprastai susiejamas tam tikras pasirinktas stilius, tačiau kadangi mes naudojame „Normalize“ (vaizdo įrašas Nr. 011), tai mums nėra problema.
Mes kuriame naują modulinį CSS bitą (_buttons.scss), skirtą mūsų pačių naudojimui stiliaus mygtukuose visoje svetainėje. Matai, ką mes ten veikiame? Bet kokį stiliaus stilių, kurį būtų prasminga izoliuoti, mes kuriame naują failą. Mes galime tai padaryti tiek, kiek norime, nesijaudindami, nes vis tiek visi failai sujungiami kartu su „Sass“.
Trimačio mygtuko išvaizdą sukuria visa krūva kableliais atskirtų langelių šešėlių. Spalvas lengva pakeisti, nes naudokite (atspėjote!) Kintamuosius.
$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; )Mes atkartojame tą patį stilių įvesties elemente (tik viduje, o ne išorėje), užbaigdami 3D išvaizdą. Šešėlių kompensuojama suma atitinka mūsų $ offset kintamąjį, o tai lemia tam tikrą dizaino nuoseklumą.
Ne šiame vaizdo įraše, bet vėliau suprasime, kad daug lengviau atlikti vidinius šešėlius, esančius įėjimuose, o tik dvi kraštines, o ne visus šešėlius (kraštai susitinka vienas su kitu kampu). Deja, mygtuke negalima.
Šis įvesties stilius galų gale persmelkia visus įvesties stilius visoje svetainėje.
