Nous reprenons là où nous nous sommes arrêtés dans la vidéo n ° 034 et continuons à développer la zone de recherche.
Cette fois, nous nous concentrons sur l'état «ouvert» de la recherche, en construisant les éléments de formulaire eux-mêmes. Le champ de recherche lui-même utilise le type d'élément de formulaire HTML5 «recherche» - qui est généralement associé à un style personnalisé, mais comme nous utilisons Normaliser (Vidéo # 011), ce n'est pas un problème pour nous.
Nous créons un nouveau morceau modulaire de CSS (_buttons.scss) pour notre propre usage dans les boutons de style du site. Vous voyez ce que nous faisons là-bas? Nous créons un nouveau fichier pour tout style qui a du sens mentalement à être isolé. Nous pouvons le faire autant que nous le souhaitons sans souci, car les fichiers sont de toute façon concaténés avec Sass.
L'aspect du bouton en trois dimensions est créé simplement par tout un tas d'ombres de boîte séparées par des virgules. Les couleurs sont faciles à changer, car utilisez (vous l'avez deviné!) Des variables.
$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; )Nous faisons écho à ce même style dans l'élément d'entrée (uniquement à l'intérieur plutôt qu'à l'extérieur), complétant le look 3D. Le décalage des ombres correspond à notre variable $ offset, ce qui conduit à une certaine cohérence de conception.
Pas dans cette vidéo, mais plus tard, nous nous rendons compte que les ombres intérieures sur les entrées sont beaucoup plus faciles à faire avec seulement deux bordures au lieu de toutes les ombres (les bordures se rencontrent à un angle). Pas possible sur le bouton malheureusement.
Ce style d'entrée en incrustation finit par imprégner tous les styles d'entrée sur le site, pour le meilleur ou pour le pire.
