Ir para conteúdo

Arquivado

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

Billie_Joe

borda "interna" com css

Por , em Desenvolvimento frontend

Recommended Posts

Billie_Joe    0

Billie_Joe
Postado

Bom dia galera!

 

 

Estou remontando alguns scripts em um site e gostaria de saber se é possível fazer o seguinte. Peço que vejam essa imagem:

 

Imagem Postada

 

Ela tem uma bordinha branca interna, a 1px de distância dos limites da figura. Atualmente editamos a imagem no Photoshop pra colocar essa bordinha antes de publicar a imagem no sistema de gerenciamento do site.

 

Pra facilitar a nossa vida queria fazer isso automaticamente. Assim, gostaria de saber se é possível fazer via CSS ou vou ter q montar uma rotina em php pra alterar a imagem.

 

 

Obrigado pessoal!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Billie_Joe    0

Billie_Joe
Postado

Então Giovani, o problema dessa solução é que eu preciso descrever o tamanho de cada imagem dentro do CSS. Mas o cara pode incluir uma imagem de 450x300 ou de 300x200 no meio do conteúdo e ai f&*%$ tudo...

 

Vou continuar dando uma procurada, mas estou começando a achar que vou ter que fazer isso via php mesmo.

 

Obrigado por enquanto!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, no teu caso é bem mais simples(eu acho), veja se te resolve o seguinte:

Coloca um padding para além da imagem, e logo após ele a borda ^^

img.movie1{
	border-style: solid;
	border-color: #636363; /* cor da borda mesmo, que fica por fora de tudo */
	border-width: 2px; /* espessura das bordas */
	padding: 2px; /* aqui que você vai conseguir o efeito de "borda interna */
}
<img src="lord.jpg" class="movie1" alt="" />
Assim, qualquer que seja o tamanho da imagem, irá funcionar...

 

ps: eu tinha feito isso aqui, e olha que ainda fiz a borda inferior ser maior:

http://www.cenasordidas.hbe.com.br/movies.php?nick=LordDeath

Compartilhar este post

Link para o post
Compartilhar em outros sites

Billie_Joe    0

Billie_Joe
Postado

tiu,

 

 

Dessa maneira você só "faz de conta" que é uma borda interna. Veja por exemplo as duas imagens q você me mandou - na verdade a segunda, se fosse uma borda interna "real", deveria ter o contorno preto. Imagima por exemplo se a figura em questão é um campo de futebol - a borda deveria ser verde certo?

 

Essa forma q você encontrou eu já programei tb mas eu sou meio chato hehe Gostaria q o branco cobrisse a área e a borda externa fosse realmente originada pela imagem e não apenas simulada com uma cor única.

 

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, tive que salvar a tua imagem e dar um ZOOM IN pra acreditar no que você ta fazendo... olha eu cheguei à alguns resultados... o primeiro foi o uso de 2 DIVs, a primeira com o background da imagem, e uma outra dentro dessa com a margem apenas(a cor do bg por padrão é transparente)

 

E o segundo, foi com a imagem mesmo(pensei nessa, pois se você precisar redimensionar a imagem via html, do meu outro jeito, eu não sei como seria feito.

Bom, coloca uma imagem qualquer ai e testa..

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="imagetoolbar" content="no" />

 

<title>trenamento Savoir</title>

<link rel="stylesheet" href="site2.css" type="text/css"/>

 

<style>

*{

margin: 0;

padding: 0;

}

body {

background-color: #ff0;

margin: 40px;

text-align: left;

}

.movie2 {

height: 198px; /*190+2+2+2+2*/

width: 198px;

background-image: url("lord.jpg");

position: relative; /* novo contexto */

}

.interna {

position: relative;

top: 2px;

left: 2px; /*tamanho das bordas externas*/

height: 190px;

width: 190px;

border-style: solid;

border-color: #fff;

border-width: 2px;

}

.interna2 {

position: absolute; /*para tirar do fluxo*/

z-index: 2;

top: 2px;

left: 2px;

height: 190px;

width: 190px;

border-style: solid;

border-color: #fff;

border-width: 2px;

}

#container1 {

display: inline;

position: absolute; /*novo contexto para a "borda"*/

background-color: #0f0;

}

 

</style>

</head>

<body>

 

<div class="movie2"><div class="interna"></div></div>

<br />

<br />

<br />

 

<div id="container1">

<div class="interna2"></div>

<img src="lord.jpg" height="198px" width="198px" alt="" />

</div>

</body>

</html>

Agora que fui pensar sobre a parte do cara poder incluir imagens de tamanhos diferentes... =/

Isso realmente complica um pouco, mas se você tiver como gerar uma classe para cada imagem e calcular tudo via php, torna viável essa solução.

Com BOX MODEL pura e simplesmente me parece ser totalmente impossível, pois nem margin, padding ou border, "entram" dentro do elemento.

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