No CSS3, fomos apresentados pela primeira vez com um novo recurso chamado pseudo classe de destino, que torna o comportamento do CSS mais e mais semelhante aos eventos JavaScript.
evento alvo
O evento de pseudo classe de destino ocorre quando o evento de clique ocorre em uma âncora que possui outro id de elemento em seu atributo href.
Como isso é feito:
Em primeiro lugar, adicionaremos um div.container com algumas imagens dentro, para cada imagem definiremos um atributo ID.
<div class="container">
<img id="item1" src="images/item1.jpg" />
<img id="item2" src="images/item1.jpg" />
</div>Depois de definir os ids das imagens, podemos adicionar âncoras que cada uma delas aponta através de seu href para uma única imagem por seu ID.
<a href="#item1" class="button">image 1</a>
<a href="#item2" class="button">image 2</a>Vamos escrever alguns CSS:
/* set size to our container */
.container{
width:200px;
height:200px;
background-color:#ddd;
margin-bottom:10px;
}
/* hide images & set image size*/
.container img {display:none; width:200px;}
/*set link to look like buttons*/
.button{
font-weight:bold;
text-transform:uppercase;
display:inline-block;
margin-right:10px;
color:white;
display:ibline-block;
background-color:#5562c1;
padding:10px;
border:solid 2px #333;
border-radius:10px;
text-decoration:none;
margin-bottom:10px;
}
.button:hover{background-color:#3f498e;}Agora, a parte mais importante é adicionar estilos de destino ( : destino ), que no evento de clique exibirá a imagem de destino selecionada.
.container img:target{display:block;}
- com estilos de destino, você pode fazer coisas ainda mais legais. Um pequeno exemplo POC que fiz, uma galeria de imagens sem javascript em tudo!
POC – Exemplo ao vivo da galeria CSS
Aproveitar!
Se gostou desta dica, terei todo o gosto em receber o seu LIKE. Você está convidado a me seguir e endossar minhas habilidades.
Elad Shechter