Como fazer um banner com CSS

Escrito por michelle norton | Traduzido por luis nei jr.
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um banner com CSS
Necessário conhecimento básico de HTML para execução deste tutorial (internetseite image by FX Berlin from Fotolia.com)

Fazer um banner é uma parte fundamental do webdesign. Muitos designers iniciantes usam tabelas para criar o banner e o leiaute do site. No entanto, usando CSS, você pode definir o fundo, as cores, o tamanho e as bordas do banner. As tabelas dificultam a gestão do design com o tempo, enquanto o CSS permite alterar os elementos conforme necessário. É necessário um conhecimento básico de HTML para executar este pequeno tutorial. Embora haja muitas maneiras de criar um banner com CSS, neste tutorial vamos criar um banner centralizado de dois tons, com texto alinhado à direita.

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto
  • Site
  • Selecionador de cor

Lista completaMinimizar

Instruções

  1. 1

    Abra o arquivo HTML. Após a etiqueta BODY, acrescente a DIV, seguida da ID. Nomeie a etiqueta como "banner":

    <div id="banner"></div>

  2. 2

    Digite o texto do banner entre as etiquetas DIV que acabou de criar:

    <div id=“banner”>Seu Site</div>

    Feche com a etiqueta H1:

    <div id=“banner”><h1>Seu Site</h1></div>

    Isso fará com que seu texto seja maior que o tamanho padrão em mais de quatro pontos.

  3. 3

    Abra seu arquivo CSS. Configure o estilo do banner digitando:

    banner{}

    A etiqueta "#banner" vai indicar aos navegadores que procuram o estilo da "id="banner"" -- por isso a etiqueta é chamada "banner".

  4. 4

    Entre as {}, você vai precisar digitar os estilos. Existem muitos estilos em CSS. Nós só vamos usar alguns deles. Primeiro, queremos centralizar o banner na página:

    banner{margin: 0 auto;}

    Assim, centraliza-se o banner no site, com margem automática de zero ponto em relação às partes superior e inferior da linha.

  5. 5

    Adicione os outros estilos:

    banner{margin: 0 auto

    Width: 780px Height: 300px Border:#ff0000 solid 10px Background: #ffffff Color: #ff0000 Font-size: 18px Text-align: right Padding-right: 10px;}

    A largura e a altura definem o tamanho do banner. A borda é uma linha sólida de 10 pixel ao redor da caixa. Ela será vermelha, tal como definido pelo código hexadecimal, isto é, pelos seis números e letras que seguem o símbolo "#". "Background" (fundo) é definido como branco. A etiqueta "Color" define a cor do texto, que é novamente vermelho, para coincidir com a borda. A etiqueta "font-size" define o tamanho do texto. "Text-align" define o posicionamento do texto -- neste caso, optou-se pelo alinhamento à direita da caixa. "Padding" cria um espaço entre o conteúdo, como o texto, dentro da caixa e a borda. "Padding-right" está ajustado para dar 10 pixel de espaço entre o texto e a borda direita.

  6. 6

    Salve os arquivos.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível