Sombra interior en la ventana del navegador

21 febrero 2006 ~ Software

Desde hace algún tiempo parece que todo tiene que tener sombra. Tocomocho se une con entusiasmo a esta moda e incorpora una sombrita interior en la parte superior de la página, para separar un poco la interfaz del navegador de la página en si.

sombra interior superior en el bano de la página

No tengo claro que ésto realmente quede bien, el tiempo lo dirá, pero si Corel tuvo la poca vergüenza de salirnos con el degradado cónico no me voy a cortar yo ahora por una sombrita de nada. La pongo porque puedo ponerla y santas pascuas.

La técnica es facilita. Necesitamos un div con un fondo transparente en la coordenada 0,0 y que se quede ahí siempre, aunque hagamos scroll.


<body>
<div id="fnavegador"></div>
...

Los usuarios de IE, una vez más, se verán privados de la gracieta, al usar un png para la imagen de fondo. Para ocultarles el div, lo definimos con hijo de la etiqueta body y así el magnífico navegador de los de Redmon se hará el sueco con los estilos.


body > #fnavegador {
position:fixed;
top:0;
width:100%;
height:8px;
background-image: url(../images/f_navegador.png);
background-repeat:repeat-x;
z-index:1000;
}

Nota: el exagerado z-index de 1000 sirve para que las cosas que tengan aplicado un float no se monten por encima de la sombra.

Sombra aquí y sombra allá

10 marzo

Parece que a Rubén y a Pablo les ha gustado la sombrita, me alegro. A ver si os hago una más apropiada para fondo claros, la que estais usando está pensada para tocomocho que tiene fondo oscuro y os queda un poquito rara.

ruben ~ 3 marzo 06

me ha gustado mucho este truco. Si puedo te lo copio, aunque no sé yo :-P.
Saludos

jorge ~ 3 marzo 06

Pues por lo que veo sí que te funciona.

Por cierto, no me seas cutre y cópiate la imagen de fondo en tu servidor, por favor, que estás llamando directamente a la mía y me vicias las estadísticas.

ruben ~ 5 marzo 06

ups!, no me había dado couenta. ya está hecho. Pero ahora el problema que tengo es como poner el codigo para que el explorer lo ignore y no lo visualize. ¿Me podrías ayudar?
Saludos

Jorge ~ 5 marzo 06

En tus estilos has declarado el estilo “fnavegador” como:

#fnavegador {...}

Y tienes que declararlo así:

body > #fnavegador {...}

Con esto dices: “el elemento con id ‘fnavegador’ que sea hijo del elemento ‘body’, y como IE no entiende eso, ignora el estilo por lo que pintará simplemente un div vacío o sea nada.

Pablo Martínez-Almeida ~ 14 marzo 06

Pues a mí me gusta así para Abundando. Aunque debo reconocer que el que sabe de estos temas eres tú ;)

Gracias por el truco.

Ignatius ~ 23 abril 06

La imagen la podrías recortar a 10×8 px. (por ejemplo) y luego en el css poner: background: url(../images/f_navegador.png) repeat-x;

Con eso te ahorrarías unos bytes :)

RicPlan ~ 24 mayo 06

Muy bueno este efectillo, si señor.
De hecho ya lo he aplicado y me gusta bastante… tanto que hasta abajo también he metido uno.
Mi pregunta ahora es ¿Como se verá en Safari?
Saludos

Jorge ~ 24 mayo 06

Pues creo que se igual de bien que en Firefox, pero ahora me haces dudar. Esta noche te lo digo, que en la oficiona sólo tengo PC.