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:
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:
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
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);
36 comentarios:
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.
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
Lo veo y no lo creo :O hasta cuando selecciono el texto tiene sombra!
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
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
Muy bueno, me encanta el efecto de sombra en texto como en bordes, hay que probar esta :)
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 :)
genial‼ :-) un efecto muy bueno cuando se aplican dos sombras y los colores correctos.
De qué forma y dónde se añade el filtro J.Miur? lo hice siguiendo los pasos del enlace pero no furula :(
Gem@:
Se coloca directamente en la etiqueta a cambiar. Ahí veo que lo has aplicado a los autores de los comentarios ... ¿llegué tarde? :D
En la etiqueta span que envuelve los autores puede añadirse el filtro?
Si. Eso veo que tiene colocado, Gem@:
.autorcomentario {
color:#940F04;
font-size:18px;
text-shadow:3px 3px 3px #505050;
}
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í
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.
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.
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.
Yo uso el 8 y no veo cambios :(
Me vas a tener que prestar las lentes.
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.
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 ;)
Sí, no queda muy bien que digamos, verdad? :D
Pero, por lo menos sabemos que ahora funciona.
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?
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.
Pero en que quedamos? Se ven feas o no se ven? No entiendo :o
O sea que no hay filtro no?
¿Feas? eso es poco decir se ven espantosas como una estela en día nublado.
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.
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?
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 :)
Como siempre, tendría que ver tu ejemplo online.
Espero haber entendido bien porque es la primera vez que leo "ejemplo online", jejeje, el ejemplo que busco imitar esta aquí
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.
Oh, disculpa, es en mi blog de pruebas asicious Gracias y tengas una buena tarde
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.
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. :)
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.
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.
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
¿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 ...