JMiur [E]

Lentamente, los navegadores van incorporando opciones de diseño aunque, claro está, cada uno lo hace a su modo y con sus propia sintaxis; pequeño detalle que ... nos vuelve locos.

Las sombras son una de esas opciones y ni la w3.org tiene claro que hacer con ellas y ha sido removida temporalmente de las especificaciones del futuro CSS3. Se soponía que uno podría aplicarlas de manera similar a esto:
box-shadow: 5px 5px 5px #AABBCC;
Pero, pese a que box-shadow aún no funciona, algunos navegadores siguen teniendo la posibilidad de agregar sombras, no solo a los textos usando la propiedad text-shadow, sino también a bloques, es decir, a etiquetas como DIV, P o incluso IMG y  si bien se recomienda que esos bloques estén dimensionados con width o height, sólo es necesario en versiones de Internet Explorer anteriores a la 8.
box-shadow: 5px 5px 5px #ABC;
en Internet Explorer 8 (ver detalles):
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
en Internet Explorer en general (ver detalles):
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);

Este es un texto dentro de un DIV

Bueno, eso del mismo resultado es un decir porque en IE las sombras se muestran "duras" más estáticas pero, algo es algo.

Para aplicar el efecto, he declarado una clase y la he agregado a un DIV:
<style>
.sombra {
/* propiedades normales */
border-radius: 10px;
background-color: #456;
color: #DEF;
font-size: 24px;
height: 30px;
margin: 20px auto;
padding: 10px;
text-align: center;
width: 400px;
/* propiedades de la sombra */
box-shadow: 5px 5px 5px #ABC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);
}
</style>

<div class="sombra"> Este es un texto dentro de un DIV </div>
De manera similar, prodría aplicarse a un elemento más complejo:


Esta es una imagen dentro de un DIV

La sintaxis para Firefox y todos los navegadores basados en Gecko es la siguiente (los que usan WebKit son similares, sólo cambia el nombre de la propiedad):
box-shadow: offsetX offsetY blurRadius spreadRadius colorRGB;
offsetX offsetY indican la distancia horizontal y vertical del comienzo de la sombra; valores positivos colocan la sombra debajo; valores negativos, colocan la sombra arriba:

box-shadow y box-shadow
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV

blurRadius indica el efecto blur o esfumado, cuanto más alto sea, más se esfuma y, por defecto es 0:

blurRadius 1blurRadius 10blurRadius 50
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV

spreadRadius es el tamaño de esa sombra, su ancho y su alto; un valor de 0 hace que sea tan grande como el elemento:

spreadRadius 5spreadRadius 10spreadRadius 20
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV

Hay un dato extra que podemos incluir: la palabra inset que hará que la sombra, en lugar de estar afuera, esté adentro. Un ejemplo:
box-shadow: -110px 2px 30px 1px #AABBCC inset;

Este es un texto dentro de un DIV

Para tener esa sombra en ambos ángulos, agregamos otra definición, separándola con una coma. De este modo:
box-shadow: 5px 5px 5px #ABC, -5px -5px 5px #ABC;

Este es un texto dentro de un DIV

La propiedad puede ser combinada con cualquier otra (bordes, fondos, curvas) y generar cualquier tipo de efecto extraño:
box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Este es un texto dentro de un DIV


En Internet Explorer lo que se usa es uno de los tantos filtros disponibles, la propiedad básica es filter aunque en IE8 se habla de -ms-filter, en realidad, ambas son la misma; la única diferencia es que en un caso, los valores se colocan entre comillas y en el otro, no:
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(propiedades)"; 
filter: progid:DXImageTransform.Microsoft.Shadow(propiedades);
Cada una de esas propiedades se separa con una coma y hay disponibles cuatro:

color indica el color de la sombra en formato RGB
direction establece la direccion (un ángulo) de la sombra y es un valor en grados (por defecto 225)
enabled puede ser false o true y habilita o deshabilita la sombra
strength es el tamaño de la sombra, cuánto se extenderá y su valor máximo es 255

filter: sólo en Internet Explorer
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV
Este es un texto dentro de un DIV

Las sombras pueden agregarse y quitarse a voluntad, por eso podríamos crear alguna clase de efecto hover. Las quitamos con:
box-shadow:  none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);


Al colocar el cursor encima, se mostrará una sombra ...

<style>
.sombra {
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);
}
.sombra:hover {
box-shadow: 5px 5px 5px #AABBCC;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
</style>

<div class="sombra"> ............... </div>

17 comentarios:

Gem@  

Yo tengo los bordes de las imágenes así con ms-filter ¡¡pero que buena explicación!!

Responder
Jared  

IM-PRE-SIO-NAN-TE Tutorial.. increíble.

Responder
memoadian  

interesante esto de las sombras, y si en IE se ven algo como raras, más bien parecen 3D, vengo leyendo este blog desde hace mucho y Jmiur usted es muy bueno por eso me atrevo a pedirle un favor, disculpe la osadia.

hay un script que se usa en la plantilla gamezine que tengo en mi blog manganimemas, el cual es un slide muy bonito.aqui el problema es que quiero cambiar a mi plantilla pero no encuentro la forma de llvarme el slide, cheque usted ese slide y verá cuan bonito es, me parece que podría enseñarnos a usar los sripts en blogger de manera general y si lo hace con ese, muchos podrían usarlo y seria un toque elegante a su blog.

saludos cordiales.

memoadian

Responder
JMiur  

Gem@: Lo que has hecho en tu blog con las sombras es fantástico. Un gran ejemplo de lo que puede conseguirse .)

Jared: Espero que sea útil y se empiece a utilizar más de lo que se hace hasta ahora. Da muchas posibilidades y evita usar imágenes. Es un gran recurso.

memoadian: En IE, por ahora, no funcionan igual; es que todavía no se han puesto de acuerdo sobre cómo será esto en el futuro. De todas maneras, ese navegador tiene una serie de filtros muy poderos para hacer efectos.

Por lo que veo, ese script requiere JQuery así que deberías tener todos estos scripts para volverlos a agregar:

http://file1.hpage.com/000258/25/html/jquery-1.2.6.min.js
http://file1.hpage.com/000258/25/html/superfish.js
http://file1.hpage.com/000258/25/html/hoverintent.js
http://file1.hpage.com/000258/25/html/glide.js
http://file1.hpage.com/000258/25/html/slider.js
http://file1.hpage.com/000258/25/html/hover.js
http://file1.hpage.com/000258/25/html/jquery-ui-personalized-1.5.2.packed.js
http://file1.hpage.com/000258/25/html/sprinkle.js

Supongo que algo de CSS debe tener, sólo veo esto:
#mygallery{overflow: hidden;}

Lo que puedes hacer es editar el elemento HTML donde está ahora: HTML10 y copair su contenido; de esa manera, podrás volverlo a agregar en otra plantillas.

Dos sugerencias; primero, haz una copia de la plantilla actual, guárdala en tu PC. Luego, crea un blog de pruebas y allí, coloca la nueva; de esa manera, recién cuando veas que allí funciona, cambias la otra; es el método más seguro de hacer estas cosas sin que el blog original se resienta.

Responder
memoadian  

muchas gracias señor Jmiur, lo tomaré en cuenta, asi es tengo esos scripts, y de css vaya que tiene, es un enredijo cuando menos para mi, si tengo un blog de pruebas, pero no lo logro, en fin, como uted dice pasaré la plantilla original al blog de pruebas, lo que pasa es que quize empezar con el tutorial que usted puso de la plantilla mínima (modificando la plantilla) pero seguro algo se podrá hacer.

saludos.

Responder
Damned  

Oh, esto es genial... ¡muy buena explicación! Acudiré a este post muuuchas veces... :)

Responder
Graciela  

Sr. Jmiur qué bella explicación, desde que comenzó con los audiovisuales se nos hace fácil interpretarlo :D

Responder
José GDF  

A mi lo que de verdad me repatea es que Opera reconozca las sombras, pero continúe sin redondear las esquinas.

Así tengo el diseño nuevo de mi blog, parado, porque no consigo que se vea igual o parecido en los diferentes navegadores.

Responder
Bonzu Pipinpadaloxicopolis III  

Ojalá y en el futuro podamos hacer un uso "normal" de este efecto, :S

Responder
JMiur  

memoadian: Lo mejor, siempre es tener un blog de pruebas, evita dolores de cabeza ... alguno, por lo menos :D

Damned: Que se divierta :D

Graciela: Andamos audiovisuales ... bah, falate el audi :D

José GDF: No hay nada que hacer al respecto, ningún navegador funciona igual que el otro :D

Bonzu: Eso podrá ocurrir pero, siempre habrá otro; es algo que ocurre desde Netscape en adelante; es parte de la evolución de la web.

Responder
Chipilofan  

Hola pasaba visitando jeje despues de ausentarme un tiempo jeje, espero este todo bien, seguire pasando muy pronto, me gusta tanto tu blog, no habra forma de enlazarnos o colocar banner en nustros blogs de ambos, espero puedas responderme te agradezco y te deseo lo mejor!

Att. El Mundo Web de Chipilofan

http://chipilofan.blogspot.com/

Responder
Bilosony2™  

Muy buena la explicacion ya as e probado todas con exito:)

Pero como aria si necesito solo poner sombra en la parte inferior nada mas??

Suerte!!!:D

Responder
JMiur  

Colocando un valor de cero en el primer parámetro; por ejemplo:

-moz-box-shadow: 0 5px 1px #AABBCC;

Responder
Carolina CameronTags  

JMIUR, aqui con una nueva inquietud. Le puse sombras a los lados del blog, puse esto en #outer-wrapper:

sombra:
border: #021b2c;
-moz-box-shadow: 0px 0px 25px #021b2c;
-webkit-box-shadow: 0px 0px 25px #021b2c;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#021b2c,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#021b2c,direction=125,strength=5);
}
Quedó bastánte bien, pero en IE no puedo lograr que la sombra se vea a ambos lados, si cambio la direction se ve a los grados que coloco pero no como en Firefox, igual a ambos lados. Por el lado de Firefox me gustaría que no se viera la sombra debajo (footer), pero cambiando valores no logro quitar la sombra. A lo mejor estoy poniendo mal los parámetros o en el lugar equivocado. En fin, si se puede quitar la sombra de abajo, me podrías ayudar?.Y con IE, a lo mejor hay que dejar las cosas así (no es por mi, que no lo uso).Buen fin de semana y desde ya, gracias.

Responder
JMiur  

No me parece que los parámetros estén mal. Creo que funciona de ese modo, es decir, las sombras rodean al rectángulo. Una idea que se me ocurre es poner dos sombras más o menos así:

-moz-box-shadow: -10px -10px 25px #021B2C,10px -10px 25px #021B2C;

No sé si puede servir de algo la idea pero piensa que las sombras en realidad, también son recángulos. En ese ejemplo, lo que hago es poner dos, desplazados hacia amboos lados: el primero coloca una sombra a la izquierda, el segundo coloca una sombra a la derecha y en ambos, el valor de Y (vertical) es negativo para desplazarlo hacia arriba y que no se vea.

Con IE ya se me queman los papeles de todo esto que es demasiado nuevo para mi pobre cerebro :D

Creo que también es posible hacer algo similar porque los filtros de IE pueden combinarse así que habría que ver si eso ayuda. De todas formas, siempre he visto que en IE, las sombras son bastante duras.

Responder
Carolina CameronTags  

Gracias por tu ayuda JMIUR. Estuve experimentando con tus parámetros y queda bien, solo que debajo del footer sigue apareciendo un espacio vacío y la sombra es mas intensa. En Chrome, no, queda perfecto.En IE, seguimos con los mismos problemas (directamente lo dejé sin sombra para IE; al menos no parece que le falta algo :D). En síntesis: dejé los parámetros anteriores, no le presté atención a IE y aprendí un montón con tu clase sobre sombras (las puse en imágenes). Gracias de nuevo y buen fin de semana.

Responder
JMiur  

Es un tema complejo porque por un aldo ES complejo y por el otro, cada navegador no sólo tiene códgos diferentes sino que el resultado es muy diferente. Todo se resume en prueba y error.

Coincido que en IE es mejor no usar sombras, suelen verse feas.

Lo que crea el espacio ese debajo del sitio, es, justamente la sombra.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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