Padrões de Repetição para Imagens

- Explicar e exemplificar a técnica de padrões de repetição para imagens.
- Aplicar padrões de repetição para resolver problemas de layout.

Os padrões de repetição ou patterns são muito utilizados no web design. HTML os têm e CSS, é claro, também. Todos nós já os teremos usado em muitas ocasiões, para conseguir a repetição de uma imagem que colocamos como fundo de uma página ou de qualquer outro elemento de uma web. O componente Canvas do HTML 5 também tem sua própria implementação dos padrões, com os quais podemos fazer facilmente um mosaico no que se repita constantemente uma imagem.

Definir um padrão

Para definir um padrão utilizamos o método createPattern() que pertence ao contexto do canvas. Este método recebe dois parâmetros. O primeiro é a imagem que desejamos utilizar como padrão e o segundo é o tipo de repetição que queremos implementar.

A imagem que desejamos utilizar podemos tirá-la de um objeto Image de Javascript e o tipo de repetição é similar ao que se utiliza quando se define um fundo de imagem em CSS: "repeat" (para um mosaico que se repete tanto na horizontal quanto na vertical, "repeat-x" (para repetições na horizontal), "repeat-y" (para repetir a imagem na vertical) e "no-repeat", que não produzirá nenhuma repetição).

Existem vários passos prévios a serem realizados antes de se poder utilizar uma imagem:
Criar um objeto Image de Javascript:
var img = new Image();
Associar o arquivo gráfico desejado:
img.src = 'logo-desarrolloweb.gif';
Definir o que desejamos fazer com a imagem, por meio do evento onload, que se ativa quando a imagem está pronta para usar:
img.onload = function(){
//código que desejemos fazer, onde sabemos ao certo que a imagem está disponível.
}

Uma vez que tenhamos definido um padrão, ainda temos metade do trabalho por diante. Esse padrão simplesmente estará declarado como objeto em Javascript e pronto para usar em um canvas, mas para isso devemos configurar o estilo de preenchimento e em seguida preencher de cor uma área.

var meuPadrao = ctx.createPattern(objeto_imagem, 'repeat');

Com a linha anterior teríamos criada uma variável meuPadrao que contem um padrão de imagem pronto para ser utilizado.

Configurar um padrão como estilo de preenchimento de cor

A propriedade fillStyle do contexto do canvas, que vimos ao falar da cor de preenchimento e de traçado em canvas, à parte de especificar a cor de preenchimento, indicar um padrão para utilizar para preencher uma área. Com isto, conseguiremos pintar uma área com um padrão ou mosaico de imagem, em lugar de uma cor plana.

ctx.fillStyle = meuPadrao;

Com isto conseguimos que, na próxima vez que se preencha de cor uma área, se faça com um mosaico de imagem ou pattern, em lugar de uma cor plana.
Agora podemos preencher de cor qualquer área, que será preenchida com o padrão definido anteriormente.
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
Com esta linha preencheríamos de cor toda a área disponível no elemento canvas, ou seja, um retângulo que vai desde a coordenada (0,0) até toda a largura e altura do canvas. Como previamente se aplicou o padrão à propriedade fillStyle, em vez de preencher com uma cor se preencherá com um mosaico de imagem.
Para terminar colocamos o código de um exemplo que faz uso de uma imagem para criar o pattern.
window.onload = function(){
//Recebemos o elemento canvas
var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
//Crio uma imagem com um objeto Image de Javascript
var img = new Image();
//indico a URL da imagem
img.src = 'logo-desarrolloweb.gif';
//defino o evento onload do objeto imagem
img.onload = function(){
//Crio um "pattern" no canvas
var meuPadrao = ctx.createPattern(img, 'repeat');
ctx.fillStyle = meuPadrao;
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
}
}
Como vimos, não há muito mistério no uso de padrões. É um pouco mais trabalhoso que colocar uma imagem no canvas, mas muito menos que se tivéssemos que escrever um script para realizar o mosaico "à mão".
Outra forma: Você alguma vez ja teve vontade de colocar um gradiente em diagonal como plano de fundo no seu site ou blog mas percebeu que teria que criar uma imagem inteira e seria inviável, pois ficaria muito pesada?
Uma das coisas que aprendemos em HTML é criar backgrounds usando repetições de imagens. Para criar então um gradiente vertical ou horizontal é perfeitamente viável sem necessitar criar uma imagem inteira, ela só preceisa ter a largura da tela e espessura de 1 ou 2 pixels no caso de gradiente horizontal e vice versa para gradiente vertical. A repetição da imagem criará emendas perfeitas que no final parecerão uma imagem única.
Criar um gradiente diagonal com uma imagem pequena e que se encaixe perfeitamente, principalmente se tiver mais de duas cores acho que não é tarefa fácil.
Felizmente é possível fazer um efeito desses com CSS puro.
Veja o código abaixo:

Então entra em cena o Ultimate CSS Gradient Generator uma ferramenta online que lhe possibilitará criar gradientes lineares, diagonais e até mesmo radiais.

Padrão de repetição de imagens com a propriedade background

As propriedades background permitem definir efeitos para o pano de fundo de elementos

O CSS oferece as seguintes propriedades para definição de background (fundo) de elementos em HTML:
background-color: define uma cor de fundo.
background-image: define uma imagem de fundo.
background-repeat: define uma repetição para uma imagem, definida nas posições horizontal e vertical.
background-attachment: não suportados por todos os navegadores.
background-position: posicionamento da imagem no fundo da página.

Propriedade background-image - Imagem de fundo

A propriedade background-image define uma imagem para ser usada como fundo de um elemento.
Por padrão a imagem é repetida, então ela acaba cobrindo todo o elemento. Por isso é preciso tomar cuidado ao definir imagens menores que o tamanho do elemento na qual a mesma será carregada.
Vejamos como uma imagem pequena pode ser utilizada para preencher todo o corpo de uma página:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-image em CSS</title>
  </head>
  <body style="background-image: url(imagens/fundo.gif);">
    <h3>Propriedade background-image em CSS</h3>
    <p>
      Esta página tem uma pequena imagem definida com
      a propriedade <strong>background-image</strong>.
    </p>
    <p>
      Como o padrão para essa propriedade é que a mesma
      seja repetida, todo o corpo da página recebe
      esse fundo.
    </p>
  </body>
</html>

A imagem utilizada na página acima é bem pequena, com apenas 10 x 10 pixels, veja:

Mas como a mesma é repetida, o corpo da página acaba sendo renderizado com um mosaico. 
Veja o resultado:

É preciso tomar cuidado para que a apresentação do texto não seja prejudicada pela imagem de fundo.

Propriedade background-repeat - repetição de background

A propriedade background-repeat utiliza geralmente os valores repeat-xe repeat-y, que determinam o eixo no qual uma imagem será repetida.
Há também o valor no-repeat, que evita que a imagem seja repetida, como veremos mais abaixo.
Os valores para a propriedade background-repeat devem ser utilizados em conjunto com a propriedade backgroun-image, para que seja possível determinar qual imagem será repetida.

Valor repeat-x - Repetição na horizontal

Por exemplo, digamos que você queira aplicar um fundo de uma imagem em background no topo da página, como a imagem abaixo:

Se você inserir uma imagem completa, cobrindo toda a largura da área desejada, a página pode demorar para carregar e ficar lenta.
Com CSS e a técnica background-repeat definido com valor repeat-x, é possível utilizar uma imagem bem menor, mais estreita, conhecida em Webdesign como "fatia". Veja a imagem abaixo:

Agora vejamos como utilizar essa "fatia" da imagem em degradê que queremos criar em uma página:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-repeat na horizontal em CSS</title>
    <style type="text/css">
      body {
        background-image: url(imagens/background_degrade_fatia.gif);
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat na horizontal em CSS</h3>
    <p>
      Esta página utiliza uma "fatia" de imagem em degradê
      que será repetida horizontalmente com a propriedade
      <strong>background-repeat</strong> com um valor
      <strong>repeat-x</strong>.
    </p>
    <p>
      Com o valor <strong>repeat-x</strong> a imagem
      será repetida até o tamanho da largura do elemento
      no qual a imagem está inserida, neste caso, no
      corpo do elemento <strong>body</strong>.
    </p>
  </body>
</html>

Ao visualizarmos o resultado, vemos que podemos utilizar imagens pequenas e repeti-las horizontalmente, podendo criar imagens de fundo interessantes:

Valor repeat-y - Repetição na vertical

Assim como podemos repetir imagens na horizontal com a propriedaderepeat-x também podemos repeti-las na vertical com a propriedaderepeat-y.
Essa propriedade é muito útil para criar um fundo para o corpo do documento, evitando a renderização de uma imagem muito grande e de tamanho fixo.
Se o desenvolvedor colocar uma imagem muito grande para o fundo da página inteira pode ocorrer de a página demorar para carregar.
Além disso, uma imagem com tamanho pré-definido no corpo da página limita a altura da mesma ao tamanho da imagem.
Vejamos como é possível definir um fundo para uma página completa utilizando somente uma imagem repetida no eixo y:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-repeat na vertical em CSS</title>
    <style type="text/css">
      body {
        background-image: url(imagens/fatia_horizontal.gif);
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat na vertical em CSS</h3>
    <p>
      Esta página utiliza uma "fatia" de imagem em degradê
      que será repetida verticalmente com a propriedade
      <strong>background-repeat</strong> com um valor
      <strong>repeat-y</strong>.
    </p>
    <p>
      Com o valor <strong>repeat-y</strong> a imagem
      será repetida até o tamanho da altura do elemento
      no qual a imagem está inserida, neste caso, no
      corpo do elemento <strong>body</strong>.
    </p>
  </body>
</html>

A imagem utilizada nesse código é a seguinte:

Visualiando a página:

Valor no-repeat - Evitar repetição de imagem

Como vimos anteriormente, a propriedade background-image por padrão repete a imagem definida até preencher toda a página.
Para evitar que isso ocorra, utiliza-se o valor no-repeat para a propriedade background-image.
Vejamos um exemplo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-image sem repetição</title>
    <style type="text/css">
      body {
        background-image: url(imagens/lemmon.png);
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h3>Background-image sem repetição.</h3>
    <p>
      Esta página utiliza uma imagem de fundo
      que foi determinada para não ser repetida
      através do valor <strong>no-repeat</strong>
      para a propriedade <strong>background-image</strong>.
    </p>
    <p>
      Se o valor não for definido como
      <strong>no-repeat</strong> a imagem será
      repetida por toda a página, como é o padrão.
    </p>
  </body>
</html>

Ao visulizarmos a página, vemos que a imagem aparece somente uma vez:

Veja o que aconteceria se não fosse definido o valor no-repeat para a propriedade background-repeat: