JMiur [E]

Esta es una forma muy particular de utilizar fondos múltiples para crear efectos hover; algo que se le ocurrió a designshack.net donde la técnica está explicada en detalle.

Lo básico es saber que con las nuevas características del CSS3, una etiqueta cualquiera puede tener varios fondos (varias propiedades background) y cada una de ellas puede ser controlada de modo individual. La sintaxis d esto es exactamente igual que la tradicional y los distintos valores, se separan con comas así que una regla como esta, agregaría dos imágenes distintas al mismo contenedor:
#ejemplo {
  background-image: url(imagen_1), url(imagen_2);
  background-position: left 50%, right 50%;
  background-repeat: no-repeat;
  background-color: red;
}
la primera estará a la izquierda, la segunda a la derecha; ambas centradas verticalmente; ninguna de ellas se repetirá y el fondo "sobrante" será de color rojo.


Entendiendo cómo funciona esto de los fondos múltiples y que su posición puede controlarse con background-position, supongamos que tenemos un contenedor que mide 200x200 al que le coloco tres imágenes de fondo; las dos primeras son las que veré por defecto (imagen_fondo) y la tercera es la que permanecerá oculta hasta poner el cursor encima (imagen_oculta).
#ejemplo {
  display: inline-block;
  height: 200px;
  width: 200px;
  transition: all 1s; /* con prefijos para los distintos navegadores */
  background-image: url(imagen_fondo), url(imagen_fondo), url(imagen_oculta);
  background-repeat: no-repeat;
  /* background-position: ???????; */
}
Para que esto funcione, un poco de aritmética. Si queremos que se "abra" horizontalmente:
background-position: -100px 0px, 100px 0px, 0 0;
y si queremos que se "abra" verticalmente:
background-position: 0 -100px, 0 100px, 0 0;
Y la regla del hover sería:
#ejemplo:hover {background-position: -200px 0px, 200px 0px, 0 0;}
o bien:
#ejemplo:hover {background-position: 0 -200px, 0 200px, 0 0;}


Del mismo modo, agregando más fondos, se obtienen distintos efectos:


<style>
.hoverDot {
  display: inline-block;
  height: 200px;
  margin: 10px;
  width: 200px;
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  -ms-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

#slidingDoors {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px 0px, 100px 0px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoors:hover {
  background-position: -200px 0px, 200px 0px, 0 0;
}

#slidingDoorsVert {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: 0 -100px, 0 100px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoorsVert:hover {
  background-position: 0 -200px, 0 200px, 0 0;
}

#breakApart {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
}
#breakApart:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
}

#twistAndShout {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}
#twistAndShout:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
  transform: rotate(0deg);
}
</style>

<div class="hoverDot" id="slidingDoors"></div>
<div class="hoverDot" id="slidingDoorsVert"></div>
<div class="hoverDot" id="breakApart"></div>
<div class="hoverDot" id="twistAndShout"></div>

5 comentarios:

Berta Fernández-Viña Fernández  

Está estupendo

Responder
Felipe  

Muy pero que muy interesante, aunque su alicación práctica sea muy limitada.

JMiur  

Al contrario. Pienso que el uso de varios fondos es una aplicación práctica que tiene múltiples usos.

Responder
Gem@  

¿Alguna vez se le pasó por la cabeza que con CSS eso sería posible?
Mi otro comentario no vale, ya me entiende :(

JMiur  

No, nunca lo imaginé.

Sí, se entiende perfectamente :-D

Responder

¿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 ...

 
CERRAR