Acordeón HTML/CSS, dándole personalidad a tu sitio web

El ciberespacio está repleto de diversas páginas que pueden parecer monótonas y con falta de identidad. Sin embargo, podemos cambiar su apariencia y darle valor a través de acciones que son más simples de lo que aparentan.

En un mundo que se encuentra conectado a través del Internet, es imprescindible que tu marca o empresa tenga presencia online. Esto suele representarse frecuentemente a través de un sitio web.

En la actualidad, existen varias herramientas que te permiten hacer landing pages o blogs genéricos. Sin embargo, estas no le proporcionan al sitio una identidad que les haga resaltar sobre el resto. Por esto, hoy te traemos un acordeón de imágenes, perfecto para que tu sitio web destaque entre la multitud.

Sin necesidad de Javascript

Lo mejor de este acordeón, es que ¡sólo utiliza HTML y CSS! Por lo que, no necesitas ningún adicional para que funcione. La estructura HTML que requiere es sencilla y consta de elementos anidados entre sí. Estos contienen una imagen, la que es acompañada por un figcaption y un radio button , el cual nos proporcionará la funcionalidad.

<div class="ac--container">
    <figure>
        <img src="image/01.jpg" alt="image01"/>
        <input type="radio" name="ac--radio" checked="checked"/>
        <figcaption><span>First image</span></figcaption>

        <figure>
            <img src="image/02.jpg" alt="image02"/>
            <input type="radio" name="ac--radio"/>
            <figcaption><span>Second image</span></figcaption>

            <figure>
                <!-- ... -->
            </figure>
        </figure>
    </figure>
</div>

Como se puede visualizar, los radio button deben tener el mismo para que el acordeón funcione correctamente.

Los estilos

Cabe destacar que las imágenes que utilicemos, deben tener el mismo tamaño para que nuestro acordeón se vea uniforme. En nuestro caso, las utilizaremos en un formato de 335px de ancho por 480px de alto. Este ancho (335px) será el que veremos cuando la imagen esté expandida, sin embargo, cuando esté contraída sólo mostrará un ancho de 50px.

Por lo tanto, nuestro elemento ac--container debe medir el ancho de una imagen desplegada, más el ancho del resto de imágenes contraídas. Como en nuestro ejemplo utilizaremos imágenes, el ancho sería 335px (imagen desplegada) + 50px + 50px + 50px + 50px (4 imágenes contraídas) = 535px.

.ac--container { width: 535px; /* Ancho del contenedor del acordeón */ } .ac--container figure { position: absolute; /* Esto permite que las imágenes se vean solapadas */ top: 0; left: 50px; /* Ancho de imagen contraída */ width: 335px; }

Además, posicionaremos los radio button de forma que abarquen todo el ancho de las imágenes contraídas.

.ac--container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; z-index: 100; appearance: none; }

Trayendo nuestro acordeón a la vida

Además, podemos aplicar otros estilos y animaciones para que nuestro acordeón sea dinámico y atractivo a la vista. Recuerda que puedes jugar con las animaciones y los colores para hacer un diseño propio, pero la funcionalidad se mantendrá intacta.

Personalización a nuestro gusto

Hay una infinidad de posibilidades que nos permiten darle personalidad a nuestro sitio web, a través de elementos CSS editados por nosotros. El acordeón que te presentamos anteriormente, será una gran forma de destacar tus imágenes de cara a los visitantes que las visualicen.

En IDA, te incluimos el archivo .zip con el ejemplo que acabas de ver, para que puedas descargarlo y editarlo según tus necesidades.

Originally published at https://blog.ida.cl on September 2, 2020.