em um mundo que está conectado através da Internet, é essencial que sua marca ou empresa tenha presença online. Isso geralmente é freqüentemente representado através de um site.
Atualmente, existem várias ferramentas que permitem que você faça páginas de destino ou blogs genéricos. No entanto, eles não fornecem o site com uma identidade que os torna destacando sobre o resto. Por causa disso, hoje te trazemos um acordeão de imagens, perfeito para o seu site para destacar entre a multidão.
Não há necessidade de javascript
o melhor desse acordeão, é que apenas Use HTML e CSS! Então, você não precisa de nenhum roteiro adicional para funcionar. A estrutura HTML que requer é simples e consiste em elementos aninhados uns com os outros. Estes contêm uma imagem, que é acompanhada por um fig figcaption e um rádio de botão, que nos fornecerá 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 pode ser exibido, o raio O botão deve ter o mesmo nome para que o acordeão funcione corretamente.
Os estilos
devem ser observados que as imagens que usamos, devem ter o mesmo tamanho para que nosso acordeão seja uniforme. No nosso caso, vamos usá-los em um formato de 335px de largura por alta 480px. Esta largura (335px) será aquela que veremos quando a imagem é expandida, no entanto, quando é contratada, ela mostrará apenas uma largura de 50 px.
Portanto, nosso item ac--container deve medir a largura de uma imagem implantada, além da largura do restante das imagens contratadas. Como no nosso exemplo, usaremos imagens, a largura seria de 335px (imagem implantada) + 50px + 50px + 50px + 50px (4 imagens 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;}
Além disso, posicionemos o rádio de botão para que eles abrangem toda a largura das imagens contratadas.
.ac--container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; z-index: 100; appearance: none;}
trazendo nosso acordeão à vida
Além disso, podemos aplicar outros estilos e animações para que nosso acordeão seja dinâmico e atraente à vista. Lembre-se de que você pode jogar com animações e cores para fazer seu próprio design, mas a funcionalidade permanecerá intacta.
Personalização para o nosso gosto
Há uma infinidade de possibilidades que nos permitem dar personalidade ao nosso site, através de elementos CSS editados por nós. O acordeão que apresentamos anteriormente, será uma ótima maneira de destacar suas imagens sobre os visitantes que visualizam-os.
no IDA, incluímos o arquivo .zip com o exemplo que você acabou de ser viu, para que você possa Faça o download e edite de acordo com suas necessidades:
download