Fundos Gradientes em HTML

FUNDOS GRADIENTES EM PÁGINAS HTML -

Linguagem: HTML e CSS

Falae pessoal. Estou aqui para mostrar um efeito mto interessante e que pode ser visto em vários sites da WEB hoje. Muitas pessoas já me perguntaram, ficam em dúvida, etc, em saber como que é possível ter como plano de fundo HTML um gradiente. Bom, antes você poderia fazer um gradiente no Photoshop, ou qualquer outro aplicativo gráfico, e depois colocá-lo no atributo background da tag <body> da linguagem HTML.

Bom, legal… Então porque estamos falando nisso se já temos uma forma de fazê-lo? Aí eu respondo com uma simples palavra: Resolução. A grande vilã de muitos designers desatentos que existem na WEB. Experimente colocar um gradiente feito para resolução 800×600 em uma de 1024×768. O gradiente vai se repetir verticalmente, ou horizontalmente, caso o gradiente seja horizontal, não é verdade? Tirando que se não for feito corretamente poderá se repetir tanto horizontalmente, como verticalmente.

Agora eu mostrarei um jeito muito simples e rápido de se fazer isso utilizando CSS linkado no HTML que terá o fundo. Lembrando que será um gradiente vertical ok? Vamos começar?

- PRIMEIRO PASSO

Crie uma imagem em qualquer editor gráfico (Fireworks, Photoshop, etc…), e crie uma nova imagem com 1x745px (ou seja, 1 pixel de largura e 745 pixels de altura).

- SEGUNDO PASSO

Preencha a imagem com um gradiente, com as cores qu você achar melhor (aqui eu usei o básico mesmo, Preto – #000000 e Branco – #FFFFFF). Agora, exporte a imagem com o nome fundo.gif

- TERCEIRO PASSO

A parte de criação está pronta, agora vamos começar a prorgamação. Vá no seu HTML, e entre as tags <head> e </head>, cole o seguinte código:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

Obs.: Nesta linha de código, a página HTML está “importando” atributos de um arquivo CSS externo chamado style.css indicado no atributo href. Levando em conta que o aquivo CSS está no mesmo diretório do arquivo HTML.

- QUARTO PASSO

Terminamos com o HTML, agora vamos começar com oCSS externo. Vá no Bloco de Notas (eu prefiro o Bloco de Notas, mas quem quiser usar algum editor HTML como o Dreamweaver, podem usar), e insira o código abaixo:

body{background-color:#FFFFFF; background-image: url(fundo_body.gif); background-repeat: repeat-x;}

Obs.: Vou explicar essa linha de comando:

body{ : início do código, depois disso, todo atributo que você colocar, irá influenciar tudo que estiver na tag <body>, ou seja, tudo.

- background-color:#FFFFFF; : nessa parte, estou indicando a cor de fundo da página. Você deve colocar a cor que está na parte inferior do gradiente, e neste caso foi a cor branca, já que fiz um gradiente branco ok?

background-image: url(fundo_body.gif); : aqui ficará a imagem de fundo, ou seja, o gradiente que criamos ok? Seria como o atributo background da tag <body>.

background-repeat: repeat-x; este é o principal atributo. Ele indica a repeticão da imagem que está no background, ou seja, o gradiente. O atributo repeat-x indica que a imagem será repetida apenas pelo eixo x, ou seja, somente na horizontal. O pessoal que quiser fazer o gradiente na vertical, só irá mudar essa parte aqui, colocando ao invés de x, colocar y: repeat-y. Isso fará com que o gradiente se repita somente na vertical, no eixo y.

- QUINTO PASSO

Salve tudo e teste abrindo o arquivo HTML, chamado aqui por gradiente.html. Veja o resultado aqui.

Bom, até a próxima, qualquer dúvida, crítica, sugestão, entre em contato.

Bruno Dulcetti

Diretor de Criação

brunodulcetti@studiodigitall.com

StudioDigitALL.com – Porque não existe uma segunda impressão.

http://www.studiodigitall.com

Escrito por Bruno_Dulcetti on fevereiro 18, 2004. Arquivado em Dreamweaver. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

4 respostas a Fundos Gradientes em HTML

  1. olá, eu gostaria de saber o seguinte, tenho um logo criado e o fundo dele está todo branco, gostaria defazer um gradiente ao fundo começando do branco indo ao vende escuro, como faço?

  2. tenho a mesma duvida dela só ke o meu é preto e kero mesclar com verde me ad no msn riocuritiba@hotmail.com

  3. Fiz tudinho igual, mas não funciona de jeito nenhum.

  4. background-image: url( ‘body.gif ‘ );

    atenção para:
    a aspas simples;
    o nome da imagem;
    a localização da imagem:
    ex url( ‘ /img/gradiente.gif ‘ );

    se não olhar estes detalhes não vai dar certo

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>