JMiur [E]

El efecto hover sobre el header del blog tal como lo muestra Templates Novo Blogger es realmente muy sencillo de realizar y una excelente idea que Ariane extiende a otros elementos de encabezado como los títulos de las entradas y los de la sidebar. Me voy a limitar a hacer lo mismo sólo en el header y así continuar esta serie para tratar de entenderlo.

El concepto general es siempre el mismo para cualquier cosa y, en realidad, es el mismo para cualquier efecto hover pero, por lo general, estamos a acostumbrados a usarlo sólo en los enlaces:
a {color: #CCCCFF;}
a:hover {color: #FF6666;}
Este efecto de cambiar propiedades CSS cuando colocamos el puntero del ratón encima de algo no está limitado a los enlaces y funciona en cualquier navegador moderno incluyendo IE7 e IE8 así que nada impide aplicarlo a cualquier cosa, incluyendo DIVs.

Aquí, siguiendo la misma idea, lo voy a aplicar sobre el header simplificado que utilizaba en la entrada anterior.

Usando una plantilla mínima, hago algunos cambios en Diseño | Fuentes y Colores y luego, vamos a colocarle una imagen de fondo a todo el blog. Para eso, le agregamo una propiedad al body:
body {
background: #8B9AA9 url(URL_imagenFondo) repeat-x left top;
.......
/* el resto lo dejo como está */
.......
}
Esa imagen es sólo una franja vertical que se repite de izquierda a derecha (repeat-x) y que tiene unos pocos pixeles de altura así que el resto, se rellena con un color de fondo (#8B9AA9).

Ahora, colocaremos una imagen de fondo que sirva como logo. Esta imagen tendrá un ancho equivalente al ancho del blog (es el valor de width) y una altura cualquiera (en este caso, 100 pixeles):
#header-wrapper {
margin: 0 auto 10px; /* está centrado y tiene un pequeño margen que lo separa de los posts */
height: 100px; /* el bloque debemos dimensionarlo con una altura igual a la imagen */
width: 860px; /* y el ancho total que es el ancho del blog */
}
#header-inner {
background: transparent url(URL_imagenLogo) no-repeat left top; /* es la imagen a usar */
height: 100px; /* debemos indicar la altura de esa imagen de fondo */
width: 100%; /* que ocupará todo el ancho del blog */
}
#header a { /* esa imagen es un enlace en las páginas interiores así que le damos los mismo valores */
display: block; /* transformamos el enlace en un rectángulo de cierto tamaño */
height: 100px; /* indicar la altura de la imagen de fondo */
width: 100%; /* indicamos que ocupa todo el ancho */
}
#header-inner:hover { /* es el efecto hover así que ponemos la segunda imagen */
background: transparent url(URL_imagenLogoHover) no-repeat left top;
}
El resultado será un header que cambiará de imagen si ponemos el cursor encima.

Ahora bien, un detalle a tener en cuenta es que si las imágenes son muy grandes, el efecto demorará porque la segunda imagen deberá ser cargada así que habrá que esperar que aparezca; eso pude ser importante ya que a veces, el efecto no será apreciable.

Para solucionarlo podemos recurrir a la vieja técnica de los sprites ¿Cómo es esto? En lugar de usar dos imágenes, usaremos sólo una. La mitad superior será la imagen "normal" y la mitad inferior será la imagen "hover". Así que esa imagen tendra un ancho igual al blog pero el doble de su altura (en este caso, 200 pixeles).


Cuando colocamos una imagen de fondo a un elemento no importa su tamaño. La imagen se ubicará donde le digamos. Si es muy chica, el resto del elemento se llena con el color indicado y, si la imagen es muy grande, se corta y alguna parte queda oculta. Esa característica es la que vamos a aprovechar.

¿Cómo posicionamos la imagen del fondo? Por defecto, se muestra empezando desde arriba a la izquierda y eso significan los últimos dos valores (left top). Es muy común leer que dicen 50% para centrarla pero, esos valores pueden ser cualquier otro así que podríamos decirle que en lugar de mostrar la imagen desde arriba, con lo cual la mitad queda oculta porque el espacio disponible es de sólo 100 pixeles de alto, la muestre desde a bajo y entonces, lo que se ocultará será la parte de arriba.

Cambiaríamos entonces las definiciones:
#header-inner {
background: transparent url(URL_imagenLogoDoble) no-repeat left top; /* es la imagen a usar */
height: 100px; /* debemos indicar la altura de esa imagen de fondo */
width: 100%; /* que ocupará todo el ancho del blog */
}

#header-inner:hover {
background-position: left bottom;
}
La imagen es una sola así que sólo se carga una vez y cuando realizamos el efecto, simplemente le decimos que se mueva para arriba (top) o para abajo (bottom).

El resultado puede verse en este blog de pruebas.

18 comentarios:

jesgo  

Excelente

Responder
JMiur  

Es una muy buena idea de Ariane :D

Responder
javier  

Hola en este momento estoy navegando por la red y me encontré con tu blog que seguramente esta muy bueno, pero me es imposible verlo a todo, es por eso que te mando un saludo y espero que le sigas poniendo tantas ganas como hasta ahora.


Firma: http://lomascodiciadodelplaneta.blogspot.com

Responder
Graciela  

La plantilla de Ariane y todos los efectos que tiene son encantadores, se nota la femenidad, maravillosa!!! besitos!!!

Responder
JMiur  

Se nota, Graciela :D

Responder
L  

JMiur...no es que quiera copiarte el blog pero como haces para alinear la cabecera con las entradas y la barra lateral estoi haciendo una cabecera con html(ya elimine la anterior)
ayudate con eso . y
gracias de antemano

Responder
JMiur  

Me tendrías que explicar más o mostrarme un ejemplo para poder entender de que se trata porque no entiendo bien a que te refieres con alinear o qué es lo que te sale desalineado.

Responder
L  

@JMiurgracias por responder..
este es mi blog:(aun sigo trabajando en el diseño)
http://ecua-sagas.blogspot.com/
quisiera alinear el borde izquierdo de la cabecera con el margen de las entradas y el borde derecho con el borde de la barra lateral...
ya si me toca cambiar el tamaño de la cabecera . lo cambio. pero quisiera ajustar esa cuestion
Nota: aun soy novato en en todo esto de paginas y blog asi que
Gracias!! por toda la informacion

Responder
JMiur  

Veamos si es posible en esas plantillas nuevas porque son rebeldes.

Busca esto:

.header-inner .section {
margin: 0 16px;
}

Y cámbialo agregando estas dos cosas:

.header-inner .section {margin: 0;}
.header-inner .widget {margin: 0;}

Con eso eliminas los márgenes del header.

Ahora, parece que tienes una tabla; modifica la etiqueta TABLE de este modo, eliminado atributos innecesarios, y diménsionándola para que mas o penos ocupe ese ancho visible:

<table width="970" background="http://lh5.ggpht.com/_XeiRSEjImuw/TTO49xECrAI/AAAAAAAAAME/9qidm6gh04o/s800/fondo.png" style="margin-left: 15px;">

Responder
L  

@JMiur GRacias!!!
me funciono ...Cheverisimo
muchas gracias

Responder
Nitra Games 360  

Jmiur tengo varias dudas o quizas por decirlo asi problemas, mira cree un header en photoshop con las dimenciones de 970x140 y quedo perfecto y entonces lo subi a blogger en diseño > elementos de pagina > y en el gadget del Header le di click en Editar y elimine la imagen que estaba subi otra desde mi pc y seleccione la opcion "En lugar del Titulo y la Descripcion" y lo guarde pero al ver el blog la imagen esta toda pixeleada y mal calidad de la imagen, siempre habia subido imagenes pero ahora pasa eso cada imagen que subo aparece como pixeleada y de mala calidad y son de las mismas medidas que en el codigo estableci !! que sera?? la imagen se ve bien cuando la abro en mi pc pero cuando la subo a blogger se ve horrible no se que paso !

Otra duda esque en las listas osea en la sidebar ul li, coloque un borde-bottom de un color para que cuando creara un menu de links se viera la linea divisora, entonces como le ago para que en las listas de enlaces de las sidebars osea la linea divisora de un enlace a otro envez de que aparesca la linea de color, aparesca una imagen como de linea que yo hize??

mi blog es: http://nitragames360.blogspot.com/

oye Jmiur te parece que la plantilla que diseñe para mi blog esta buena??

Espero que me entiendas y que me ayudes con esos 2 problemas D:

Responder
JMiur  

Me alegra que se solucionara, L :D

Nitra Games 360:
La imagene stá pixelada porque estás indicando una miniatura de 400 pixels de ancho:
http://2.bp.blogspot.com/_Nvr4cjMytyk/TTkdJ4TrE4I/AAAAAAAABY4/9guETjfAONA/s400/xbox360header.png
la URL debería ser:
http://2.bp.blogspot.com/_Nvr4cjMytyk/TTkdJ4TrE4I/AAAAAAAABY4/9guETjfAONA/s00/xbox360header.png

Si lo que quieres hacer es agregar una imagen a cada item de la lista, debes colcoar esa imagen en el background.

Responder
Nitra Games 360  

Jmiur la imagen se me sigue pixeleando ya lo puse como tu dijiste y nada pfff que podra ser :S:S

y refiendome a las listas algun tutorial que tengas porque lo intente pero no sale. la imagen que quiero poner como divisor en cada lista es la siguiente: http://lh3.ggpht.com/_Nvr4cjMytyk/TTjKP51D93I/AAAAAAAABXg/hnMHMvTLV1A/linea.png

Te parece que mi plantilla esta buena? original la diseñe yo xd :D bueno espero que me ayudes

Responder
JMiur  

No sé qué es l oque ves pero, al imagen que se muestra es esta:
http://lh4.ggpht.com/_Nvr4cjMytyk/TToNlOxdnWI/AAAAAAAABZ8/5GcR8wl3lOU/xbox360header.png
y no está pixelada.
Mide 970x140 y se muestra de 970x140.

Las lsitas que usas ya tienen una imagen de fondo en la etiqueta LI así que no puedes agregarle otro; para eso, deberías cambiar varias cosas, transformar los enlaces en bloques y poner allí una de las imágenes, etc. Para manejar listas, fíajte en esta entrada

Responder
Felipe  

Hola JMiur.
Paso para comentarte que el problema que está pasando Nitra Games 360 a lo mejor se debe a un error que está experimentando Blogger con el gadget tipo Header.
En los foros de ayuda estos últimos dias se han presentado numerosos casos similares, tanto de redimensionamiento de la imagen de cabecera, así como de diseño y posicionamiento. Saludos.

Responder
JMiur  

Desconozco si hay problemas con el widget header porque no lo usé jamás; lo primero que hice, fue borrar las infinitas líneas de código que tiene y reemplazarlo :D

En el caso del comentario anterior, no veo que haya ninguna clase de problema; la imagen se ve tal como es y en la posición correcta.

Responder
Felipe  

Jajaja, yo tampoco lo he usado, pero dejo ese código ahí quieto por si algun dia se llega a necesitar. :)

Responder
Nitra Games 360  

Hola Jmiur, grasias Felipe por tu interes pero ya lo pude solucionar Jmiur me dijo que cambiara el tamaño de la imagen en el enlace de la misma cambiando el s400 por el s00, asi:

http://2.bp.blogspot.com/_Nvr4cjMytyk/TTkdJ4TrE4I/AAAAAAAABY4/9guETjfAONA/s00/xbox360header.png

Pero todavia se veia pixeleada entonces se me ocurrio quitarle el s00 y quedo asi:

http://2.bp.blogspot.com/_Nvr4cjMytyk/TTkdJ4TrE4I/AAAAAAAABY4/9guETjfAONA/xbox360header.png

por si a alguien le sucede el mismo problema pues ya tienen la solucion :D

y funciono bien la imagen se ve perfectamente bien, grasias por todo Jmiur el tutorial de las listas de enlace y con tu ayuda con el header pude solucionar el problema!! mil grasias eres de lo mejor :D

Muchas Grasias !!!

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