Faaala galera! Hoje voltamos com mais um mega post do CSS Brasil, desta vez iremos conhecer algumas técnicas utilizadas para criar "ações" nos nossos componentes por meio do CSS \o/\o/

Como POC, desenvolvi um exemplo de slideshow elástico, onde toda a sua interação é controlada por meio do CSS =D

Let's Go!

Conhecendo nossos amigos: :checked e ~

Estes são uns dos seletores que eu mais gosto no CSS e quem me conhece sabe que eu falo bastante deles. Antes de partir para o código vamos dar uma olhada no conceito desses carinhas.

O seletor :checked seleciona o elemento que está se encontra no estado checado, podemos utilizá-lo em input's do tipo checkbox ou radio, já o ~ seleciona os próximos irmãos do elemento declarado antes do seletor. Ex: li:nth-child(2) ~ li irá selecionar todos os <li> posteriores ao segundo <li> do documento que sejam filhos do mesmo pai, ou seja, que estejam dentro da mesma <ul>

Bem simples, não é? Mas é importante entender o que esses seletores fazem, porque será por meio deles que iremos controlar as animações do nosso slide.

Estrutura HTML

Neste exemplo a nossa marcação HTML será um pouquinho mais longa do que as últimas que vimos nos post's anteriores, observe o código abaixo:

Apesar de ser um pouco longa, esta estrutura é fundamental para que a troca dos slides funcione corretamente.Vamos analisar o código por partes.

Os input's acima, serão responsáveis por controlar o estado de cada item do slide e no nosso CSS iremos ficar "escutando" o seu estado de ":checked", para exibir o item do slide que corresponde ao input checado.

Como queremos que apenas um item fique visível para o usuário, utilizaremos input's do type="radio".

Este é o trecho mais interessante do nosso HTML, eu ocultei as outras <li> para o código não ficar muito extenso.

Basicamente as label's que estão fora da nossa tag <figure> terão a função de passar o nosso slide, pois os radios ficarão ocultos. Note que no seu atributo for colocamos o id de qual slide iremos exibir quando o usuário clicar no <label>.

Dentro da nossa tag <figure> temos um <label> que será a nossa setinha que fica ao lado do circulo do slide.

Chega de marcação HTML e vamos para a melhor parte do post... CSS ♥ ❤ ❥ ❣ ❦ ❧

CSS

A estilização é bem simples, vai da criatividade de cada um =D

Neste trecho a cima, é importante notar que colocamos um z-index: 1 nas nossas li para que elas fiquem por baixo do slide visível e adicionamos um transform: translateX(300%) na classe .slide-item, logo todos os itens ficarão escondidos no canto direito da tela.

Seguindo a estilização acima, teremos algo parecido com isto:

Agora só precisamos exibir o item referente ao input que está checado... Conseguimos capturar este estado por meio do seletor :checked

Note que estamos usando os dois seletores que vimos no inicio do post, #slide-1:checked ~ ul li:nth-of-type(1) desta forma conseguimos selecionar o primeiro <li> que é filho da <ul> que é irmão do <input id="slide-1">. Em seguida zeramos o translateX do nosso .slide-item e o colocamos com um visibility: visible.

O mesmo é feito para os outros <li>, apenas mudamos o id do input checado e o indice dentro da propriedade li:nth-child(1)... ex: #slide-2:checked ~ ul li:nth-of-type(2)

Como temos um transition aplicado no .slide-item, ele aparecerá se deslocando levemente para a esquerda =D
Falta exibir as legendas, mas como já sabemos capturar o <li> referente ao input checado, não teremos nenhum problema nesta tarefa.

Já estamos na reta final do slide (uhuuu), agora iremos criar as animações das nossas bolinhas laterais, o que é bem simples, usaremos um scale() e nada mais:

Para finalizar adicionaremos as animações nas bolinhas, apenas quando o item estiver visível, como fizemos anteriormente:

E voalá, concluímos nosso slide elástico \o/\o/\o/

É muito importante entender os conceitos destas técnicas CSS e treinar bastante, pois por meio delas podemos fazer coisas incríveis!

Um abraço e até a próxima!