Assinar Feeds - 281 leitores
12 Sep 2006
Borda em imagens
Tuesday # 15:54 305 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, divulgações, perguntas e de quem não leu o post, não serão aprovados. Dúvidas só serão respondidas na página de perguntas e respostas. 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


5 Comentários em “Borda em imagens” -


1
Ruby 30-06-2009 - 17:27

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.

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

2
tamara 30-06-2009 - 18:29

Ruby em June 30, 2009 às 5:27 pm 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.

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

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

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

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

4
Beatriz 09-09-2009 - 18:11

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

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

5
tamara 09-09-2009 - 18:52

Beatriz em September 9, 2009 às 6:11 pm 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.

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário