Nós continuamos de onde paramos no Vídeo # 034 e continuamos construindo a área de pesquisa.
Desta vez, estamos nos concentrando no estado “aberto” da pesquisa, construindo os próprios elementos de forma reais. O próprio campo de pesquisa usa o tipo de elemento de formulário HTML5 “search” - que geralmente tem algum estilo personalizado associado a ele, mas como estamos usando Normalize (Vídeo # 011), isso não é um problema para nós.
Criamos um novo bit modular de CSS (_buttons.scss) para nosso próprio uso em botões de estilo em todo o site. Vê o que estamos fazendo aí? Criamos um novo arquivo para qualquer estilo que mentalmente faça sentido ser isolado. Podemos fazer isso o quanto quisermos sem nos preocupar, porque os arquivos ficam todos concatenados com o Sass de qualquer maneira.
A aparência tridimensional do botão é criada apenas por um monte de sombras de caixas separadas por vírgulas. As cores são fáceis de mudar, porque use (adivinhou!) Variáveis.
$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; )Repetimos esse mesmo estilo no elemento de entrada (apenas no interior e não no exterior), completando a aparência 3D. A quantidade de deslocamento das sombras corresponde à nossa variável $ offset, levando a alguma consistência de design.
Não neste vídeo, mas mais tarde, descobrimos que as sombras internas nas entradas são muito mais fáceis de fazer com apenas duas bordas em vez de todas as sombras (as bordas se encontram em um ângulo). Não é possível no botão, infelizmente.
Esse estilo de entrada de inserção acaba permeando todos os estilos de entrada do site, para melhor ou pior.