Imagens em CSS - Borda, Margem, Espaçamento, < img >, Alinhamento e Formatação

Neste Tutorial de CSS sobre Imagens, vamos mostrar como formatar figuras em nossos sites, criando bordas, alinhando com o texto e como inserir legendas (caption).

Curso de Webmaster Online e COM CERTIFICADO! Clique Aqui!

Tutorial de Imagens em CSS


Como estudamos em nossos Tutoriais sobre Imagens em HTML, as principais tags e atributos para trabalharmos com imagens em sites, são:

É importante que, antes de ler e por em prática este tutorial de CSS, você deva ter lido, entendido os tutoriais de HTML, pois diferente de outras ferramentas do CSS (onde tínhamos comandos e códigos especiais para estilizar), em imagens, não temos nenhum código ou comando pronto.

Porém, não pense que o CSS deixa a desejar na formatação de imagens, pelo contrário, vamos fazer coisas incríveis com as imagens de nossos sites, de maneiras bem simples.

O que iremos fazer é utilizar recursos de layout do CSS, e usá-los especificamente para formatar imagens. Assim, iremos usar as seguintes propriedades, tags e elementos do CSS:
  • <div> - Para definir e agrupar imagens e elementos
  • border - Para inserir bordas nas imagens
  • padding - Espaçamento Interno de Imagens
  • margin - Usando margens nas imagens
  • float - Fazer imagens flutuar e se alinhar no texto

Imagens em CSS - A tag <img>


Agora que sabemos que tags e ferramentas do CSS usar, vamos aprender a estilizar e manipular as imagens em nosso site.
E como dissemos, não vamos usar nada novo, nenhuma técnica ou ferramenta especialmente criado no CSS para tratar imagens.

Poderíamos usar a tag <img> em nossa folha de estilos para estilizar todas as imagens.
Porém, aí estaríamos estilizando TODAS de uma vez. Ou seja, todas teriam mesmo tamanho, borda, margin etc.

Vamos inserir a seguinte imagem em nosso site e formatá-la usando apenas o CSS.
Salve como "css.png" e deixe no mesmo diretório do arquivo .css e .html

Curso de CSS online com certificado grátis. Apostila para download.


Vamos colocar essa figura e um texto ao lado dela, ou seja, alinhar imagem e texto, através do CSS.

Usando divs

Uma dica importante para trabalhar com imagens em sites, e estilizar com CSS é: usar divs.
Dentro da div colocamos a imagem, através da tag <img> e de seus atributos, como src, width, height, alt e title.

Mais adiante, vamos ver que o uso da tag div também pode ser útil para quem desejar adicionar uma legenda nas imagens.

Nosso código HTML, da figura CSS fica assim (coloque dentro da <body> de seu site):

<div class="css">
 <img src="css.png" alt="Tutorial de CSS" title="Logo do CSS" width="150" height="150" />
</div>

Note que demos o nome de "css" para esta div, através do atributo class.
Vamos escrever um texto dentro do corpo (<body>) de nosso site.
O que vamos tentar fazer é alinhar a imagem com este texto, tudo através do CSS.

O corpo do documento HTML será:

<body>
 <div class="css">
  <img src="css.png" alt="Tutorial de CSS" title="Logo do CSS" width="150" height="150" />
 </div>
 <p>
  CSS significa Cascading Style Sheets e é uma linguagem de estilos usada para criar sites.<br />
  <br/>
  A grande vantagem do CSS na criação de sites, é que podemos fazer a separação do conteúdo e do formato (estilo). <br />
  <br/>
  Geralmente colocamos nosso código CSS em um arquivo de extensão .css e no documento HTML colocamos um link para este arquivo, que é conhecido como folha de estilos. <br />
  <br />
  Um bom site para aprender CSS (além de HTML e HTML5) é o HTML Progressivo: www.htmlprogressivo.net<br/>
  O Curso HTML Progressivo é online, totalmente gratuito e super completo. <br/>
 </p>
</body>

Agora rode e veja o resultado.
Feio, não?

Tudo bem, o CSS serve para isso, para estilizarmos nosso site, o deixando bem organizado e agradável.
Vamos fazer com que esta figura fique na esquerda, através da propriedade float.
Usaremos 15% da largura da tela para a exibição da imagem.
Além disso, vamos adicionar uma borda ao redor de nossa figura, para ela ficar bem separada do restante do conteúdo.

Se notarem bem, o nosso texto está totalmente colado na figura, o que não é nada agradável.
É necessário dar um espaçamento, para deixar o site mais organizado.

Vamos usar a propriedade padding para criar um espaçamento da borda pra dentro e a propriedade margin, para separar a borda da imagem do texto.

Nossa folha de estilos CSS, do trecho que formata a tag <img> da classe "css" fica:

.css img{
 float: left;
 width: 15%;
 border: thin solid;
 padding: 5px;
 margin: 0px 10px 10px 0;
}

E teremos uma imagem perfeitamente alinhada ao lado do texto.
Experimente fazer float: right; e verá que essa imagem ficará alinhada na direita de seu navegador.

3 comentários:

Terra1 Comic disse...

Olá! Mudei recentemente o template do meu Blog e agora estou enfrentando problemas para fazer a formatação das imagens que compõe as postagens do Blog. Eu utilizo várias imagens por postagem, formato todas elas de forma correta ou pelo menos da forma como eu espero que elas sejam exibidas, mas o template exibe as imagens como se elas não tivessem formatação. Este problema não acontecia no meu antigo template, mas também não pretendo regredir para ele. Então, como eu posso fazer para corrigir este problema de formatação das imagens que vão no corpo das postagens do Blogger?
Segue link: http://www.terra-1.net.br/2013/07/turma-da-monica-jovem-hq-online.html

Marccé disse...

não está dando para entender como fazer par utilizar em uma única imagem que já esta dentro de uma div dentro da div<header Prexemplo;
a intenção seria colocar a imagem(logotipo da empresa e a direita o nome da empresa usando o H1 e h2

Anônimo disse...

Marccé, faça da seguinte forma.
---> no HTML onde vc colocou a imagem:



---> no CSS:

.logotipo {
float: de_acordo_com_a_sua_necessidade;
width: de_acordo_com_a_sua_necessidade;
border: de_acordo_com_a_sua_necessidade;
padding: de_acordo_com_a_sua_necessidade;
margin: de_acordo_com_a_sua_necessidade;

}

OBS: o i-m-g NAO TEM OS TRACINHOS, os coloquei so pra conseguir postar.
e eh so isso ai... pode usar os valores do site como exemplo...