JMiur [E]

No me canso de repetir lo mismo porque es la clave para entender cómo funciona una página web: todas las etiquetas son rectángulos y todo su contenido esta en alguna etiqueta lo sepamos o no lo sepamos, lo hayamos indicado o no.

Esto es algo sencillo de comprobar, basta aplicar alguna propiedad CSS a todas las etiquetas de cierta clase para verlo; por ejemplo, si le agregamos un borde rojo con outline:


No importa cuáles sean ni importa si las dimensionamos o no, tampoco importa si definimos estilos, siempre serán rectángulos que se a acomodan solos de acuerdo a dos reglas, las etiquetas de tipo bloque se ubican una debajo de la otra (por ejemplo: DIV o P) y las de tipo inline, una al ado de la otra (por ejemplo A o SPAN). Esta es la forma "natural" con que se va armando la página; cada rectángulo se ubica según esas reglas, de arriba hacia abajo y de izquierda a derecha.

El CSS nos permite (y a veces obliga) cambiar ese orden natural, estableciendo propiedades espaciales. Una de las más simples de usar es tratar de romper la ley que dice que jamás, dos etiquetas, ocupan el mismo lugar es decir, que una esté encima de la otra ocupando el mismo espacio.

Suponiendo que dentro de un DIV contenedor al que dimensiono con height y width, coloco otros dos del mismo tamaño, lo que veré es uno debajo del otro:
<div>
<div> ....... el contenido superior ....... </div>
<div> ....... el contenido inferior ....... </div>
</div>

Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
abajo

Si invertimos el orden, pasará lo mismo; el que esté primero se verá arriba y el otro abajo:

arriba
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.

Superponer ambos es algo bastante simple, lo fundamental es que al contenedor le agreguemos la propiedad position: relative y a los contenidos la propiedad position: absolute con valores cero en left y top:
.demos {
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 250px;
}
.demos div {
  left: 0;
  height: 100px;
  top: 0;
  width: 250px;
  position:absolute;
}
Puestos de este modo, los forzamos a que ocupen el mismo espacio pero claro, sólo veremos uno de ellos, el último. Parece tonto sin embargo, eso es justamente lo que necesitamos para crear efectos y permutar entre el de abajo y el de arriba cuando ponemos el puntero del ratón encima.

Ese tipo de efecto se puede hacer de muchas maneras, por ejemplo, permutando la opacidad:
<style>
  .elvisible { opacity: 1; z-index: 2; }
  .elvisible:hover { opacity: 0; }
  eloculto { z-index: 1; }
</style>

<div class="demos">
  <div class="elvisible"> ....... el contenido visible ....... </div>
  <div class="eloculto"> ....... el contenido oculto ....... </div>
</div>
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
abajo

Usamos z-index para invertir el orden natural (para que por defecto se vea el de arriba) pero podemos hacer lo contrario, mostrar por defecto el de abajo y así, no necesitamos establecer el valor de z-index:
<div class="demos">
  <div> ....... el contenido oculto ....... </div>
  <div class="elvisible"> ....... el contenido visible ....... </div>
</div>
arriba
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.

En estos ejemplo, tambien se aplica una transición que indicamos en el DIV visible por defecto:
elvisible {
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
}
Fácilmente, podríamos usar otros efectos, por ejemplo, haciendo que el que está debajo "suba"; este sería el ejemplo concreto:

<style>
  #toptop {
    background-color: #000;
    border: 2px solid #465;
    color: #FFF;
    font-family: Tahoma;
    font-size: 16px;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 250px;
  }
  #toptop div {
    height: 100px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 250px;
  }
  #toptop #arriba {
    background-color: #000000;
    -moz-transition: top 1s ease 0s;
    -webkit-transition: top 1s ease 0s;
    -o-transition: top 1s ease 0s;
     top: -100px;
  }
  #toptop #abajo {
    -moz-transition: top 1s ease 0s;
    -webkit-transition: top 1s ease 0s;
    -o-transition: top 1s ease 0s;
    top: 120px !important;
  }
  #toptop:hover #arriba {
    top: -120px !important;
  }
  #toptop:hover #abajo {
    top: 10px !important;
  }
</style>

<div id="toptop">
  <div id="arriba"> ....... el contenido visible ....... </div>
  <div class="eloculto" id="abajo3" style="top:10px;"> ....... el contenido oculto ....... </div>
</div>

Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
abajo

13 comentarios:

Graciela  

Pequeños detalles, de gran importancia. Me encantan Jorge éstas clasecitas :P

Responder
Liliana  

Magnifica explicación, más claro no puede ser. Gracias por compartir tu conocimiento.

Responder
Liliana  

Yo te escribí dándote las gracias por tu ayuda, por sí no lo recibiste te cuento que todo se arregló al agregar la llave } que me faltaba, parece que al hacer cambios por ahí la borré sin querer. Muchas gracias por tu tiempo y paciencia.

Responder
Johnny  

Son cosas que a veces, diseñando un post o una pagina o seccion de blog, dices: ¿esto como lo haria para que quedara asi o asa...? Y es que el CSS da mucho juego si sabes la claves.

Responder
Adrián J. Messina  

Excelente el efecto, es vistoso y muy útil.
Fantástico, gracias!

Responder
Oloman  

Este truco me ha gustado mucho. No lo imaginaba por el título.

Responder
RAMON  

en el faldon de tu blog tienes don botones "enlace" por ejemlo que al pincharlo te aparece el gadget oculto.
Es posible que pudieses decirme como.ya tengo problemas de espacio en mis blogs y me parece muy buena la idea.Se que es pedir mucho si puedes contestarme, pero ya sabes que muchos te tenemos como orientador en nuestros blogs.gracias

Responder
Tapestryworkerman  

Hola JMiur.
Muy interesante, hasta yo creo haberlo entendido ;)
Un saludo.

Responder
JMiur  

Me alegro que le guste, Doña Graciela :D

Gracias a ti, Liliana. Sí, leí tu mail :D

Johnny:
Sin duda que da para mucho.

Gracias, Adrián

Oloman:
Es una técnica interesante. Aplicable a cualquier cosa.

RAMON:
No hay un sólo método, hay infinidad de ellos, depende de cada caso. Puedes ver algunos ejemplos en estas entradas: 1 | 2 | 3

No se menosprecie, Tapestryworkerman :D

Responder
La Redaccion  

Hola JMiur antes de nada decirte que eres un crack!!. Ahora bien... estoy implementando eso en la web porque creo q es un efecto curioso y me encuentro con el problema ( o por lo menos estoy atascado ) de que no puedo enlazar esas imagenes con otra web. Al introducir el codigo intenta redireccionarme a la direccion puesta pero sumada de nuevo Ej: vagabundia.esvagabundia.es. Ya me estoy rayando

Por cierto en ie no funicona el efecto :S

Un saludo y gracias ;)

Responder
La Redaccion  

acabo de dar con el problema..... jajaja debe de ser una chorrada.... ahora ya me funciona. Siento las molestias ;)

Un saludo y gran trabajo amigo

Responder
martinramon  

Hola no se un joraca de html
pero me arreglé con las imágenes
y funcionó joya, me cgé de risa
por horas

Gracias, increiblemente sencilla y
didáctica las explicaciones

Responder
Unknown  

Gracias JMiur nunca dejas de sorprenderme...!
Saludos!

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