JMiur [E]

sombras


sombras


más sombras


Un tweet de Ariane me llevó a una entrada de CSS No Lanche. El título era prometedor: CSS text-shadow. Sombras en los textos usando CSS.

La verdad es que no tenía muchas esperanzas porque es algo de lo que se habla desde hace mucho y, aunque está definida y aceptada por la W3C, sólo podía usarse en Safari. Pero, oh sorpresa, parece que ahora también puede aplicarse en Firefox, lo cuál es un avance.

La propiedad es muy sencilla y tiene cuatro parámetros:
text-shadow: posicionX posicionY amplitud color;
posicionX indica el desplazamiento horizontal de la sombra con respecto al texto (positivos hacia la derecha, negativos hacia la izquierda)
posicionY indica el desplazamiento de la sombra con respecto al texto (positivos hacia abajo, negativos hacia arriba)
amplitud es el tamaño de esa sombra, a mayor valor, el efecto de blur es mayor
color es obviamente el color de la sombra

un ejemplo:
text-shadow: 10px 5px 5px #000;
Esta serían las definiciones de los tres primeros ejemplos:
h1.demoSombras1 {
color: #000;
font-size: 130px;
text-shadow: 5px 5px 15px #AAA;
}

h1.demoSombras2 {
color: #999;
font-size: 130px;
text-shadow: 10px 10px 10px #000;
}

h1.demoSombras3 {
color: #345;
font-size: 80px;
text-shadow: 1px 1px 1px #ABC;
}
donde, en todos los casos, el HTML es un encabezado:
<h1 class="nombreClase"> el texto </h1>

muchas sombras


En este otro ejemplo, se agregan dos sombras, separadas por comas:
h1.demoSombras4 {
color: #101921;
font-size: 80px;
text-shadow: 3px 3px 10px red, -3px -3px 10px yellow;
}
Para versiones anteriores a Firefox 3.5, hay una extensión llamada Text Shadow 0.3.2008042901 que permite simular la propiedad.

Aparentemente, en Safari sólo se admite una sombra, Opera tiene un máximo y en los navegadores Mozilla la cantidad es infinita. Para Internet Explorer hay un filtro que hace algo similar: por ejemplo
filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);

shadow en Internet Explorer

36 comentarios:

Jorge da Silva  

Muy buen artículo, hace tiempo que acompaño tus novedades, pero la verdad, este es el mejor, muy bueno. Voy a tratar de implementarlo en mi blog.

Responder
sephi  

hola jmiur solo pasaba a saludar y haber que tenias de new en el blog, pues sigo por aca mitoteando articulos jeje saludos gran jmiur

Responder
egoloco  

Lo veo y no lo creo :O hasta cuando selecciono el texto tiene sombra!

Responder
Anónimo  

Caro Jmiur,

Mais um belo post! Atente, porém, para um pequeno erro de digitação:
Quando você fala nas propriedades (text-shadow: posicionX posicionY amplitud color;), ao explicá-las, foi repetido o posicionX, excluindo-se assim, a posicionY.

No mais, excelente, como sempre!

[]'s Inácio Rolim

Responder
Marcos Gabriel  

Já conheci esta propriedade , o que me deixa xateado é me impedir de criar varios sites que poderiam ser muito bunitos apenas com efeitos CSS 3.0 e funções de HTML5 simplesmente pq o IE não tem suporte a tais .. isso é ruim não so para bloggers mas tb para pessoas que criam sites para outras plataforma como eu

Responder
Gem@  

Muy bueno, me encanta el efecto de sombra en texto como en bordes, hay que probar esta :)

Responder
JMiur  

REVELANDOYA: espero que te sea útil, es fácil y las cosas que hacen son muy raras.

Saludos, javfanel. Gracias por pasar.

egoloco: Para divertirse un rato :)

uhugalera: Ohhhh listo. Ya está corregido. Eso pasa por copiar y pegar :D

Marcos Gabriel: Yo también la conocía pero no sabía que ya era posible usarla en Firefox. Tienes razón, es unapena que IE no las implemente. Por lo que vi, tampoco Chorme pero no estoy seguro.

Gem@: Es para jugar un rato. Aunque no funciona en algunos navegadores, nada impide experimetar y divertirse :)

Responder
Bonzu Pipinpadaloxicopolis III  

genial‼ :-) un efecto muy bueno cuando se aplican dos sombras y los colores correctos.

Responder
Gem@  

De qué forma y dónde se añade el filtro J.Miur? lo hice siguiendo los pasos del enlace pero no furula :(

Responder
JMiur  

Gem@:
Se coloca directamente en la etiqueta a cambiar. Ahí veo que lo has aplicado a los autores de los comentarios ... ¿llegué tarde? :D

Responder
Gem@  

En la etiqueta span que envuelve los autores puede añadirse el filtro?

Responder
JMiur  

Si. Eso veo que tiene colocado, Gem@:

.autorcomentario {
color:#940F04;
font-size:18px;
text-shadow:3px 3px 3px #505050;
}

Responder
Gem@  

No me había dado cuenta que me respondiste aquí :O
Lo tenía añadido así como dices pero no veo que resulte.
(La imagen de esta entrada se superpone al texto J.Miur) ¿o soy yo que lo veo así

Responder
JMiur  

Gem@: Sí, acá cometí un error al cambiar el CSS de los título. No me di cuenta pero ya lo corregí.

En tu blog, lo veo bien. Lo único que agregaría es:
.comentacontador {
............
line-height:1;
}
para que en las versiones de IE menores a la 8 el número de los comentarios se vea completo y no un poquito cortado.

Responder
Gem@  

Gracias J.miur no me había dado cuenta de ese detalle,sin embargo el filtro sigue sin causar efecto.
No sé si lo mejor es pasar de IE pero me supera saber que ofrecen una solución que no funciona.

Responder
JMiur  

Lo he visto, en IE8 anda bien pero en IE7 no, es incomprensible ya que no veo que haya nada malo en lo que has colocado.

Responder
Gem@  

Yo uso el 8 y no veo cambios :(
Me vas a tener que prestar las lentes.

Responder
JMiur  

Pués aquí va la CAPTURA :$

Ahora, revisando, he notado que falta algo que creo que habíamos hablado. Microsoft requiere que los filtros se apliquen a etiquetas de tipo layout es decir, contenedores y para que una etiqueta como SPAN lo sea, no sólo debe tener display:block sino también definido su tamaño.

Agrégale, entonces width al autor (lo mismo habrá que hacer con el contador.

.autorcomentario{
...........
width: 450px;
}

Poniendo eso, la captura en IE7 es la misma que en IE8.

Prueba y me cuentas.

Responder
Gem@  

Eres fantástico de verdad, conseguiste averiguarlo. He probado tal como dices queda como en tu captura, varié el width y sige mostrando un aspecto como te diría... casi mejor si la sombra jajajaja me recuerda los títulos de las películas del Oeste falta el león de la Metro Goldwyn Mayer jajajaja
Gracias mil de todas formas, una razón más para quejarme de Explorer ;)

Responder
JMiur  

Sí, no queda muy bien que digamos, verdad? :D

Pero, por lo menos sabemos que ahora funciona.

Responder
Admin  

JM no me queda claro a que conclusión llegaron Gem@ y vos, con respecto a las sombras, yo las tengo aplicadas en Te Propongo en la fecha, los nicks de los comentarios y algún otro título.
Con FireFox se ve bárbaro, con Chrome también, pero con IE8 que es el que tengo, no sale nada como pones en esa captura, simplemente no sale sombra alguna, es una letra como cualquier otra...
Y el filtro se puede usar para que IE reconozca las sombras? eso no pude entenderlo, ahí me perdí :o
Yo no tengo ningún filtro, vos como ves los títulos que te digo?

Responder
JMiur  

No hablamos al respecto pero, en mi opinión, las sombras en IE se ven feas. Como no es algo que moleste, me parece que no hay problema en usarlas aunque en IE no se vean.

Responder
Admin  

Pero en que quedamos? Se ven feas o no se ven? No entiendo :o
O sea que no hay filtro no?

Responder
Gem@  

¿Feas? eso es poco decir se ven espantosas como una estela en día nublado.

Responder
JMiur  

k_nelita:
Usando text-sahdow, en IE no ves otra cosa que el texto normal. Si usas la propiedad filter, se verá una sombra pero, será muy diferente. Como dice Gem@: ESPANTOSA :D

Conviene usar la propiedad y que se vea en FF, Chrome, etc y olvidarse de IE y que allí se vea el texto de manera normal.

Responder
Anónimo  

Que desepcion con el Internet Explorer, es una lastima que la mayoria de gente lo ocupe. ¿Hay algua esperanza que en algun momento el css se vuelva estandar?

Responder
Cêz  

Hola JMiur, estaba esperanzado de entender de otra forma, es decir, no he conseguido ver la sombra en el nombre de cada autor de los comentarios, seguí el consejo de Gema de dar una clase a la etiqueta span de forma que envuelva el enlace del autor del comentario, mi captura esta aqui

y después agregué css antes del ]]>
.autorcomentario{
color: #940f04;
font-size: 17px;
text-shadow: 3px 3px 3px #505050;
}

Y sigo sin ver el efecto de sombra en el autor tal como me gustaria la imagen 2 de tu entrada. En qué me estoy equivocando?

Gracias :)

Responder
JMiur  

Como siempre, tendría que ver tu ejemplo online.

Responder
Cêz  

Espero haber entendido bien porque es la primera vez que leo "ejemplo online", jejeje, el ejemplo que busco imitar esta aquí

Responder
JMiur  

Como dices que has colocado la clase CSS y no funciona, lo que debo ver es el ejemplo concreto, el blog donde está colocado eso.

Responder
Cêz  

Oh, disculpa, es en mi blog de pruebas asicious Gracias y tengas una buena tarde

Responder
JMiur  

Pués allí no se ve que el nombre del autor tenga una etiqueta SPAN con esa clase definida. Fíjate en el código fuente que muestra el navegador y veras que la única referencia a .autorcomentario es la regla de estilo y nada más.

Responder
Cêz  

Tienes razón, pusé span en el lugar que no era indicado porque tenía dos códigos muy parecidos entre sí y por eso no me funcionaba el efecto. Gracias y aprendí algo nuevo: ver el código fuente desde el navegador. :)

Responder
cursowebmarratxi1  

Microsoft se emperra en lo suyo? pues nada: ¡BOICOT!.
Se podría crear una especie de aviso en las webs que dijera más o menos esto: "debido a que la empresa Microsoft se empeña en monopolizar el mercado (para cobrar licencias) no aceptaando los estándares de desarrollo Web y esto obliga a los programadores a dedicar mucho tiempo buscando soluciones; NO USES INTERNET EXPLORER. Usa Firefox, Chrome, Opera, Safari (si hay otro que siga los estándares se pone también)" Y con enlaces a descarga de estos navegadores. Unas instrucciones para bobos de cómo instalarlos y que le den ya al dictador. Gracias.

JMiur  

Cada cuál debe usar el navegador que quiera y cuantas más opciones existan: mejor.

En todo caso, actualiza IE a su versión 9 o 10 y listo.

Si hablamos de monopolios ... ¿Google no lo es? :-)

Hay que dejar que la gente elija lo que quiera y no descalificar a nadie.

Responder
Unknown  

Gracias por los codigos para poner sombra en los textos. Yo lo que suelo hacer es descargarme muchas veces fuentes con sombras de (click aqui)
Buen blog
Saludos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR