Após a estranha confusão no último vídeo sobre qual cabeçalho estávamos realmente fazendo, desta vez iremos realmente implementar o cabeçalho personalizado para a página de negócios! Este foi feito por Meg Hunt.
Como todos os cabeçalhos, passamos algum tempo examinando os arquivos originais e descobrindo como eles se encaixariam melhor na página. Tentamos algumas opções, mas no final decidimos colocá-lo em uma caixa confinada é melhor (ao contrário de algo como o cabeçalho Demos, onde o cabeçalho se funde em uma borda ao redor do conteúdo.
Ao exportá-lo, brincamos com vários formatos gráficos diferentes. Este estilo particular, curiosamente, é quase o mesmo em qualidade e tamanho de arquivo entre PNG e JPG.webp. Produzimos com 2.000 pixels de largura, o que deve ficar bem em qualquer tela. Também atingimos cerca de 150k, o que é grande, mas para um gráfico de herói como este, é um alvo OK.
Começamos a obter o modelo de negócios em ordem, incluindo ver como os negócios são cada campo personalizado individual que é randomizado antes de ser gerado. Passaremos mais tempo com essa marcação e tudo isso mais tarde, mas como estamos neste modelo preparando as coisas para o cabeçalho, podemos também limpá-lo.
Vemos várias possibilidades diferentes para colocar o gráfico de cabeçalho personalizado na página. Uma imagem de fundo faz mais sentido, já que estamos usando uma semântica
para o título e a substituição da imagem. Usando background-size, verificamos cover, mas isso pode causar cortes. Verificamos conter, mas que permite espaço na parte externa. 100%faz o truque, mas vamos precisar fazer uma caixa de estilo de proporção de aspecto para que funcione bem. Isso é fácil, porém, apenas definimos a altura 0 e usamos um preenchimento de porcentagem superior para fazer isso funcionar (caixa preenchida).
Este é o sétimo cabeçalho personalizado que fizemos e cada um deles foi feito de forma diferente. Web design, hein? Que viagem.