Assinar Feeds - 311 RSS leitores
12 Sep 2006
Borda em imagens
Tuesday # 15:54 366 palavras Arquivado em: Css, Tutoriais Por Tamara

É muito mais fácil e prático fazer as bordas das suas imagens com css, assim você não precisa editar a foto apenas para colocar a borda. Veja o exemplo:

Sem borda:

Com borda:

01. Coloque o seguinte código no seu css:

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
padding: 6px;
text-align: center;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}

02. Para que suas imagens apareçam com bordas use:

Para imagem com borda centralizada:

<img src="http://www.suaimagem.jpg" class="aligncenter" alt=""/>

Para imagem com borda alinhada à esquerda:

<img src="http://www.suaimagem.jpg" class="alignleft" alt=""/>

Para imagem com borda alinhada à direita:

<img src="http://www.suaimagem.jpg" class="alignright" alt=""/>

Para imagem com borda sem alinhamento:

<img src="http://www.suaimagem.jpg" class="alignnone" alt=""/>

03. Se quiser que o fundo da sua borda tenha uma imagem, substitua background-color: #ffffff; por background-image: url (http://www.imagem.com);

04. Para que a borda funcione corretamente no internet explorer, você tem que substituir

<html>
<head>

Por

<!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">
<head profile="http://gmpg.org/xfn/11">


« Quase uma semana depois…
Tempo, Flickr, Presente!!! »



Os comentários desse blog são MODERADOS, portanto só serão publicados após a minha aprovação. Comentários com propagandas e divulgações não serão aprovados. Obrigada.




38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1


7 Comentários em “Borda em imagens” -


1
Ruby 30-06-2009 - 17:27   Responder

Oi, amei as dicas, mas sou meio leiga, posso colocar esse código no post quando postar a imagem?Porque esse css é japonês pra mim. Obrigada e tomara que vc posssa responder, pois sempre vi essa borda e queria saber como fazer.


2
tamara 30-06-2009 - 18:29   Responder

Ruby em June 30, 2009 às 17:27 disse:

Oi, amei as dicas, mas sou meio leiga, posso colocar esse código no post quando postar a imagem?Porque esse css é japonês pra mim. Obrigada e tomara que vc posssa responder, pois sempre vi essa borda e queria saber como fazer.

A parte do css você vai colocar no html do seu layout, depois da tag style.


3
Carrie'tchu 15-07-2009 - 20:52   Responder

Obrigada Tamara!Poxa eu me qebrava pra achar isso ;/
espero que tudo esteja bem
beijinhos :*
9


4
Beatriz 09-09-2009 - 18:11   Responder

Olá Tamara :) Antes de mais, parabéns pelo seu site.
Gostaria muito de usar este código, mas existe alguma maneira de o colocar a funcionar para todas as imagens no meu site?

Beijinhos de Portugal <3


5
tamara 09-09-2009 - 18:52   Responder

Beatriz em September 9, 2009 às 18:11 disse:

Olá Tamara :) Antes de mais, parabéns pelo seu site.
Gostaria muito de usar este código, mas existe alguma maneira de o colocar a funcionar para todas as imagens no meu site?

Beijinhos de Portugal <3

Até existe, mas vai colocar borda em todas as imagens, se é isso que vc quer, é só usar dentro de img no css.


6
I SABELLA 30-06-2010 - 17:36   Responder

legal de mais 32


7
Nina 13-07-2010 - 08:44   Responder

Tamara vc sempre me salva com suas dicas! Parabéns!!!!!!!!
BJUS!