Contador de visitas
BIGtheme.net http://bigtheme.net/ecommerce/opencart OpenCart Templates
Inicio / Desarrollo web / CSS: Texto con sombra usando text-shadow + Shadow Filter

CSS: Texto con sombra usando text-shadow + Shadow Filter

Ahora que la mayoría de los navegadores soportan la propiedad text-shadow de CSS3, vamos a ver cómo usarla para crear un interesante efecto de sombra en los textos.

La propiedad text-shadow está soportada en las versiones actuales de Firefox, Chrome, Safari y Opera. En cambio, no es así en Internet Explorer 8, por lo que usaremos Shadow Filter para que también se muestren las sombras en este navegador.

Por otra parte, aunque en la reciente Preview de Internet Explorer 9 que nos ha mostrado Microsoft todavía no se soporta esta propiedad, esperemos que la versión final sí la soporte y podamos usar una única propiedad text-shadow para todos los navegadores.

Para usar este efecto de sombra, añadimos a nuestra hoja de estilos una clase llamada “shadow”, en la que se definen las dos propiedades:

.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}


Si no tuviéramos una hoja de estilos en nuestra página web, podemos ponerla en el head de la siguiente manera:

<style type="text/css">
<!--
.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}
-->
</style>


Para aplicar la sombra a un texto dentro del contenido de la página ponemos por ejemplo:

<p class="shadow">Ejemplo de texto con sombra</p>


Y este sería el resultado si le aplicamos la sombra a un texto con formato de título (h4):

Ejemplo de texto con sombra

 
Después podemos cambiar los valores de la sombra para que quede a nuestro gusto, sin olvidar que tendremos que hacer los cambios en las dos propiedades, intentando que la sombra sea similar en ambos navegadores.

Valores de text-shadow

  1. Color de la sombra. (Ejemplo: #666666)
  2. Desplazamiento de la sombra sobre el eje X. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
  3. Desplazamiento de la sombra sobre el eje Y. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
  4. Cantidad de efecto blur de la sombra. (Ejemplo: 3px)

Más información sobre text-shadow aquí y aquí.

Atributos de Shadow Filter

  1. Color de la sombra (Ejemplo: color=’#666666′)
  2. Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315.  (Ejemplo: Direction=135)
  3. Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)

Más información sobre Shadow Filter aquí.

Acerca de MasterGeek

José Antonio Ramírez (Google+) # Ingeniero Técnico en Informática de Gestión # Fundador y administrador de nGeeks.com # Market Analyst en SocialRep

También puedes ver...

PHP

Cómo procesar archivos HTML como archivos PHP

Hay muchas razones para querer procesar archivos HTML como archivos PHP. Algunos webmasters lo hacen ...

11 Comentarios

  1. Muy buen comentario. Fácil y claro.
    Gracias

  2. Me encanta este efecto! Lo llevaba buscando hace un tiempo gracias!

  3. Más claro no podía ser. La explicación es clara, concisa y precisa. Gracias por el aportte.

  4. Gracias por la claridad de la información… :)
    Lástima que en mi aplicación para un estilo wordpress pre-instalado, en internet explorer 9 saca sombras donde no debe… pero la instrucción es muy clara.
    Gracias!

  5. Gran post, me ha servido de mucho y lo he podido aplicar a mi propia landing de registro de SigoJoven, para no tener que hacerlo como imagen de photoshop y así la letra pueda cargarse como información importante de la página. Gracias

  6. Muchas gracias, muy bien explicado.

  7. Hola, estoy usando una google font y no funciona….

  8. Gratzie! Me funcionó perfectamente (es el primero) :)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>