Tratando de entender el header (3)

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.

ElHackerZ