Tweet
Introdução
Neste tutorial mostro como construir e colocar um fundo degradê em uma página web, usando uma imagem e a propriedade CSS background.
A construção do fundo no Fireworks
Vou mostrar como construir o fundo degradê usando o Fireworks.
Use o seu editor preferido.
1-) Abra o FW e tecle Ctrl + N para abrir um novo documento;
2-) Ajuste as dimensões do palco para 10px x 700px e cor transparente;
1-) Desenhe um retângulo com as dimensões do palco e aplique o preenchimento degradê;
Ajuste o degradê e salve com a extensão .jpg
Neste tutorial salvei como bgdegrade.jpg
A regra CSS
Esta é a regra CSS que coloca o degradê como fundo da página:
<style type="text/css">
body {
background:#02CBFF url("bgdegrade.jpg")
top left repeat-x fixed;
}
</style>
Nota: Defina também uma cor para o fundo que ofereça contraste com os textos na página, pois se por acaso a imagem do fundo não for carregada no browser do usuário você garantirá a legibilidade da página.
Imagine um fundo degradê em cor escura onde você projetou textos em cor branca. Se a imagem de fundo não for carregada o fundo assumirá uma cor clara (em geral branca) e os textos ficarão invisíveis.
Nesta dica adotei a cor alternativa para o fundo #02CBFF (azul claro)
A página com o fundo aplicado
Veja a página web com o fundo degradê deste tutorial: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
Veja também o código fonte da página e a mesma página sem o carregamento do fundo degradê: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
Neste tutorial mostro como construir e colocar um fundo degradê em uma página web, usando uma imagem e a propriedade CSS background.
A construção do fundo no Fireworks
Vou mostrar como construir o fundo degradê usando o Fireworks.
Use o seu editor preferido.
1-) Abra o FW e tecle Ctrl + N para abrir um novo documento;
2-) Ajuste as dimensões do palco para 10px x 700px e cor transparente;
1-) Desenhe um retângulo com as dimensões do palco e aplique o preenchimento degradê;
Ajuste o degradê e salve com a extensão .jpg
Neste tutorial salvei como bgdegrade.jpg
A regra CSS
Esta é a regra CSS que coloca o degradê como fundo da página:
<style type="text/css">
body {
background:#02CBFF url("bgdegrade.jpg")
top left repeat-x fixed;
}
</style>
Nota: Defina também uma cor para o fundo que ofereça contraste com os textos na página, pois se por acaso a imagem do fundo não for carregada no browser do usuário você garantirá a legibilidade da página.
Imagine um fundo degradê em cor escura onde você projetou textos em cor branca. Se a imagem de fundo não for carregada o fundo assumirá uma cor clara (em geral branca) e os textos ficarão invisíveis.
Nesta dica adotei a cor alternativa para o fundo #02CBFF (azul claro)
A página com o fundo aplicado
Veja a página web com o fundo degradê deste tutorial: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
Veja também o código fonte da página e a mesma página sem o carregamento do fundo degradê: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
Comment