Efecto hover aparición de capa y texto html5 css3

Vamos a intentar crear un efecto en el que al pulsar un botón, aparezca una capa con texto o imagen desplazando todo lo que se encuentre bajo ella hacia abajo…
Lo primero que haré será poner el código fuente de la página, el html:

<section class="cuadro">
    <input type="checkbox" name="sabemos_seleccionado" id="uno" />
    <label for="uno">Inicio</label>
    <article class="capa_aparece">
        <p>Estás en la página de inicio: bienvenido a www.todocursosonline.es<br/>
	¿Conoces el resto de elementos del portal? Prueba a entrar en:<br/>
	<a href="https://todocursosonline.wordpress.com/">Nuestro blog</a><br/>
	<a href="http://todocursosonline.foroactivo.com/">Nuestro foro</a>
    </article>
</section>

Simplemente hemos creado una serie de secciones, que son un <input> de tipo checkbox para comprobar que está seleccionado en ese momento, una etiqueta o <label> que lleva el nombre del botón que tendremos que pulsar para que aparezca la capa <article>. Hasta aquí muy sencillo, vamos a empezar con el código del estilo css.

Lo primero a reaelizar será darle algo de estilo al botón (<label>) para hacerlo más atractivo a la vista. Se me ocurre centrar el texto, darle un color de fondo y un color y tamaño de texto, un z-index alto, una position y mi estilo de fuente favorito… Además le daremos un ancho a toda la sección y un alto a la etiqueta.

.cuadro {
    width:700px;
}

.cuadro label {
    text-align:center;
    background:#cccccc;
    color:000;
    font-size:20px;
    z-index:20;
    position:relative;
    font-family:cursive;
    height:30px;
    font-weight:bold;
}

Hasta ahora simplemente lo hemos estilado, ahora empezaremos a programar todo el conjunto para que funcione y además quede bonito😉.
Empezaremos creando un efecto transición para <article> y “escondiéndolo” detrás de la etiqueta.

.cuadro article {
    margin-top:-1px;
    overflow:hidden;
    height:0px;
    position:relative;
    transition: height 0.5s ease-in-out,
                  	    box-shadow 0.7s linear;
}

Ahora empezaremos a jugar con el <input> tipo checkbox que introducimos antes para saber cuándo está seleccionada (al primer click) y cuándo deja de estarlo (al segundo click). Entonces lordenaremos actuar en función de su selección al resto de elementos, empecemos:

.cuadro input:checked ˜ article {
    transition: height 0.7s ease-in-out,
                       box-shadow 0.3s linear;
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8);
}

Ya casi estamos acabando, ahora deberíamos darle una altura determinada al

que aparecerá cuando pulsemos, por ejemplo 150px:
.cuadro input:checked ˜ article.capa_aparece {
   height:140px;
}

Ahora ocultaremos el cuadro de selección que sale en el input:

cuadro input {
    display:none;
}

Y terminado, no queda muy bonito a la vista pero ya funciona, el darle estilo es cosa vuestra, cada cual a su gusto.

Una posible opción de todo esto visto hoy es crear un menú acordeón muy atractivo y cómodo de usar. Si quieres ver cómo quedaría, entra en Menú acordeón con html5 y css3 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: