Publicidade
Compre um adesivo e ajude o Em Busca do Código a continuar.
Neste vídeo fazemos uma imagem abrir com um modal, isso somente utilizando HTML e CSS. Quando estava pesquisando sobre modal (queria fazer esse vídeo faz um tempinho já) li que algumas pessoas utilizam outras linguagens em seus modal, o que no exemplo de uma imagem não precisa.
Se ainda não entendeu abrir uma imagem em um modal é como se o elemento em questão, a imagem, abrisse em uma janela diferente, mas na mesma aba, no mesmo documento .html.
Mas como funciona?
Bem no inicio dessa série, mais especificamente no vídeo de número 7 eu mostro bookmark e mais um tipo de link (link "normal"), mas o que é um bookmark?
Um bookmark é um link que ao invés de abrir outra aba do seu site ou direcionar para outro site aponta um lugar especifico, podendo esse lugar especifico ser no mesmo documento HTML, ou até em outro.
Mas o que faz esse bookmark?
No final das contas ele "fala" para o navegador do usuário abrir a imagem em um modal.
Mas precisamos de uma super forcinha do CSS3. Como o usar a pseudo-classe target.
O que faz esse target?
A pseudo-classe :target avisa o navegador que tem um link que aqui "ali" e esse link vem de um id. Nessa mesmo videoaula, logo após o vídeo tem o link de algumas fontes bem interessantes e, uma delas é da pseudo-classe target.
Assista ao vídeo:
Código fonte HTML:
Código fonte CSS:
Caso entenda que faltou algo confira nossas fontes.
Fonte (externa, abre em outra aba): Bookmark Fonte (externa, abre em outra aba): Tableless (Target) Fonte (externa, abre em outra aba): Pinceladas da web (Target) Fonte (externa, abre em outra aba): Mozilla (pointer-events)Compre um adesivo e ajude o Em Busca do Código a continuar.
Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.