Fundo Gradiente

Fundo Gradiente
Olá. Nesse Artigo iremos criar um fundo gradiente ,
igualmente ao do Site da Macromedia , e iremos usar as CSS (Folhas de Estilo
em Cascata). Vamos lá?
Primeiramente vamos precisar ir ao Fireworks, e criar uma
área de trabalho (canvas) com 1px de largura (width) e 1000px de
altura (height). Após feito isso, faça um retângulo
com as mesmas dimensões, borda transparente e no preenchimento usaremos
o “Gradient Toll”, colocando a cor #666666 para a mais escura
e a cor #CECFCE para a mais clara . Mas você pode colocar qualquer
cor. Só lembre-se de escolher uma cor segura , pois essa cor será
a de fundo de nossa página.
Agora exporte a imagem no formato jpeg (gradient.jpeg) para
a raiz de seu Site.
Agora vamos ao Dreamweaver. Crie o arquivo que você quer que tenha
o fundo gradiente. Abra o Painel CSS Style e clique em nova.
Escolha o “Selector Type” = Tag (redefines the look
of a specific tag) iremos colocar um comportamento na tag (corpo
do documento). Marque a Tag = e escolha se quer que esse comportamento
atue somente nesse arquivo (“This document only”) ou se quer criar
uma CSS externa “New Style Sheet File”. Eu criei uma CSS para
esse arquivo. Agora clique em “OK”.
Na Category “Background”, defina em: Background
Color a cor mais clara de seu gradiente, no caso #CECFCE. Em Background
Image, escolha o arquivo gradient.jpg criado e em repeat marque repeat-x
(a imagem então se repetirá até preencher toda a página).
O Código CSS gerado em sua página será
o seguinte:

<style type=”text/css”>

body {
background-color: #CECFCE;
background-image: url(gradient.jpg);
background-repeat: repeat-x;
}

</style>

Crie em seu arquivo html uma tabela com 1200px de altura e veja o resultado.

Note que no Painel “Relevant CSS” em “Tag Inspector”,
selecionando a tog , no arquivo html , você tem acesso
a CSS criada, podendo por ali, editá-la se for o caso. Essa é
uma ótima novidade do DWMX 2004.

Este tutorial e uma contribuição
de:
Eloah
Cristina
trabalha com design há 02 anos, as ferramentas
mais utilizadas sempre são Flash, Fireworks e Dreamweaver.
Escrito por Eloah_Cristina on dezembro 29, 2003. Arquivado em Dreamweaver. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

2 respostas a Fundo Gradiente

  1. vlw!!! ajudou d++!

  2. Anderson Fernandes

    Estou curtindo muito CSS e agora gostaria de saber como faço para criar aquelas imagens de cores gradientes que usamos em nossas url (na css), tentei fazer no fireworks mas quando tento por em paginas não da em nada. Se puder me ajudar eu ficarei muito grato. OBRIGADO!

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>