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.

Cenário

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