CSS no Lanche

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;
 }

Já expliquei em um post anterior a sintaxe de text-shadow, aconselho você a dar uma lida lá caso o código acima não fique claro para você. Mas esse código é bem simples de entender, o que fizemos foi simplesmente colocar uma sombra de 1px ao texto e delocá-la 1 px na horizontal e 1 px na vertical e depois definir um valor 0 para o blur.

Exemplo

Vejam aqui um exemplo de Inset text com CSS3. Esse tutorial foi baseado no post do blog StylizedWeb