Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Truques com imagens ( Parte 1 )

21-01-2007 02:32

Texturas no background
Da mesma forma que é possível definir uma cor de fundo diferente para as páginas, pode-se colocar uma imagem como papel de parede. Primeiro cria-se um arquivo .GIF e depois inclui-se o atributo BACKGROUND no tag <BODY>.
A imagem que será colocada no fundo deve ser suave o suficiente para permitir que o texto a ser colocado por cima fique legível. No exemplo que mostramos aqui, no entanto, escolhemos um padrão quadriculado para mostrar como o arquivo de imagem é repetido na tela para compor o background.

<BODY BACKGROUND=textura.gif>
Exemplo 24: colocando uma textura no fundo da página
Neste exemplo, o arquivo textura.gif é utilizado como padrão de fundo da página. Várias cópias da imagem são colocadas lado a lado até ocupar toda a área do documento.
Imagem de um pixel
Deve-se ter outros cuidados ao escolher as imagens para o fundo. O principal problema é o tamanho em bytes destes arquivos. As dimensões da imagem influem no tamanho do arquivo. Para criar um arquivo o mais econômico possível pode-se fazer uma imagem de apenas um pixel quadrado. Esse pixel, que estará ocupando um tamanho mínimo em bytes, será reproduzido em todo o fundo da página, dando a impressão de ser um arquivo único.
Baixa resolução
Outra forma de melhorar a performance da página Web é enviar primeiro uma versão em baixa resolução das imagens. Esse truque é mais útil quando a imagem é de grandes proporções. Digamos que a imagem seja bastante complexa, ocupando acima de 30 Kbytes. Cria-se uma versão simplificada da mesma imagem (em preto e branco, por exemplo) e informa-se ao navegador para carregá-la antes. Assim, o usuário pode ter uma idéia da ilustração antes de ter que esperar pela imagem em alta resolução. Criado para o Netscape, esse truque é chamado de low/high resolution flip trick. A inclusão da imagem de baixa resolução é conseguida com a colocação do atributo LOWSRC, que indica o arquivo que será carregado primeiro.
<IMG SRC=altareso.gif LOWSRC=baixares.gif>
No exemplo acima, o arquivo altareso.gif é a imagem definitiva, de alta resolução. O arquivo baixares.gif é a imagem de baixa resolução, que será carregada antes.
A principal utilidade desse truque é nos imagemaps. Sem ter que esperar pela imagem de alta resolução, o usuário pode escolher uma área da versão menos definida e seguir a sua navegação. Alguns lugares da rede aproveitam o recurso para criar uma pequena animação.
Fundo transparente
Os programas de desenho, independente do formato da figura, gravam uma imagem no formato retangular. Mesmo que a imagem seja um círculo, quando a ilustração for colocada na página Web, ela irá ocupar um espaço retangular. Se esse círculo tiver sido desenhado sobre um fundo branco, esse fundo acompanhará a imagem.
É possível fazer uma imagem ficar com o fundo transparente. Digamos que o fundo da página tenha uma textura e é preciso colocar uma imagem que deixe ver o fundo em volta dela. Pode-se definir que determinada área da imagem não tenha cor nenhuma e dar a impressão de “vazado”.
Para fazer uma imagem com fundo transparente é preciso utilizar um programa como o LViewPro, que seleciona uma determinada cor como a cor de fundo. Ao carregar a imagem no navegador, essa cor não será mostrada, dando o efeito de transparência. Por isso é preciso que a área que se pretende deixar transparente seja de uma cor só. Essa cor não pode se repetir em qualquer outra parte da imagem. Do contrário essa parte também ficará transparente.
No exemplo a seguir, a imagem foi criada sobre um fundo cinza. A intenção é colocar a figura sobre uma textura. Abre-se o arquivo no LViewPro e escolhe-se Background Color no menu Options. O programa mostra uma tela com todas as cores presentes na imagem. Seleciona-se a cor que ficará transparente (neste caso, o cinza) e clica-se em OK. Ao salvar o arquivo, o programa pede uma confirmação de gravação no formato GIF89. Clica-se em OK. Ao carregar a imagem no navegador, a área que estava na cor cinza ficou transparente e por baixo da imagem apareceu a textura.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado