CSS3 texto con sombra
Categories: CSS - Tags: CSSYa que cada día se ve vas cercano el uso masivo de CSS3 y HTML5 por lo que he visto por conveniente publicar algunos tutoriales al respecto, desde ya voy diciendo no me pregunten como se hace eso en Internet Explorer ya que o no existen hacks o hay que usar javascripts que hacen algo similar pero más lento o de menos calidad.
Es muy sencillo añadir sombra a un texto en los modernos navegadores (se sobreentiende que IE no es moderno) basta con una simple línea de codigo como esta:
1 | text-shadow: 2px 2px 2px #000; |
Los 2 primeros valores me dan la distancia de la sombra respecto del texto en función de “X” “Y” respectivamente, el tercer valor indica el desenfoque de la sombra (blur) y finalmente el último valor es el color de la sombra.
El ejemplo quedaría así:
Este es un texto de prueba que sólo funciona en Safari 3, Opera 9.5, Firefox 3.1a, Konqueror y otros basados en Webkit
Y en chrome, no?
Eso es sólo un texto, pero si funciona en Safari (webkit) se da por descontado que también en Chrome
Hola Miguel
Este efecto se ve muy bien, gracias, finalsense utiliza un filtro en el texto: filter: glow(color=#000000,Strength=5) y no funciona en firefox, solo en IE, entonces voy a agregar ambos efectos en el titulo y aunque no se veran igual, por lo menos habra efecto en el texto en los dos navegadores…
Muchas Gracias y que tengas un estupendo dia!
[...] había indicado como agregar sombra a nuestro texto, ahora veamos como agregar sombra a nuestros DIV o a cualquier elemento de nuestra página web, [...]