Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eloah Cristina

[Resolvido] Fundo Gradiente

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

Eloah Cristina    0

Eloah Cristina
Postado

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.

 

Imagem Postada

 

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.

 

Imagem Postada

 

Escolha o "Selector Type" = Tag (redefines the look of a specific tag) iremos colocar um comportamento na tag <body> (corpo do documento). Marque a Tag = <body> 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".

 

Imagem Postada

 

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).

 

Imagem Postada

 

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 <body>, 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.

 

Imagem Postada

 

[]' Eloah Cristina

Equipe Tutoriais Mania - O Maior Site de Tutoriais da WEB.

www.tutoriaismania.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito