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

[.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

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

Efecto 2

Efecto 3

[.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)