CSS Click Event ?!

CSS3 adicionou suporte para informá-lo se um rádio ou uma caixa de seleção de elementos de entrada estão marcados, usando este recurso eu criei os 3D Flipping Cards neste protocolo e mostrarei como isso é feito.

Como fazer Selecionar Evento em CSS.

Usando a nova pseudo classe : marcada podemos fazer recursos avançados que permitem “lembrar CSS”, esse novo recurso cria uma melhor conexão entre o CSS e o HTML.

Vamos começar!

Decidi fazer 4 cartas que aparecem lá no verso, e clicando nelas, elas aparecem na frente e mesmo clicando novamente.

HTML

Eu criei uma lista de itens e adicionei uma caixa de seleção e um rótulo a cada elemento li:

<ul class="flipping-cards">
  <li>
    <input type="checkbox" id="item1">
    <label for="item1">
      <span class="wrapper">
        <span class="image"></span>
        <span class="back"></span> 
      </span>
    </label>    
  </li>
/*....(3 more with different ID and different reference from attribute For of the label)*/

** CSS **

Adicionei estilos que mostram o verso do cartão e ocultam a frente:

input[type="checkbox"]{position:absolute;z-index:5;}
ul,li{list-style:none;padding:0;margin:0;}

.flipping-cards li{
  position:relative;
  float:left;
  margin-right:10px;
}
.flipping-cards label{  
  display:block;
  width:200px;
  height:250px;
  cursor:pointer;
}

.flipping-cards .wrapper{
  display:block;
  width:200px;
  height:250px;  
}
.flipping-cards .wrapper span{
  display:block;
  width:200px;
  height:250px;
  position:absolute;
  top:0;
  left:0;
}

.flipping-cards label .back{
  border-radius:10px;
  background-color:gray; 
}

.flipping-cards label .image{
  display:none;  
}

O resultado até agora: veja o exemplo

Como você pode ver, clicando em um dos cartões, a caixa de seleção é marcada e desmarcada se clicar novamente.

Agora que adicionamos as imagens frontais dos cartões, nada acontecerá depois de adicioná-los, porque eles estão ocultos com display: none .

CSS

label[for="item1"] .image{background-image:url(http://farm6.staticflickr.com/5339/8879221754_51e07afc5e_o.png);}

label[for="item2"] .image{background-image:url(http://farm8.staticflickr.com/7398/8878601839_e5a56dc65f_o.png);}

label[for="item3"] .image{background-image:url(http://farm6.staticflickr.com/5461/8879221878_b22fdf9ff8_o.png);}

label[for="item4"] .image{background-image:url(http://farm8.staticflickr.com/7458/8878601681_b8c0499874_o.png);}

O resultado até agora: veja o exemplo

Como eu disse, nada aconteceu. Agora só precisamos adicionar a lógica.

Adicionar lógica CSS

Este CSS está verificando se a entrada está marcada, então se for verdade, ele vai para o rótulo irmão e encontra dentro dele o elemento com class = “imagem” e, em seguida, adiciona estilos para mostrar a imagem e colocá-la na frente do elemento da face posterior (o traseiro e frente são elementos irmãos).

Ao lado disso, irei ocultar as caixas de seleção, pois não precisamos mais exibi-las.

.flipping-cards input[type="checkbox"]:checked + label .image{
  display:block;
  position:absolute;
  right:0;
  left:0;
  z-index:2;
} 

input[type="checkbox"]{/*added*/display:none;}

É isso aí! Temos a carta virada, o exemplo de resultado final disponível aqui: veja o exemplo

Sim! Funcionando bem … mas ainda um pouco seco, adicionei mais estilos para este exemplo que o tornam muito mais bonito com CSS 3D (transição e transformação) e algum gradiente que eu uso de Lea Verou – Galeria de Padrões CSS3 , ela é realmente incrível e eu sugiro que você dê uma olhada no blog dela .

Aqui está o exemplo completo e final – 3D Flipping Cards! .

Aproveitar!

Se você gostou deste post, ficarei feliz em receber seu UPVOTE. Você está convidado a me seguir ou a minha equipe @Walla! P&D e endosso minhas habilidades.

Se gostou deste post, você também pode gostar:
– CSS Target Event .

Tive a inspiração do CSS3 Treeview. Sem JavaScript