9 de mar de 2010

Página com fundo degradê

Hoje você VAI aprender como é simples fazer um efeito de fundo degradê em um site com uma pequena imagem de 1 pixel, com HTML e CSS.

Você irá precisar de Photoshop, esta é uma ótima ferramenta para auxiliar o web designer, destaquei a palavra auxiliar pois existem muitos web designers que apenas utilizam o photoshop e geram o html através do photoshop, assasinando todos os padrões web, pois infelizmente o photshop gera um html bem fraco.

Então, vamos abrir o Photoshop neste caso estou usando a versão CS3, mas qualquer versão você poderá fazer.

Crie um documento com as resoluções (1024x768), foi escolhida esta resolução pois atualmente 80% da internet utiliza esta resolução.



Deixe a cor #7fa6ee como primária na sua paleta
Em seguida você irá escolher a ferramenta


Faça um "traço" com a ferramente na imagem da forma como mostra abaixo, isto definirá a área de degradê (Se for necessário clique na imagem para ampliar).


Ao soltar o mouse o photohop criará veja como ficou



Agora é a hora de diminuir esta imagem para que sua página com fundo degradê não fique pesada. Para isso acesse Image->Image Size... (crtl + alt + i).


Ao clicar uma janela é aberta, altere o width (largura) da imagem para 1


Agora depois de alterar a largura da imagem é só salva, agora vai uma das melhores dicas para você deixar seu site leve, SEMPRE salve as imagens em File -> Save for Web & Devices repare o parâmetros Preset para GIF para definir o tipo da imagem e salve-o com fundo.gif.


Agora que já temos a imagem de fundo, vamos por a mão na massa. Crie um documento HTML em branco.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como um todo! me ensinou - Meu primeiro fundo degradê Vertical</title>
</head>

<body>
<a href="http://webcomoumtodo.blogspot.com" title="Web Como Um Todo!">Web Como Um Todo!</a>
</body>
</html>


Crie um documento CSS denominado wcut.css com o código abaixo, onde definirá propriedade do fundo da tag body

@charset "utf-8";
/* CSS Document */

body{
background:transparent url(fundo.gif) repeat-x 0 0;
}


Agora é só incluir a referência ao documento css na página HTML, insira a linha abaixo entre as tags <head> e </head>

<link href="wcut.css" rel="stylesheet" type="text/css"></link>


Pronto! Seu fundo degradê para seu site está pronto! É só abrir o arquivo para conferir o resultado. Veja aqui o Resultado Final deste tutorial.

0 comentários: