Blog de Diseño web

Como agrego sombra a un texto con CSS3?

Css | Escrito por Ezequiel M. | Enero - 21 - 2010

sombra en textos

Text-Shadow es una de las nuevas propiedades en CSS3 que permite estilizar las fuentes. Esta propiedad es la solución a muchos trucos que se idearon para simular sombras en las fuentes de los sitios web.


Esta propiedad actúa a modo gráfico sin duplicar el texto y sin generar una imagen. Los valores para la propiedad Text-shadow tienen varios parámetros, en primera instancia hay que definir el color, luego el eje X e Y de la sombra y el efecto de difuminado. Es una propiedad oficial que funciona eficientemente en Firefox.

Código CSS:

.sombra{
color:#000000;
font:22px Arial, Helvetica, sans-serif;
text-shadow:#CCCCCC 2px 1px 2px; /*Color de la sombra - Eje X - Eje Y - Difuminado*/
}

Código xHtml:

<p class="sombra">Texto con Sombra<p>

Resultado:

sombras-css3

Te gustó este post? Compartelo en tus redes sociales
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • Meneame
  • Reddit
  • RSS
  • Technorati
  • Twitthis

Comentarios:

Deja tu opinion