Como Estilizar Imagens com CSS

Use CSS para apresentar as imagens do seu site da melhor forma possível. Neste artigo, você aprenderá onde posicionar uma imagem e se deve incluir decorações como bordas.

Flutuação e Centralização

Passo 1: Inserir Imagem

Insira sua imagem na página com seu método habitual. Não esqueça de incluir texto alternativo (alt) adequado para a imagem.

Passo 2: Flutuar à Esquerda (Texto à Direita)

Para fazer o texto contornar a imagem à direita, como na foto de abertura deste artigo, use uma regra CSS como:

img {
    float: left;
    padding-right: 1em;
}

A regra float: left move a imagem para a margem esquerda. O padding-right evita que o texto encoste no lado direito da imagem. Se uma borda for adicionada, o padding ficará entre a imagem e a borda. Veja a Seção 2 para trabalhar com imagem com borda.

Passo 3: Flutuar à Direita (Texto à Esquerda)

Para fazer o texto contornar à esquerda, flutue a imagem na margem direita:

img {
    float: right;
    padding-left: 1em;
}

Passo 4: Transformar em Bloco para Centralizar

Para centralizar uma imagem, primeiro torne o elemento de imagem (normalmente inline) em elemento de nível de bloco:

img {
    display: block;
}

Passo 5: Adicionar Margens Automáticas

Adicione margens esquerda e direita com valor auto para centralizar:

img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

Bordas e Margens

Passo 1: Borda Estilo Sulco (Groove)

Bordas podem criar efeito de sombra ou aparência de moldura. Para borda grossa estilo moldura com groove:

img {
    float: left;
    border-width: 1em;
    border-style: groove;
    border-color: #000000;
}

Outros estilos: solid, dotted, dashed, double, ridge, inset, outset. Largura em pixels, ems ou porcentagens.

Passo 2: Bordas Seletivas

Bordas podem ser aplicadas seletivamente ao topo, direita, base e esquerda. Use isso para criar efeito de sombra projetada (drop shadow).

Passo 3: Efeito Sombra Projetada

Usando borda sólida em dois tons de cinza apenas na borda direita e inferior:

img {
    float: left;
    border-right-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-color: #999999;
}

Passo 4: Margem Externa à Borda

Margem fica fora da borda. Adicionar margem à direita e base evita texto encostar:

img {
    float: left;
    border-right-style: solid;
    border-right-width: 8px;
    border-right-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 8px;
    border-bottom-color: #999999;
    margin-right: 1em;
    margin-bottom: 1em;
}

Dica

Se tem imagens em mais de uma divisão (div) da página, use seletores descendentes para estilizá-las individualmente. Seletores possíveis: #content img, #sidebar img, #feature img.

• Como Reparar Arquivos Corrompidos
• Como Restaurar ou Ler E-mails Arquivados no Outlook