Videoklipā Nr. 034 mēs turpinām darbu, kur mēs to pārtraucām, un turpinām veidot meklēšanas apgabalu.
Šoreiz mēs koncentrējamies uz meklēšanas “atvērto” stāvokli, veidojot pašus faktiskos formas elementus. Pats meklēšanas lauks izmanto HTML5 formas elementa tipu “meklēšana” - ar kuru parasti ir saistīts kāds pielāgots stils, taču, tā kā mēs izmantojam Normalize (Video # 011), tā mums nav problēma.
Mēs izveidojam jaunu moduļu CSS (_buttons.scss), kas paredzēts mūsu pašu lietošanai stila pogās visā vietnē. Redzi, ko mēs tur darām? Jebkurš stila gabals, kuram ir jēga būt izolētam, mēs izveidojam jaunu failu. Mēs varam to izdarīt tik daudz, cik mums patīk, jo neuztraucieties, jo faili tik un tā tiek saīsināti kopā ar Sass.
Trīsdimensiju pogas izskatu rada tikai vesels ķekars ar komatiem atdalītu lodziņu ēnu. Krāsas ir viegli maināmas, jo izmantojiet (jūs uzminējāt!) Mainīgos.
$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; )Mēs atkārtojam to pašu stilu ievades elementā (tikai iekšpusē, nevis ārpusē), pabeidzot 3D izskatu. Ēnu kompensētā summa sakrīt ar mūsu mainīgo $ offset, tādējādi panākot zināmu dizaina konsekvenci.
Ne šajā videoklipā, bet vēlāk mēs izdomājam, ka iekšējās ēnas uz izejām ir daudz vieglāk izdarāmas tikai ar divām apmalēm, nevis visām ēnām (apmale saskaras leņķī). Diemžēl nav iespējams uz pogas.
Šis ieliktņa ievades stils galu galā iekļūst visos vietnes ievades stilos, vai nu labāk, vai sliktāk.