nun mundo que está conectado a través de Internet, é esencial que a súa marca ou empresa teña presenza en liña. Isto adoita ser frecuentemente representado a través dun sitio web.
Na actualidade, hai varias ferramentas que permiten facer páxinas de aterraxe ou blogs xenéricos. Non obstante, estes non proporcionan ao sitio unha identidade que os fai destacar sobre o resto. Debido a isto, hoxe traémosvos un acordeón de imaxes, perfecto para o seu sitio web para destacar entre a multitude.
Non hai necesidade de JavaScript
O mellor deste acordeón, é só Use HTML e CSS! Entón, non necesita ningún script adicional para traballar. A estrutura HTML que require é sinxela e consiste en elementos anidados entre si. Estes conteñen unha imaxe, que está acompañada por unha figcaption e unha radio de botón, que nos proporcionará a funcionalidade.
<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 pode mostrar, o radio O botón debe ter o mesmo nome para que o acordeón funcione correctamente.
Os estilos
Deben ter en conta que as imaxes que usamos deben ter o mesmo tamaño para que o noso acordeón sexa uniforme. No noso caso, imos usalos nun formato de 335px de ancho por alto 480px. Este ancho (335px) será o que veremos cando a imaxe se expandió, con todo, cando se contrae, só mostrará un ancho de 50px.
Polo tanto, o noso elemento
debe medir o ancho dunha imaxe desplegada, ademais do ancho do resto das imaxes contratadas. Como no noso exemplo, imos usar imaxes, o ancho sería 335px (Imaxe desplegada) + 50px + 50px + 50px + 50px (4 imaxes contratadas) = 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;}
Ademais, colocaremos a radio do botón para que abarcan todo o ancho das imaxes contratadas.
.ac--container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; z-index: 100; appearance: none;}
traendo o noso acordeón á vida
Ademais, podemos aplicar outros estilos e animacións para que o noso acordeón sexa dinámico e atractivo á vista. Lembre que pode xogar con animacións e cores para facer o seu propio deseño, pero a funcionalidade permanecerá intacta.
Personalización ao noso gusto
Hai unha infinidade de posibilidades que nos permiten dar a personalidade ao noso sitio web, a través de elementos CSS editados por nós. O acordeón que presentamos anteriormente, será unha boa forma de destacar as túas imaxes nos visitantes que os visualizan.
En IDA, incluímos o ficheiro .zip co exemplo que acaba de ver, para que poida Descarga-lo e editalo de acordo coas súas necesidades:
Descargar