Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Borda interna

09-12-2008 19:19

Olha eu novamente enchendo o saco de vocês, hehehe...

Bom, gostaria de saber como faço uma borda interna (pra dentro) tipo essa do globoesporte.com, que no onmouseover a borda aparece, só que internamente...

http://globoesporte.globo.com/

flw.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17638
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Borda interna

09-12-2008 20:20

Uma forma que acho funcional é essa, sendo que no firefox a class borda_interna deverá ter os valores 95% e 95%, ai você pode usar um hack.

<style> .borda_interna{ width:100%; height:100%; border:10px solid black; } .normal{ width:100%; height:100%; } </style> <div style="background-image:url(foto.jpg); width: 400px; height:400px;"> <div class="normal" onmouseover="this.className='borda_interna'" onmouseout="this.className='normal'">&nbsp;</div> </div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Borda interna

10-12-2008 16:29

Não era mais ou menos isso que eu queria... mais dando uma pesquisada eu encontrei exatamente o que buscava, fica aí pra quem quiser.

http://www.flog.co.nz/journal/inner-border/
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17638
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Borda interna

10-12-2008 17:00

Não conhecia o innerborder :blush
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Borda interna

10-12-2008 17:56

cara, pensei que tudo estava ok, mais daí veio os problemas... ele alinha a imagem à esquerda, e preciso colocar ela em diversas posições, como devo fazer isso? ;/
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17638
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Borda interna

10-12-2008 19:04

Usa o display inline-block.

Com base no script original do site indicado, o CSS fica assim:

<style type="text/css" media="screen"> a.innerborder, a.innerborder img { overflow:hidden; } a.innerborder:hover { display:inline-block; border:4px solid #f00; } a.innerborder:hover img { margin: -4px; } </style>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Borda interna

11-12-2008 18:03

Deu perfeito, valeu. :)
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17638
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Borda interna

11-12-2008 18:17

:kickup
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado