We gaan verder waar we gebleven waren in video # 034 en gaan verder met het uitbouwen van het zoekgebied.
Deze keer concentreren we ons op de "open" staat van de zoekopdracht, waarbij we de feitelijke vormelementen zelf bouwen. Het zoekveld zelf gebruikt het HTML5-formulierelementtype "zoeken" - waaraan meestal een aangepaste stijl is gekoppeld, maar omdat we Normalize (video # 011) gebruiken, is dat voor ons geen probleem.
We maken een nieuw modulair stukje CSS (_buttons.scss) voor eigen gebruik bij het opmaken van knoppen op de site. Zie je wat we daar doen? Voor elk stukje styling dat mentaal zinvol is om geïsoleerd te worden, maken we een nieuw bestand voor. We kunnen dit zo vaak doen als we willen zonder ons zorgen te maken, omdat de bestanden toch allemaal samen met Sass worden samengevoegd.
De driedimensionale knoplook wordt gecreëerd door een hele reeks door komma's gescheiden vakschaduwen. De kleuren zijn gemakkelijk te veranderen, want gebruik (je raadt het al!) Variabelen.
$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; )We herhalen diezelfde stijl in het invoerelement (alleen aan de binnenkant in plaats van aan de buitenkant), waardoor de 3D-look compleet is. Het bedrag dat de schaduwen worden gecompenseerd, komt overeen met onze $ offset-variabele, wat leidt tot enige ontwerpconsistentie.
Niet in deze video, maar later komen we erachter dat de binnenschaduwen op de ingangen een stuk gemakkelijker te doen zijn met slechts twee randen in plaats van alle schaduwen (de rand ontmoet elkaar in een hoek). Helaas niet mogelijk op de knop.
Deze inset-input-stijl dringt uiteindelijk door in alle input-stijlen op de site, voor beter of slechter.