En un món que es troba connectat a través de l’Internet, és imprescindible que la teva marca o empresa tingui presència online . Això sol representar-se freqüentment a través d’un lloc web.
En l’actualitat, existeixen diverses eines que et permeten fer landing pages o blocs genèrics. No obstant això, aquestes no li proporcionen a el lloc una identitat que els faci ressaltar sobre la resta. Per això, avui us portem un acordió d’imatges, perfecte perquè el teu lloc web destaqui entre la multitud.
Sense necessitat de Javascript
El millor d’aquest acordió, és que ¡només utilitza HTML i CSS! Pel que, no necessites cap script addicional perquè funcioni. L’estructura HTML que requereix és senzilla i consta d’elements niats entre si. Aquests contenen una imatge, la qual és acompanyada per un figcaption i un radi button, el qual ens proporcionarà la funcionalitat.
<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>
Com es pot visualitzar, els ràdio button han de tenir el mateix name perquè l’acordió funcioni correctament.
Els estils
Cal destacar que les imatges que utilitzem, han de tenir la mateixa mida perquè el nostre acordió es vegi uniforme. En el nostre cas, les utilitzarem en un format de 335px d’ample per 480px d’alt. Aquest ample (335px) serà el que veurem quan la imatge estigui expandida, però, quan estigui contret només mostrarà un ample de 50px.
Per tant, el nostre element ac--container ha de mesurar l’ample d’una imatge desplegada, més l’ample de la resta d’imatges contretes. Com en el nostre exemple utilitzarem imatges, l’ample seria 335px (imatge desplegada) + 50px + 50px + 50px + 50px (4 imatges contretes) = 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;}
a més, posicionarem els ràdio button de manera que abastin tot l’ample de les imatges contretes.
.ac--container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; z-index: 100; appearance: none;}
Portant el nostre acordió a la vida
a més, podem aplicar altres estils i animacions perquè el nostre acordió sigui dinàmic i atractiu a la vista. Recorda que pots jugar amb les animacions i els colors per fer un disseny propi, però la funcionalitat es mantindrà intacta.
Personalització al nostre gust
Hi ha una infinitat de possibilitats que ens permeten donar-li personalitat al nostre lloc web, a través d’elements CSS editats per nosaltres. L’acordió que et presentem anteriorment, serà una gran manera de destacar les teves imatges de cara als visitants que les visualitzin.
En IDA, et incloem l’arxiu .zip amb l’exemple que acabes de veure, perquè puguis descarregar-lo i editar-lo segons les teves necessitats:
descarregar