Inset Text com 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;
}
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
Isso pode lhe interessar:
Trackbacks & Pingbacks
- Pingback por Tweets that mention Inset Text com CSS3 » CSS no Lanche -- Topsy.com em 10 de novembro de 2009 @ 8:57
- Pingback por Texto em relevo usando text-shadow do CSS3 - André D. Molin » Blog – PHP, MySQL, xHTML, CSS, Tableless, jQuery em 10 de novembro de 2009 @ 16:27
Boa dica.. thank’s
Boa rapaz, pena não funcionar no IE mas da uma ideáis bem bacanas. CSS FTW
Independente de rodar ou não no I.E dependendo do site vale a pena utilizar e deixar o usuário do I.E sem, assim como as bordas arredondadas.
Essa propriedade text-shadow foi introduzida no CSS2, porém poucos browsers suportavam, e então foi removida no CSS2.1
No CSS3, no entanto, essa propriedade está retornando.