Como criar texto em baixo-relevo com CSS

Escrito por sara williams | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

O baixo-relevo é o efeito de texto oposto ao alto-relevo: em vez de parecer que o texto "sai" da página, ele fica "afundado". Você pode aplicar esse efeito usando código de folhas de estilo em cascata (CSS), desde que as cores do fundo, do texto e das sombras combinem. O texto deve ser mais escuro do que o fundo e a sombra deve ser clara. Em todos os navegadores, exceto o "Internet Explorer", a propriedade "text-shadow" lhe permitirá criar o efeito.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Acesse o menu Iniciar na barra de tarefas do Windows e digite o nome do seu editor de código ou do "Bloco de Notas" na barra de pesquisa. Pressione "Enter" para abrir o programa. Clique em "File" (Arquivo) na barra de menu superior e abra o arquivo HTML da página web que você quer editar. Se ela utilizar um arquivo CSS externo, abra-o também.

  2. 2

    Localize o texto na página web no qual você quer aplicar o efeito de baixo-relevo. Tome nota do conjunto de tags HTML que estiverem ao redor dele. Busque um atributo "class" ou "id" neles. Um exemplo de um texto em tags com ambos atributos é o seguinte:

    <h2 class="letterpress" id="myname">John Doe</h2>

    Adicione um atributo "id" se quiser aplicar o efeito em apenas uma parte do texto. Use o atributo "class" para aplicá-lo a vários trechos.

  3. 3

    Verifique que sua página web exibe uma cor mais escura no texto do que no fundo. Você pode fazer isso em um navegador web ou olhando no código CSS, especialmente se souber usar códigos hexadecimais para definir cores. Se for utilizado um arquivo CSS externo, abra-o; caso contrário, busque os tags "<style>" na seção "<head>" do arquivo HTML.

  4. 4

    Escreva um "selector" (selecionador) CSS para selecionar um ou vários trechos de texto que receberão o efeito. Use um nome de classe (indicado com um ponto) para aplicar o efeito a vários trechos, por exemplo:

    .letterpress {}

    Para um ID, use o seguinte formato:

    myname {}

  5. 5

    Defina a propriedade "text-shadow" no texto para criar o efeito de baixo-relevo. Essa propriedade precisa de quatro valores: os deslocamentos superior e esquerdo, o rádio de embaçamento e a cor da sombra. Um exemplo é o seguinte:

    .letterpress { text-shadow: 1px 1px 2px #eeeeee; }

    O código acima desloca a sombra um pixel a partir do topo e um a partir da esquerda. A sombra possui um rádio de 2 pixels (efeito suave) e uma sombra de cor cinza claro, mas você pode trocar a cor por uma mais apropriada para o fundo do texto.

Dicas & Advertências

  • Controle melhor a aparência da sombra usando um código RGBa em vez de hexadecimal. O formato é "rgba(x,x,x,1)", onde cada "x" representa as cores vermelha, verde e azul nesta ordem, e o último parâmetro é um valor de transparência entre 0 e 1.
  • A propriedade "text-shadow" não é compatível com o Internet Explorer. Permita que a página seja exibida sem o efeito como uma "degradação" ou implemente um método alternativo com imagens, código JavaScript e uma folha de estilo separada.

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