Настављамо тамо где смо стали у видеу # 034 и настављамо да градимо подручје претраживања.
Овај пут се фокусирамо на „отворено“ стање претраге, градећи саме стварне елементе форме. Само поље за претрагу користи тип ХТМЛ5 елемента обрасца „претрага“ - који је обично повезан са неким прилагођеним стилом, али зато што користимо Нормализе (Видео # 011), то за нас није проблем.
Креирамо нови модуларни бит ЦСС-а (_буттонс.сцсс) за сопствену употребу у дугмадима за обликовање на целој веб локацији. Видиш шта радимо тамо? За сваки део стила који ментално има смисла бити изолован, креирамо нову датотеку за. То можемо да радимо колико год желимо без бриге, јер се датотеке ионако све спајају заједно са Сассом.
Тродимензионални изглед дугмета ствара само читава гомила сенки оквира одвојених зарезима. Боје је лако променити, јер користите (погађате!) Променљиве.
$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; )Понављамо исти исти стил у улазном елементу (само изнутра, а не споља), довршавајући 3Д изглед. Количина померања сенки се подудара са нашом променљивом $ оффсет, што доводи до неке конзистентности дизајна.
Не у овом видеу, али касније схватамо да је унутрашње сенке на улазима много лакше урадити са само две ивице уместо свих сенки (ивице се међусобно сусрећу под углом). Нажалост, дугме није могуће.
Овај стил уноса уноса завршава прожимањем свих стилова уноса на веб локацији, у добру или у злу.