In un mondo che è collegato tramite Internet, è essenziale che il tuo marchio o azienda abbia la presenza online. Questo di solito è spesso rappresentato attraverso un sito web.
Attualmente ci sono diversi strumenti che ti consentono di fare pagine di atterraggio o blog generici. Tuttavia, questi non forniscono il sito con un’identità che li rende evidenziati sul resto. Per questo motivo, oggi ti portiamo una fisarmonica di immagini, perfetta per il tuo sito web per evidenziare tra la folla.
Non c’è bisogno di JavaScript
Il meglio di questa fisarmonica, è giusto Usa HTML e CSS! Quindi, non hai bisogno di ulteriori scritture per funzionare. La struttura HTML che richiede è semplice ed è composta da elementi nidificati tra loro. Questi contengono un’immagine, che è accompagnata da un figcaption e una radio a pulsante, che ci fornirà la funzionalità.
<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>
Come può essere visualizzato, il raggio Il pulsante deve avere lo stesso nome in modo che la fisarmonica funzioni correttamente.
Gli stili
si rileva che le immagini che usiamo, devono avere le stesse dimensioni in modo che la nostra fisarmonica sia uniforme. Nel nostro caso, li useremo in un formato 335px largo ad alto 480px. Questa larghezza (335px) sarà quella che vedremo quando l’immagine è ampliata, tuttavia, quando è contratta, mostrerà solo una larghezza 50px.
Pertanto, il nostro ac--container L’articolo deve misurare la larghezza di un’immagine distribuita, oltre alla larghezza del resto delle immagini contratte. Come nel nostro esempio useremo le immagini, la larghezza sarebbe 335px (immagine distribuita) + 50px + 50px + 50px + 50px (4 immagini contrattuali) = 535 px.
.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;}
Inoltre, posizioneremo la radio dei pulsanti in modo da comprendere tutta la larghezza delle immagini contrattuali.
.ac--container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; z-index: 100; appearance: none;}
Portare la nostra fisarmonica alla vita
Inoltre, possiamo applicare altri stili e animazioni in modo che la nostra fisarmonica sia dinamica e attraente in vista. Ricorda che puoi giocare con animazioni e colori per creare il tuo design, ma la funzionalità rimarrà intatta.
Personalizzazione al nostro gusto
C’è un’infinità di possibilità che ci permettono di dare personalità al nostro sito web, attraverso gli elementi CSS modificati da noi. La fisarmonica che presenteremo in precedenza, sarà un ottimo modo per evidenziare le tue immagini sui visitatori che li visualizzano.
In IDA, includiamo il file .zip con l’esempio che hai appena visto, in modo che tu possa Scaricalo e modificalo in base alle tue esigenze:
Scarica