Efectos en textos con CSS 3

En este artículo se explicará como crear efectos similares a los de Photoshop estilo de texto en 3D con CSS 3 text-shadow. Esta propiedad es compatible con todos los navegadores modernos como Chrome, Safari y Firefox, con excepción de Internet Explorer que está muerto.

Efecto 1

Copiar todo el codigo

.effect_1
{
color: #47b013;
font: 80px Times New Roman, Times, serif;
text-shadow: 0 1px 0 #390, 
0 2px 0 #390, 
0 3px 0 #390, 
0 4px 0 #390, 
0 5px 0 #390, 
0 6px 0 #000;
}

Efecto 1

Efecto 2

Copiar todo el codigo

.effect_2
{
font: 80px Times New Roman, Times, serif;
text-shadow: -1px -1px 0px #000, 1px 1px 0px #666;
}

Efecto 2

Efecto 3

Copiar todo el codigo

.effect_3
{
font: 80px Times New Roman, Times, serif;
text-shadow: 2px 2px 8px #fff;
color: transparent;
}

Efecto 3

Referencias

• Text-shadow CSS
• Sombras con CSS 3(box-shadow)
• Texto con bordes utilizando CSS 3 (text-stroke)