Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcosfj1

[Resolvido] Como colocar este efeito CSS

Por , em Desenvolvimento frontend

Recommended Posts

marcosfj1    0

marcosfj1
Postado

Gente tava dando uma olhada em uns sites por ai, e achei este efeito no site do ponto frio, acredito q seja CSS algum efeito ligado aos links

 

efeitosc.jpg

 

Uploaded with ImageShack.us

 

Reparem que conforme o mouse passa nas imagens elas ficam envolvidas por um quadrado cinza, alguem sabe como fazer isso?

 

valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcosfj1    0

marcosfj1
Postado

Coloca uma borda na cor de fundo da imagem, assim vai parecer que ela não tem borda, e define outra borda para o a:hover.

 

Nao sei mto de css...como eu poderia fazer isso que você falou?

 

Já consegui hehe

 

valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

CarlosMarx    4

CarlosMarx
Postado

Poderia ser algo assim:

HTML: 

<div id="caixa"> <!-- Div que vai comportar seu elementos -->
<a href="#"><img src="http://forum.imasters.com.br/uploads//profile/photo-79210.png" title="Teste" alt="Teste" /></a>
</div>

 

CSS: 

#caixa {
       width: 220px;
       min-height: 300px;
       background-color: #E7E7E7;
       text-align: center;
   }

   #caixa img {
       border:4px solid #E7E7E7; /* Cor da borda na mesma cor de fundo da #div caixa */
       margin-top: 20px;
   }

    #caixa img:hover {
       border:4px solid #FFF; /*  Borda branca para dar o efeito que você quer com :hover */
   }

 

Isso já dá o efeito desejado mais pode ser melhorado. Quer ver o exemplo acima? Clique aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hünter    0

Hünter
Postado

cara o esse codigo dá mais ou menos o efeito. você pode adaptar como quiser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
div:hover {
background-color:#FFFFFF;
border-left-color:#CCCCCC;
border-bottom-color:#CCCCCC;
border-right-color:#CCCCCC;
border-top-color:#CCCCCC;	
border-bottom:solid;
	border-left:solid;
		border-right:solid;
			border-top:solid;



}
.efeito {
width:150px;
height:300px;
background-color:#EFEFEF; 
}




</style>
</head>

<body>

<div class="efeito">
Janela com contorno cinza

</div>

</body>
</html>

 

 

falôu...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito