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

Articulos relacionados:

    • Como evito el desborde de texto con CSS3? Word-wrap es una propiedad creada por Microsoft para la nueva versión de CSS. Esta propiedad soluciona el “problema de cadena de texto” cortándolo en partes para que las palabras largas no desborden de su caja o contenedor. La propiedad con el valor a utilizar en la hoja de estilos seria word-wrap: break-word, y para este caso
    • Como creo bordes redondeados con CSS3? La problemática de simular bordes redondeados con recorte de imágenes y javascript se soluciona con la llegada de CSS3. La propiedad “Border-radius” permite redondear cajas con solo especificar un par de valores. Esta propiedad no esta estandarizada y para su óptimo funcionamiento necesita de propiedades soporte para los motores Webkit y Mozilla. En cada propiedad “Border-radius” se
    • Como transformo todo el Texto a Mayúsculas? Si hay algo en lo que se destaca CSS, es en el formateado de Texto. Mediante una simple propiedad, podemos transformar todo un texto a mayúsculas en un abrir y cerrar de ojos. Con la propiedad Text-transform: uppercase; transformamos todo el texto que esta dentro de las etiquetas xhtml que estemos usando, en este caso, pasamos

Comentarios:

  1. Gracias muy buen dato

    Lo dijo VhoScript el 18 Abril 2010 a las 6:29
  2. Buenisimo el tip! muchas gracias!

    Lo dijo marcelo el 5 Mayo 2010 a las 7:27

Deja tu opinion