Texto em relevo usando text-shadow do CSS3

Esse tipo de técnica só poderia até então ser conseguida através de programas de edição de imagem, mas com a evolução dos browsers e principalmente das CSS hoje é possível adicionar uma espécie de relevo ao texto. Para conseguir esse efeito iremos utilizar a propriedade text-shadow das CSS3.

Primeiro passo – Definir uma cor primária

O primeiro passo é escolher uma cor para o texto, ela deve ser mais escura que o fundo do site. Isso irá dar ma sensação de profundidade aos usuários

Segundo passo – Definir uma cor para o relevo

Para obter o efeito de 3D precisamos ter uma linha fina de sombreamento em torno de nosso texto. Ao seguir o texto, ele normalmente vai ser uma sombra, dando a ilusão de profundidade. A tonalidade da cor deve ser mais leve que a cor de fundo. Para chegar a cor correta, utilize algum programa para edição de imagens e obtenha tonalidade desejada.

Código

.inset-text {
		font-size: 60px;
		color: #566F89;
		text-shadow: 1px 1px 0px #E4F1FF;
		font-weight: bold;
}

Esse código é bem simples de entender, o que fizemos foi simplesmente colocar uma sombra de 1px ao texto e delocá-la 1px na horizontal e 1px na vertical e depois definir um valor 0 para o blur.

Exemplo

Exemplo do relevo em texto com CSS3 funcionando. O resultado é bem legal.

Referências

• CSS no Lanche
• Stylized Web

Leia também:

1. O efeito de sombra do CSS3 em elementos (box-shadow)
2. Técnicas de CSS3 para você se familiarizar
3. A pseudo-classe nth-child do CSS
4. Como fixar elementos usando o CSS
5. Criando borda interna em imagens com CSS