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