Imagens de fundo do corpo feitas facilmente

html

Um bom recurso que você encontrará em muitos sites é onde a área de conteúdo central parece sobrepor a página com uma sombra projetada atrás dela. Na verdade, é um método bastante simples de fazer com que seu blog tenha uma boa aparência (ou outro site) com uma única imagem de plano de fundo.

Como isso é feito?

  1. Descubra a extensão do seu conteúdo. Exemplo: 750px.
  2. Construa uma imagem em seu aplicativo de ilustração (eu uso o Illustrator) mais ampla do que a área de conteúdo. Exemplo: 800px.
  3. Defina o plano de fundo da imagem como o plano de fundo que você deseja ter em cada lado do blog.
  4. Adicione uma região branca sobre o fundo.
  5. Aplique uma sombra na região branca que sai de cada lado da região.
  6. Defina a largura da área de corte por 1 pixel de altura. Isso tornará a imagem a ser baixada agradável e compacta para renderização rápida.
  7. Produza a imagem.

Veja como eu construí usando o Illustrator (note que eu tenho a área de corte muito mais alta ... isso é só para você ver o que estou fazendo):
Fundo com Illustrator

Aqui está um exemplo de como a saída ficaria com a imagem de fundo:
Exemplo de imagem de fundo

Veja como aplicar a imagem usando sua tag de estilo de corpo em seu CSS arquivo.

plano de fundo: # B2B2B2 url ('images / bg.gif') repeat-y center;

Aqui está uma dissecação da tag de estilo de fundo:

  • # B2B2B2 - define a cor de fundo geral da página. Neste exemplo, é cinza para combinar com o cinza da imagem de fundo.
  • url ('images / bg.gif') - define a imagem de fundo que você gostaria de usar.
  • repeat-y - define a repetição da imagem no eixo y. Portanto, a imagem de fundo se repetirá de cima para baixo da página.
  • center - define a imagem no centro da página.

Bom e fácil ... uma imagem, uma etiqueta de estilo!

2 Comentários

  1. 1
  2. 2

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.