Como estilizar uma imagem com CSS

Escrito por ehow contributor | Traduzido por arthur mello
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como estilizar uma imagem com CSS
Aprenda a colocar o texto ao redor de uma imagem flutuante de CSS

Como estilizar uma imagem com CSS. Use CSS para apresentar as imagens do seu site da melhor maneira possível. Neste artigo, você aprenderá onde colocar uma imagem e se coloca ou não detalhes como bordas.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Conhecimento básico de HTML e CSS
  • Uma página da web com imagens precisando ser estilizadas
  • Nada novo é necessário para esta sessão

Lista completaMinimizar

Instruções

    Flutuando e centralizando

  1. 1

    Insira sua imagem na página usando seu método habitual. Não se esqueça de incluir um texto alternativo adequado a imagem.

  2. 2

    Para fazer seu texto envolver a imagem à direita, similar ao modo como está na foto introduzindo este artigo, use um código CSS como este:

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

    O comando "float: left" faz a imagem se mover para a margem esquerda. O comando "padding-right" evita que o texto encoste no lado direito da imagem. Se uma borda for adicionada à imagem, um espaço ficaria entre a imagem e a borda. Veja a sessão 2 para trabalhar com uma imagem com borda.

  3. 3

    Para fazer o texto cobrir o lado esquerdo, faça a imagem flutuar na margem direita. Use um código como este:

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

  4. 4

    Para centralizar uma imagem primeiro transforme o que seria normalmente um elemento de imagem em linha, em um elemento em nível de bloco.

  5. 5

    A seguir, adicione margens à esquerda e à direita da imagem para centralizá-la. O valor adequado para as margens da esquerda e da direita para centralizar algo é automático.

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

    Bordas e margens

  1. 1

    Bordas podem ser usadas para criar um efeito sombreado ou a aparência de uma moldura.

    Para criar uma borda grossa, com a aparência de uma moldura usando o estilo de borda de ranhura, um código como este pode ser usado:

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

    Os outros estilos de borda são: sólida, pontilhada, tracejada, dupla, cumeada, em baixo-relevo e em alto-relevo. A largura pode ser expressa em pixeis, emes ou porcentagens.

  2. 2

    Bordas podem ser aplicadas seletivamente ao topo, direita, fundo e esquerda da imagem. Você pode usar esse conhecimento para criar um efeito sombreado.

  3. 3

    Usando uma borda sólida em dois tons de cinza somente à direita e ao fundo, você pode obter um efeito sombreado.

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

  4. 4

    A margem fica fora da borda. Adicionar uma certa margem à direita e ao fundo da imagem evitará que o texto encoste na imagem.

    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; }

Dicas & Advertências

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

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível