Borda nas imagens usando CSS e HTML
Dica publicada em Linux / Introdução
Borda nas imagens usando CSS e HTML
É muito simples colocar bordas nas suas imagens usando CSS e HTML, eu já visualizei muitas imagens na net que eles editam a imagem para poder colocar a borda, na minha opinião é mais prático e fácil com código.
1. Coloque o seguinte código no seu CSS:
2. No seu HTML coloque:
Para imagem centralizada:
Para imagem alinhada à esquerda:
Para imagem alinhada à direita:
Para imagem sem alinhamento:
3. Às vezes, para que a borda funcione corretamente no Internet Explorer, você tem que substituir o <html> e o <head> por:
Configurando a seu gosto:
Um exemplo:
Sem borda:
Com borda:
Fácil, fácil, não?!?!?
1. Coloque o seguinte código no seu CSS:
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
padding: 3px;
text-align: center;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
display: block;
margin-left: auto;
margin-right: auto;
padding: 3px;
text-align: center;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
2. No seu HTML coloque:
Para imagem centralizada:
<img src="http://www.suaimagem.jpg" class="aligncenter" alt=""/>
Para imagem alinhada à esquerda:
<img src="http://www.suaimagem.jpg" class="alignleft" alt=""/>
Para imagem alinhada à direita:
<img src="http://www.suaimagem.jpg" class="alignright" alt=""/>
Para imagem sem alinhamento:
<img src="http://www.suaimagem.jpg" class="alignnone" alt=""/>
3. Às vezes, para que a borda funcione corretamente no Internet Explorer, você tem que substituir o <html> e o <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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
Configurando a seu gosto:
.alignnone{
margin: 1px 4px 0 0;
padding: 3px; /* Aqui Você pode aumentar ou diminuir o tamanho da borda pode colocar 3px, 5px, 6px etc */
background-color: #ffffff; /* Aqui você pode trocar a cor */
border: 1px solid #dbdbdb;
}
margin: 1px 4px 0 0;
padding: 3px; /* Aqui Você pode aumentar ou diminuir o tamanho da borda pode colocar 3px, 5px, 6px etc */
background-color: #ffffff; /* Aqui você pode trocar a cor */
border: 1px solid #dbdbdb;
}
Um exemplo:
<img src="http://rhodya.99k.org/vox.jpg" class="alignnone" alt="" width="200" height="150" />
Sem borda:
