Riprendiamo da dove avevamo interrotto nel Video # 034 e continuiamo a costruire l'area di ricerca.
Questa volta ci stiamo concentrando sullo stato "aperto" della ricerca, costruendo gli stessi elementi della forma. Il campo di ricerca stesso utilizza il tipo di elemento del modulo HTML5 "ricerca", a cui di solito è associato uno stile personalizzato, ma poiché stiamo usando Normalize (Video # 011), non è un problema per noi.
Creiamo un nuovo bit modulare di CSS (_buttons.scss) per il nostro uso nello stile dei pulsanti in tutto il sito. Vedi cosa ci facciamo lì? Per qualsiasi stile che ha senso mentalmente essere isolato, creiamo un nuovo file per. Possiamo farlo quanto vogliamo senza preoccupazioni, perché i file vengono comunque concatenati tutti insieme a Sass.
L'aspetto tridimensionale del pulsante è creato solo da un intero gruppo di ombre di casella separate da virgole. I colori sono facili da cambiare, perché usano (hai indovinato!) Variabili.
$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; )Riprendiamo lo stesso stile nell'elemento di input (solo all'interno anziché all'esterno), completando l'aspetto 3D. La quantità di offset delle ombre corrisponde alla nostra variabile $ offset, portando a una certa coerenza del design.
Non in questo video, ma in seguito scopriamo che le ombre interne sugli input sono molto più facili da fare con solo due bordi invece di tutte le ombre (i bordi si incontrano ad angolo). Purtroppo non è possibile sul pulsante.
Questo stile di input inset finisce per permeare tutti gli stili di input nel sito, nel bene e nel male.