|
Israel Block
ajuda com exibição 08 de February de 2012 às 06:25AM |
Galera, primeiramente eu sei que é um fórum sobre PHP, mas sempre tem quem manje de outras partes da construção dos sites e sistemas, como o CSS, javascript e por ai vai.
Em um site novo que estou fazendo, tenho uma tabela pra gerenciar uma galeria de imagens. O problema não é com ela, que funciona direitinho, e sim com a exibição. O cliente quer que as fotos apareçam em uma área arredondada, mas não faço idéia de como fazer com que a foto abra ali. Pensei em algo como uma máscara, onde a imagem abre normal, mas o layout, essa "moldura" abrisse por cima dela, dando a impressão da mesma ser redonda. Alguém sabe como posso criar essa máscara?
Pesquisei algumas coisas e não achei nada satisfatório.
Novamente, desculpe fugir do foco do nosso fórum, mas sei que temos colegas que entendem não somente de PHP.
Desde já obrigado!
Em um site novo que estou fazendo, tenho uma tabela pra gerenciar uma galeria de imagens. O problema não é com ela, que funciona direitinho, e sim com a exibição. O cliente quer que as fotos apareçam em uma área arredondada, mas não faço idéia de como fazer com que a foto abra ali. Pensei em algo como uma máscara, onde a imagem abre normal, mas o layout, essa "moldura" abrisse por cima dela, dando a impressão da mesma ser redonda. Alguém sabe como posso criar essa máscara?
Pesquisei algumas coisas e não achei nada satisfatório.
Novamente, desculpe fugir do foco do nosso fórum, mas sei que temos colegas que entendem não somente de PHP.
Desde já obrigado!
|
Diego R. Mengarda
Re: ajuda com exibição 08 de February de 2012 às 06:42AM |
<body style="margin:0; padding:0;">
<div style="background-color:#333; width:500px; height:500px;">
<div style="width:350px; height:350px; background-color:#0C0; position:absolute; z-index:1;"></div>
<div style="width:100px; height:100px; background-color: #39C; position:absolute; z-index:2;"></div>
</div>
</body>
a div azul seria a moldura e a verde seria a imagem ;)
<div style="background-color:#333; width:500px; height:500px;">
<div style="width:350px; height:350px; background-color:#0C0; position:absolute; z-index:1;"></div>
<div style="width:100px; height:100px; background-color: #39C; position:absolute; z-index:2;"></div>
</div>
</body>
a div azul seria a moldura e a verde seria a imagem ;)
|
Marcos Regis
Re: ajuda com exibição 08 de February de 2012 às 06:54AM |
Tem várias formas de fazer isso.
Uma é usar uma DIV por cima da imagem onde o fundo dessa DIV seja um GIF transparente com as bordas brancas.
Outra é usar a propriedade border-radius do css3
#exemplo {
-moz-border-radius: 15px;
border-radius: 15px;
}
No pior das hipóteses pode simplesmentet colocar as bordas arredondadas na imagem via biblioteca GD no momento da exibição.
Uma é usar uma DIV por cima da imagem onde o fundo dessa DIV seja um GIF transparente com as bordas brancas.
Outra é usar a propriedade border-radius do css3
#exemplo {
-moz-border-radius: 15px;
border-radius: 15px;
}
No pior das hipóteses pode simplesmentet colocar as bordas arredondadas na imagem via biblioteca GD no momento da exibição.
|
Israel Block
Re: ajuda com exibição 09 de February de 2012 às 06:32AM |
Usando um pouco do que o diego colocou e a border-radius que o Marcos colocou consegui algo bem próximo do esperado. Agora vem a questão que da dor de cabeça em todo desenvolverdor: como fazer isso funcionar no IE?? Infelizmente preciso que funcione no nosso amigo tb.
Tentei algumas coisas como usar um arquivo HTC para alterar como o IE se comporta, mas nem assim funcionou, e o pouco que modificou soh funciona no IE8 e anteriores; no IE9 não funciona. Sabem como usar bordas arredondadas no IE?
Tentei algumas coisas como usar um arquivo HTC para alterar como o IE se comporta, mas nem assim funcionou, e o pouco que modificou soh funciona no IE8 e anteriores; no IE9 não funciona. Sabem como usar bordas arredondadas no IE?
|
Diego R. Mengarda
Re: ajuda com exibição 09 de February de 2012 às 06:33AM |
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.
Faça o login aqui.
Faça o login aqui.
Copyright © 2000-2012 João Prado Maia