1. Fórum
  2. /
  3. Clube do Desenvolvedor
  4. /
  5. Clube do WebDesigner
  6. /
  7. [RESOLVIDO]Efeito de borda interna

[RESOLVIDO]Efeito de borda interna

  • thgcivic
  • Avatar de thgcivic Autor do Tópico
  • Offline
  • JCB! Geek
  • JCB! Geek
Mais
14 anos 3 meses atrás #25164 por thgcivic
thgcivic replied the topic: Re: Efeito de borda interna
Olá
ñ era isso André
<!-- s:x --><img src="{SMILIES_PATH}/icon_mad.gif" alt=":x" title="Furioso" /><!-- s:x -->
[b:1fi4zh5y]Acesse minha página [url:1fi4zh5y]http://www.webmasterthg.com.br/[/url:1fi4zh5y][/b:1fi4zh5y]
[b:1fi4zh5y][i:1fi4zh5y]Não respondo dúvidas por MP, por favor crie um tópico ñ custa nada[/i:1fi4zh5y][/b:1fi4zh5y]

Please Entrar ou Registrar to join the conversation.

Mais
14 anos 3 meses atrás #25166 por elvisvinicius
elvisvinicius replied the topic: Re: Efeito de borda interna
Oi thgcivic.

Agora que eu entendi. hehehe
Você está falando de aplicar um contorno ao passar o mouse (HOVER).

É muito simples:
a.ClasseDoElemento:hover {
    border: 3px solid red;
}

O que o G1 usou pra compensar o "deslize" da imagem, por causa da "largura" do contorno extra, foi o MARGIN negativo no mesmo valor do contorno, aplicado à imagem.

Completo fica assim:
a.ClasseDoElemento:hover {
    border: 3px solid red;
}
a.ClasseDoElemento:hover img {
    margin: -3px 0 0 -3px;
}

Esse MARGIN não seria necessário se já existisse um contorno no link normal:
a.ClasseDoElemento:link,
a.ClasseDoElemento:visited {
    border: 3px solid #eee;
}
a.ClasseDoElemento:hover {
    border: 3px solid red;
}


( ^ ^)

Please Entrar ou Registrar to join the conversation.

  • thgcivic
  • Avatar de thgcivic Autor do Tópico
  • Offline
  • JCB! Geek
  • JCB! Geek
Mais
14 anos 2 meses atrás #26362 por thgcivic
thgcivic replied the topic: Re: Efeito de borda interna
Olá Elvis
bom eu tentei o q vc disse
mas ainda ñ consegui
a imagem fica dando um deslize

so q ñ apliquei a uma classe
e s para todas as imagens
coloquei assim o codigo
img:hover {
	border: 3px solid red;
}
img:hover img {
	margin: -3px 0 0 -3px;
}

Inté  :ugeek:
[b:1fi4zh5y]Acesse minha página [url:1fi4zh5y]http://www.webmasterthg.com.br/[/url:1fi4zh5y][/b:1fi4zh5y]
[b:1fi4zh5y][i:1fi4zh5y]Não respondo dúvidas por MP, por favor crie um tópico ñ custa nada[/i:1fi4zh5y][/b:1fi4zh5y]

Please Entrar ou Registrar to join the conversation.

Mais
14 anos 2 meses atrás #26402 por brunodyjorge
brunodyjorge replied the topic: Re: Efeito de borda interna
Tenta esse .css:
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none} 

ul li{float:left;margin-right:5px} 
ul li a,ul li a img{overflow:hidden;float:left} 
ul li a:hover{border:5px solid #F00} 
ul li a:hover img{margin:-5px}
E esse código:
<ul>
	<li><a><img src="../imagem.jpg"/></a></li>
    <li><a><img src="../imagem.jpg"/></a></li>
    <li><a><img src="../imagem.jpg"/></a></li>
    <li><a><img src="../imagem.jpg"/></a></li>
</ul>
Fonte: http://leonardocaineli.com.br/borda-interna-nas-imagens-com-css/

Please Entrar ou Registrar to join the conversation.

  • thgcivic
  • Avatar de thgcivic Autor do Tópico
  • Offline
  • JCB! Geek
  • JCB! Geek
Mais
14 anos 2 meses atrás #26551 por thgcivic
thgcivic replied the topic: Re: Efeito de borda interna
Olá brunodyjorge

realmente esse código faz exatamente o q eu kero
mas ñ consegui adpatar no joomla <!-- s:( --><img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Triste" /><!-- s:( -->

mas vlw

Inté <!-- s:ugeek: --><img src="{SMILIES_PATH}/icon_e_ugeek.gif" alt=":ugeek:" title="Uber Geek" /><!-- s:ugeek: -->
[b:1fi4zh5y]Acesse minha página [url:1fi4zh5y]http://www.webmasterthg.com.br/[/url:1fi4zh5y][/b:1fi4zh5y]
[b:1fi4zh5y][i:1fi4zh5y]Não respondo dúvidas por MP, por favor crie um tópico ñ custa nada[/i:1fi4zh5y][/b:1fi4zh5y]

Please Entrar ou Registrar to join the conversation.

  1. Fórum
  2. /
  3. Clube do Desenvolvedor
  4. /
  5. Clube do WebDesigner
  6. /
  7. [RESOLVIDO]Efeito de borda interna
Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates