Tecnologia

Como criar um banner de faixa usando CSS

Escrito por sara williams | Traduzido por josé fabián
Como criar um banner de faixa usando CSS

Crie um banner com formato de faixa comemorativa sem usar imagens

Jupiterimages/Photos.com/Getty Images

Designers de web geralmente usam banners em forma de faixa comemorativa como efeito estético nos cabeçalhos de texto. Esses banners aparecem ressaltados na página, deixando o texto do cabeçalho muito mais visível para os leitores. Pode-se criar esses banners sem imagens, sendo acessíveis pelos navegadores mais modernos, como o Internet Explorer 9 e posteriores. O código envolve suas estruturas: que não formam parte do HTML atual e que são criados com CSS e alguns truques, para utilizar os triângulos das sombras e os entalhes que aparecem em cada borda da faixa.

Nível de dificuldade:
Desafiante

Instruções

  1. 1

    Abra a página de internet em um editor (como o Bloco de Notas) e adicione um cabeçalho com as tags de cabeçalhos HTML: <h2 class=”ribbon”>Texto do cabeçalho</h2> Dê às tags um nome de classe, como "ribbon", para poder transformar qualquer cabeçalho em um banner. O nome da classe será referenciado no código CSS posteriormente.

  2. 2

    Abra a folha de estilos da página de internet no editor. Se ainda não possuir uma, crie um arquivo vazio e salve-o como arquivo CSS na mesma pasta em que a página de internet. Adicione este código após as tags <title> da página: <link rel=”stylesheet” href=”yourstylesheet.css” type=”text/css” /> Quando abrir a folha de estilos, digite o novo código após qualquer outro que estiver presente.

  3. 3

    Dê ao cabeçalho uma posição relativa, uma largura e uma cor de fundo. Estilize o texto segundo as suas preferências, como no seguinte exemplo: .ribbon { position: relative; width: 300px; background-color: #a91313; color: #ffffff; font-family: Arial, sans-serif; padding: 10px 20px; box-shadow: 0px 2px 5px rbgba(0,0,0,0.3); } Este exemplo cria uma barra para o cabeçalho, posicionada de forma relativa, com largura de 300 pixels, cor de fundo vermelha escura, texto branco e sombra semitransparente. O espaçamento (10 pixels nas partes superior e inferior e 20 pixels em cada lado) deixa um espaço ao redor do texto e dentro da barra.

  4. 4

    Crie um pseudoelemento usando ":after" em CSS: h2:after { content: ' '; } Ao usar ":after" em uma regra de estilo e adicionando um espaço vazio no conteúdo, como se mostra, você estará criando um elemento que o navegador verá, mas não está no código HTML.

  5. 5

    Dê ao pseudoelemento um posicionamento absoluto e configure-o como 100% a partir do topo e 0 pixels a partir da esquerda. Configure a largura e a altura em 0 pixels e um valor negativo para o índice z: h2:after { content: ' '; position: absolute; top: 100%; left: 0px; width: 0px; height: 0px; z-index: -10; } Este pseudoelemento criará a parte da faixa que se mostrará atrás, portanto é preciso um índice z negativo para colocá-lo por trás do cabeçalho. Com isso, você poderá colocar a sombra do cabeçalho sobre o pseudoelemento, ficando mais natural.

  6. 6

    Crie uma forma de triângulo para a parte dobrada da faixa. O truque para criar um triângulo é usar largura de borda em um elemento. Pense na borda em um elemento de zero dimensões como quatro triângulos que apontam para dentro. O código para o triângulo que criará a parte dobrada é: border-width: 5px 10px; border-style: solid; border-color: #780d0d #780d0d transparent transparent; Coloque esse código após o índice z que você configurou, dentro das chaves do pseudoelemento. Usam-se duas bordas (superior e esquerda) para criar um triângulo.

  7. 7

    Escreva outra regra de estilo que criará um segundo pseudoelemento antes da tag do cabeçalho: h2:before { content: ' '; } Esse pseudoelemento criará a seção entalhada da faixa.

  8. 8

    Dê à parte entalhada da faixa uma posição absoluta e coloque um valor z menor ao da parte dobrada. Use uma largura de 30 pixels e uma altura de 0 pixels. Puxe o pseudoelemento 30 pixels à direita, por meio de um valor de -30 pixels na propriedade "left". Contorne esta parte do topo da faixa usando a propriedade "top": h2:before { content: ' '; position: absolute; width: 30px; height: 0; top: 12px left: -30px; z-index: -20; }

  9. 9

    Crie o entalhe adicionando bordas aos três lados do pseudoelemento ":before". Coloque o seguinte código embaixo do índice z: border-width: 20px 10px; border-style: solid; border-color: #a91313 #a91313 #a91313 transparent;

Dicas & Advertências

  • Esse código não criará um efeito de faixa em navegadores antigos, que não suportem pseudoelementos. O Internet Explorer os suporta parcialmente na versão 8 e completamente na versão 9, mas não nas anteriores.

Mais galerias de fotos

Comentários

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

Direitos autorais © 1999-2014 Demand Media, Inc.

O uso deste site constitui plena aceitação dos Termos de Uso e Política de privacidade de eHow. Ad Choices pt-BR

Demand Media