Será o fim do photoshop?

Podemos dizer que o ano de 2008 foi o ano das aplicações online. Diversos aplicativos conforme conhecemos, migrou de desktop para usar o navegador. Editores de texto e planilhas foram os mais evidentes. Também tivemos uma série de softwares de edição de photos online, sendo estes os que eu mais duvidei que pudessem realmente fazer frente aos softwares desktop que temos por aí.

O principal motivo pelo descredito é que você teria que enviar as imagens para o servidor, editar, e então fazer o download delas. Isto torna tudo muito pesado e trabalhoso.

Hoje, lendo o blog do Pixlr, descobri que, em 2 de dezembro de 2008, já havia solução para isto. Aqueles que usassem o plugin do flash 10, não precisariam mais fazer upload <-> Download das imagens. Editaria elas ali, no pc mesmo!

Resolvi testar. Entrei no editor através do link: http://www.pixlr.com/editor/
Carregou rapidamente. Apesar de ser uma aplicação online, carregou tão rapido (senão mais rapido) do que o photoshop carregaria nesta máquina. Abri a imagem, e foi instantanea. Fiz algumas modificações básicas, e então salvei.

O programa é excelente, e nos menus você ainda pode trocar o idioma para português. Obviamente não é tão completo quanto o photoshop, mas é um excelente custo benefício, afinal seu custo é zero. No blog, tem alguns tutoriais.

Além deste, existem outros aplicativos online de edição de imagem, veja uma lista:

Splashup

Phoenix

pixer.us

FotoFlexer

SUMO Paint

10 aplicações web úteis para designers

Existem diversas ferramentas online, gratuítas, que podem ajudar ao trabalho de um designer e webdesigner no seu dia a dia.

Fizemos uma seleção com dez destas ferramentas. Veja abaixo:

kuler Create

Kuler é uma aplicação web da adobe, que ajuda você a criar e compartilhar esquema de cores.

pixlr

pixlr é um excelente editor de imagens online, com uma aparência semelhante a do photoshop, recursos como layers, filtros e várias ferramentas. Ainda pode selecionar o idioma, para português do Brasil.

Wellstyled’s Color Scheme Generator

Wellstyled’s Color Scheme Generator é uma ferramenta web simples, para ajudar designers a comceber esquemas de cores. Tem uma interface muito intuitiva, e você terá acesso a url do esquema de cores selecionado.

FontStruct

FontStruct é uma ferramenta web para criar, editar e compartilhar fontes. Visite a galeria e veja várias fontes criadas por outros usuários, as quais você poderá utilizar.

Typetester

Typetester permite você testar e comparar tipografias. Isto tem uma variedade de fontes que incluem fontes web-safe, como Arial e verdana. Mas você também pode usar suas fontes pessoais.

TypeNavigator

TypeNavigator é uma ferramenta web desenvolvida para ajudar a identificar fontes, que você viu mas não sabe o nome.

Dummy Text Generator

O site Dummy Text Generator permite a você gerar texto aleatório. Acho que podemos dizer que é um gerador avançadado de “Lorem ipsum para web designers”.

BGPatterns

BGPatterns é um site que permite gerar patterns, para background de sites. A ferramenta é muito simples de usar, e consegue assim mesmo ser muito poderosa, permitindo a edição completa de todos os recursos ao gerar o pattern, tais como cor, tamanho, ângulo de inclinação, etc.

favicon.cc

Favicon.cc é uma ferramenta para desenhar favicons. Permite que você crie diretamente do zero, ou se preferir pode fazer o upload de uma imagem, para que seja transformada em favicon.

templatr

templatr é uma aplicação web para criar templates (layouts) de web sites. Aparentemente, cria templates para o wordpress. É uma ferramenta muito simples de utilizar, e pode ser útil para desenvolver a parte estrutural de um layout.

Compactando o seu CSS com PHP

Compactar o arquivo CSS é uma das técnicas utilizadas para acelerar o processo de carregamento de um website. Algumas destas técnicas estão sendo amplamente utilizadas. Hoje, iremos descrever três maneiras diferente de compactar os arquivos CSS e enviar ao navegador do usuário, utilizando para isto o PHP.

O método de Paul Stamatiou

Este método já é utilizado por alguns desenvolvedores web a mais de um ano. Para fazer funcionar, você precisa primeiro renomear o seu arquivo NOME.css para NOME.css.php. (onde NOME é o nome do seu arquivo).

Então faça a modificação no HTML, utilizando o novo nome.

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Após alterar o arquivo HTML, renomeie o css conforme informado, e então abra o arquivo para edição. Insira a seguinte linha de código no ínicio do arquivo:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Então, adicione a próxima linha no final do arquivo. Salve, e feche o arquivo.

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Fim. Este método é bastante útil e eficiente.
Fonte: http://paulstamatiou.com/2007/03/18/how-to-optimize-your-css-even-more

O método Perishable Press

Este método é bem semelhante ao método descrito por Paul Stamatiou. Basicamente, você também precisa renomear seu arquivo .css para .css.php (ou .php somente), alterar a chamada a este arquivo no html para o novo nome, e então adicionar o seguinte bloco de código no início do seu arquivo CSS:

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Em seguida salve o arquivo e feche-o. Com este método, você não precisa alterar o final do arquivo. Basicamente, esta é a grande diferença sobre o método anterior apresentado.

Fonte: http://perishablepress.com/press/2006/10/23/compressed-css-compression/

O método Reinhold Weber

Este método foi escrito pelo desenvolvedor Alemão Reinhold Weber. Particulamente, prefiro este método aos outros. Explicaremos por que mais abaixo. Por hora, vamos ao método.

Primeiramente, crie um arquivo .php, e insira o código abaixo (e coloque todos os seus CSS de include no código):

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');
  ob_end_flush();
?>

Por que eu prefiro este método? Simples, com este método não é necessário renomear o arquivo .css para .php. Além do mais, este método comprime todos os arquivos CSS utilizados no site de uma única vez, e envia para o computador do usuário através de uma única requisição, o que acelera muito o processo para sites que tem multiplos css (como o exemplo acima).

fonte: http://reinholdweber.com/?p=37

Workshop Incremente Suas Logomarcas

Oi pessoas, esse post tem o objetivo de mostrar algumas técnicas usadas no artigo “Incremente suas logomarcas” e abrir um leque de opções para você poder fazer pequenos efeitos porém muito úteis no dia-a-dia do web designer.

Vamos lá, espero que vocês gostem do artigo.

1º - Ambiente 3D

Um ambiente bem feito é um grande passo para o sucesso de uma apresentação, seja de uma logomarca, de um produto ou seja lá o que se queira apresentar.

No caso da logo do artigo supracitado, fizemos um ambiente bem simples mas com aparência tridimensional.

Exemplo 1

Este exemplo usa a mesma técnica apresentada no post “Incremente suas logomarcas“.

1 - Um fundo degradê de vermelhos (R: 255, G: 0, B: 0) para (R: 155, G: 0, B: 0)

2 - Alteração da curva (Cntrl + M) na parte inferior

O resto da imagem foi apenas aplicação de sombras, brilhos e caustics que nós iremos ver em futuros artigos aqui no FazendoSites.com.br.

A seta, mais ou menos 3D, também é uma técnica que veremos logo, logo por aqui.

2º - Formas com simulação 3D

Essa técnica é bem interessante, útil e pode ser usada em várias ocasiões, não só na estilização de logomarcas como também em botões e marcadores.

Na imagem acima, usei exatamente a mesma técnica em todas as formas

1 - Uma forma com degradê

2 - Inner Shadow ajustado como fizemos no post “Incremente suas logomarcas”

3 - Uma forma complementar na cor branca com trasparência, no caso dos círculos pode ser usado degradê do branco para transparente e no caso de outas formas pode variar.

4 - Para completar, um reflexo cai bem.

Talvez você tenha achado que eu iria mostrar centenas de configurações e técnicas arrojadas, fórmulas mágicas e filtros avançadíssimos para se obter resultados profissionais. Nada disso, o que tenho observado a cada dia é que a simplicidade é o segredo de um design profissional de sucesso.

Tente, construa, desconstrua e veja como obter efeitos maravilhosos é mais fácil e simples do que se imagina.

Até a próxima.

Incremente suas logomarcas

Podemos observar, principalmente na web, que muitas empresas tem usado efeitos 3D em na apresentação de suas logomarcas dando um toque tecnológico bem interessante, limpo e sem muita frescura.

Neste tutorial eu utilizei o Adobe Photoshop CS3, mas se você estiver utilizando outra versão, creio que não vai ter dificuldade para acompanhar.

Vamos lá, acompanhe o passo-a-passo:

Passo 1 - Crie um novo arquivo

Neste caso, um arquivo com 590 x 270 pixels.

Vamos reproduzir a logomarca da empresa Claro e usar efeitos bem interessantes e profissionais. No resultado final, qualquer semelhança não é mera coincidência.

Passo 2 - Crie um Degradê Radial na camada

2.1 - Defina a cor do primeiro plano como #ff0000 (R: 255, G: 0, B: 0)

2.2 - Defina a cor do segundo plano como #9b0000 (R: 155, G: 0, B: 0)

2.3 - Selecione a ferramenta Gradient Tool , escolha na barra superior a opção Radial .

2.4 - Arraste o cursor pela área do arquivo a partir do topo à esquerda até a parte inferior à direita:

Agora você deve estar vendo algo parecido com a imagem abaixo:

Passo 3 - Criar a base para a logomarca

Selecione a ferramenta Retangular Marquee e selecione uma área de 590px de largura por 97px de altura na parte inferior do arquivo para simularmos a base para a logomarca.

Agora escureça um pouco essa área clicando em Image->Adjustments->Curves (ou Cntrl + M).

Passo 4 - Criando a Logomarca

Agora que já preparamos a área para a logomarca, vamos iniciar a criação da própria:

Selecione  a ferramenta Elliptical Marquee (M)  e crie um círculo perfeito segurando a tecla Shift.

Agora crie um nova camada (Cntrl + Shift + N) e preencha o círculo com o mesmo degradê que usamos na base.

Depois de preenchido, pressione Cntrl + D para retirar a seleção do círculo e clique em no ícone fx, localizado na parte inferior da paleta Layers (Camadas)  e selecione a opção Inner Shadow

Na tela de configuração do Inner Shadow (Sombra Interna), coloque os seguintes parâmetros:

Angle: -89
Distance: 6
Choke: 9
Size: 16

Agora selecione novamente a ferramenta Elliptical Marquee (M)  e crie um novo círculo menor dentro do círculo maior como mostra a imagem a seguir.

Crie uma nova camada (Cntrl + Shift + N) e preecha o interior do círculo menor de cima para baixo com um degradê da cor branca para transparente como mostra a figura acima tendo o resultado abaixo:

Tecle Cntrl + T para transformar a seleção e achate um pouco o círculo agora preenchido com o degradê.

O resultado agora será o seguinte:

Para dar um “tchan” interessante nesse ponto da logomarca, faça o seguinte:

1 - Crie outro círculo interno com a ferramenta Elliptical Marquee (M) ;

2 - Crie uma nova camada (Cntrl + Shift + N) e preencha novamente com aquele degradê de branco para transparente que usamos anteriormente;

3 - Tecle Cntrl + T para transformar a seleção e achate um pouco como da última vez;

4 - Acesse o menu Filter->Blur->Gaussian Blur e coloque como mostra a imagem abaixo:

5 - Altere a transparência da camada para 60% e você terá o seguinte resultado:

Estamos quase lá! Vamos passar para o 5º e último passo.

Passo 5 - Finalizando a Logomarca colocando o texto

Agora vamos fazer o último passo do nosso tutorial. Vamos escrever o texto da logomarca.

Selecione a ferramenta Horizontal Type (T) e selecione a fonte Arial Black, tamanho 44 e cor branca (eu utilizei Arial Black com itálico, se eu tivesse criado essa logo, teria usado. )

Faça de forma a ficar assim:

Agora vamos fazes os retângulos que completam a logo.

Faça um retângulo fino logo após a letra “O” com mais ou menos uns 28 x 6 px, crie uma nova camada (Cntrl + Shift + N) e preencha com a cor branca, duplique os retangulos (Cntrl + J) duas vezes e posicione um a 45 e outro a 90º no topo da letra “O”.

Pronto!

Agora pra arrematar você pode usar várias outras técnicas para melhorar o brilho, realçar as cores e etc..

Eu fiz apenas o seguinte:

Até a próxima!

Menu em abas centralizado sem CSS Hacks

Exemplo de um belo menu em abas, cross-browser e sem CSS Hacks

Muitos webdesigners querem colocar menus centralizados em seu site. Isso é fato. Mas para o principiante em CSS esta não é uma tarefa das mais fáceis. Se você fizer uma busca online você encontrará vários métodos, porém, a grande maioria depende de remendos no CSS, códigos enormes em Javascript ou regras não padronizadas do CSS e que não são suportados por todos os navegadores (display:inline-block; é um exemplo).

Neste artigo vou mostrar um método para conseguir abas centralizadas sem usar nenhum remendo no CSS e que funcionem em todos os navegadores comuns da web. Vamos começar com um exemplo simples para ver como funciona.

Menu básico centralizado

Logo abaixo, você deve estar vendo quatro abas horizontalmente centralizadas. A segunda aba é ajustada como o active. Experimente alterar o tamanho do texto da página para ver como os menus permanecem sempre centrados e clicáveis.

HTML do menu centralizado

O HTML usado para menus centralizados é estruturado semanticamente e muito básico. A estrutura é simplesmente uma lista de links em uma única div.

<div id="centeredmenu">
<ul>
	<li><a href="#">Tab one</a></li>
	<li><a class="active" href="#">Tab two</a></li>
	<li><a href="#">Tab three</a></li>
	<li><a href="#">Tab four</a></li>
</ul>
</div>

CSS do Menu centralizado

A seguir, o CSS usado para centralizar as abas na página. Veja abaixo uma breve explicação de como isso funciona.

#centeredmenu {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#centeredmenu ul li a:hover {
   background:#369;
   color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

Como o método de centralização funciona

O truque do método é como os elementos flutuantes são posicionados relativamente dentro uns dos outros. Para explicar isto deixe-me descrever corretamente como um elemento pode mudar suas dimensões quando setamos a propriedade float:left/right.

Div sem a propriedade float

A figura acima mostra uma div (elemento de bloco) que não tem a propriedade float:left/right. Observe como ela estica a 100% da largura do elemento que o comporta, neste caso, a própria página.

Div com a propriedade float:left

Se setarmos a propriedade float da div para left (esquerda), ela encolherá automaticamente e ficará com a largura do conteúdo de dentro dela. Este encolhimento é a chave do processo de centralização, ele nos ajuda a mover nosso menu a medida correta para o centro.

Menu alinhado esquerdo padrão

Vamos usar um menu tradicional alinhado à esquerda e mover as abas para o centro passo a passo. Colori cada elemento com uma cor diferente, assim fica fácil ver como todos ficam aninhados.

Anote por favor o seguinte.

* O DIV ‘centeredmenu’ (caixa azul) tem a propriedade float:left, mas setando uma largura de 100% ela permanece ocupando toda a largura da página.

* O elemento UL (caixa cor-de-rosa) está dentro da DIV ‘centeredmenu’ e tem a propriedade float:left. Isto significa que a UL terá a largura de seu conteúdo.

* Todos os elementos LI (caixas verdes) estão dentro da UL e de cada um tem a propriedade float:left. Isto faz com que eles tenha a largura dos links que estão dentro deles e ficam enfileirados horizontalmente.

* Dentro de cada link (caixa alaranjada) está o título de cada aba; Aba 1, aba 2, etc.

Posicionando a UL

Em seguida vamos posicionar o elemento do UL à direita em 50% usando a propriedade position:relative;. Ao mover um elemento percentualmente para o lado é importante observar que o moverá uma porcentagem do elemento que o comporta e não de sua própria largura. Sendo assim, neste exemplo, o elemento UL será movido para a direita a 50% da largura da DIV ‘centeredmenu’ - isto representa a metade do espaço disponível. O resultado final é nosso menu partindo do meio para ao centro e estourando o espaço disponível, mas não se preocupe com isso, no próximo passo isso será corrigido.

O último passo é deslocar todos os elementos LI de volta à esquerda em 50%. Isto é, a 50% da largura do elemento UL (seu elemento de contenção) e pôr as abas exatamente no centro.

Notas importantes

Este método de centralizar menus é sólido como rocha, mas há algumas coisas que você deve estar ciente.

* Pelo fato de que o elemento UL estoura o espaço demarcado, seu navegador poderá mostrar as barras laterais verticais a menos que você inclua um overflow:hidden; na regra ‘centeredmenu’ no CSS.

* Pelo fato de que o elemento UL não fica alinhado com as abas, você não pode deixá-lo visível. Deixe o elemento UL sem uma cor do fundo e sem borda, assim ele será completamente invisível. Faça toda a estilização de seu menu usando os elementas LI e A (link).

* Se você precisar diferenciar a primeira e a última aba, adicione uma classe ao primeiro e ao último elemento LI, assim eles podem ser estilizados individualmente.

Características principais

É isso aí, aqui estão as características principais dos menus centralizados com CSS puro.

Nenhum CSS Hack

O CSS usado para este menu centraliazdo é 100% válido e livre de hacks. Para superar o erro de box model do Internet Explorer, nenhum espaçamento horizontal (padding) ou as margens (margins) são usados. Em lugar disso, este projeto usa o posicionamento relativo inteligente.

XHTML Strict Válido

O HTML neste exemplo é validado com XHTML 1.0 strict.

Alteração de tamanho de texto

Este menu em abas é inteiramente compatível com a alteração do tamanho de texto nas configurações do navegador. O alteração de tamanho do texto é importante para a acessibilidade da web. Portadores de deficiência visão podem colocar uma fonte de texto maior para facilitar a leitura.

Nenhum Javascript

Javascript não é exigido.

Totalmente Cross-Browser

Este exemplo foi testado nos seguintes navegadores.

* iPhone & iPod Touch

* Safari Mac

* Safari

* Firefox

* Ópera Windows

* Firefox 1.5, & 2; 3

* Safari

* Ópera

* Internet Explorer 5.5, & 6; 7

Como manter o rodapé no final da página

Quando uma página HTML tem um conteúdo muito pequeno, o rodapé pode não chegar ao final da página, ficando no meio do caminho (muitas vezes no meio da página), deixando um espaço vazio até o final. A aparência do site fica horrível nestes casos, principalmente em monitores grandes com altas resoluções. Web Designers frequentemente perguntam em listas de discussões, qual é o caminho para colocar o rodapé fixo no final da página. Esta resposta não é tão obvia, mas nós iremos demostrar uma inteligente e elegante solução.

Quando paramos de usar tabelas e começamos a fazer os layouts usando CSS, tentamos colocar o rodapé no final da página, mas simplesmente não funcionava como esperavamos. Criamos várias maneiras de fazer isto, inumeras vezes usando gambiarras em javascript, outras usando técnicas de css hacks, mas nenhuma destas técnicas foram tão boas e eficientes quanto esta. Este método utiliza CSS 100% valido , e trabalha em qualquer navegador moderno. Também exibe o conteúdo de maneira inteligente em navegadores antigos, o que torna esta a solução segura para usar em qualquer website.

Veja o exemplo online: Veja a demonstração com o rodapé no final da página

Principais recursos

• Trabalha em qualquer navegador moderdo

  Navegadores testados: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera e Netscape 8

• Compatível com navegadores antigos (gracefull degradation)

  Navegadores antigos irão colocar o rodapé exatamente abaixo do conteúdo. Nós não podemos fazer muito para pessoas que usam navegadores ultrapassados demais, o máximo que conseguimos fazer é possibilitar que consigam acessar o conteúdo.

• O rodapé acompanha o texto em sites com conteúdo longos

  Em sites com bastante conteúdo, o rodapé ficará fora da área imediatamente visível da janela, assim como parte do conteúdo, uma vez que, obviamente, o rodapé estará abaixo deste conteúdo, fechando o site. Este é o comportamento normal e desejado.

• CSS 100% válido. Sem uso de hacks

  O CSS utilizado é 100% válido e não contém hacks.

• Sem JavaScript

  Não é necessário Javascript. Esta técnica usa puramente CSS.

• Compatível com iPhone

  Esta técnica funciona perfeitamente no IPhone e IPod Touch.

• Download Grátis

  Salve o código da nossa página de demonstração e utilize como você desejar.

Existe somente uma limitação

Você deve definir a altura do rodapé para algum valor diferente de auto. Escolha o valor que quiser, só é importante que este valor esteja especificado em pixerls ou ems dentro do seu CSS. Como visto, isto não é uma grande limitação, mas este método é essencial para que o recurso possa trabalhar corretamente.

Se você tem bastante texto no seu rodapé, então é uma boa ideia definir um pouco mais de tamanho para fazer o seu rodapé maior que o texto. Iso é importante pois algumas pessoas usam o texto um pouco maior que o padrão dos navegadores. Outra maneira de resolver este problema, é definir a altura do rodapé em polegadas (em), isto irá garantir que o rodapé cresça juntamente com o texto. Se você somente tem imagens no rodapé, então não é algo que precise se preocupar. Apenas informe o valor para o seu rodapé para um valor definido em pixel, e irá funcionar perfeitamente.

Como funciona?

Não é nada complicado. Vamos separar em duas partes. O HTML e o CSS.

O HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

Precisamos de somente quatro divs para este trabalho. A primeira é a div container, que engloba todo o restante. Dentro dela, teremos três divs: o cabeçalho, o body (corpo - conteúdo central do site), e o rodapé. Isto é tudo no HTML. A mágica acontece no CSS.

O CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#cabecalho {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* altura do rodape */
}
#rodape{
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* altura do rodape */
   background:#6cf;
}

E mais uma regra CSS simples, para o IE 6 5.5:

#container {
   height:100%;
}

As tags html e body

As tags html e body devem ser definidas para height:100%; isto irá permitir que definirmos um percentual para a altura na nossa div container, posteriomente. Também removi a margin e o padding da tag body, para que não fique espaços ao redor da página.

A div container

A div container tem um min-height:100%; com isto, definimos que a altura tenha pelo menos toda a tela, mesmo que quase não tenha nenhum conteúdo. Muitos navegadores antigos não suportam a propriedade min-height, então poderiamos usar técnicas com javascript e outros métodos, mas não vamos discutir isto neste artigo. A div container é setada para position:relavite, para permitir que setamos elementos com posicionamento dentro dela.

A div cabecalho

Não tem nada especial aqui. Faça esta div com cores e tamanhos que você desejar.

A div body

A div body é quase normal também. A única coisa importante é que devemos ter um bottom padding que é igual (ou ligeiramente maior) que a altura do rodapé. Você pode também usar um bottom border se você preferir, porém usar margin não irá funcionar.

A div rodapé

O rodapé tem sua altura setada em pixels (ou ems). A div é posicionada com bottom:0;para movê-la para o final da div container. Quando existir pouco conteúdo na página, o container div irá ter exatamente a altura da area de visão do navegador (por isto usamos min-height:100%;) e o rodapé irá grudar no final da janela. Quando o conteúdo for maior que a área de visão do navegador, o rodapé então ficará abaixo do conteúdo. Também definimos a largura do rodapé com width:100%; para que o rodapé utilize toda a largura da nossa div container.

O CSS para IE 6 e 5.5

As versões antigas do Internet Explorer não entendem a propriedade min-height, mas para nossa sorte o comportamento padrão da propriedade height destes navegadores, exibe exatamente o resultado que desejamos. Simplesmente usamos uma regra condicional para o IE no CSS. Veja o código da demonstração para verificar como ficará.

Neste artigo apresentamos um caminho simples e eficiente de ter o rodapé do seu site no final da área visível do navegador, quando o conteúdo for pequeno. Este artigo é uma adaptação livre do original em inglês, criado por Mattew James Taylor, que pode ser visualizado em: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Menus Drop-Down, estilo horizontal

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a>
<ul>
	<li><a href="#">History</a></li>
	<li><a href="#">Team</a></li>
	<li><a href="#">Offices</a></li>
</ul>
</li>
	<li><a href="#">Services</a>
<ul>
	<li><a href="#">Web Design</a></li>
	<li><a href="#">Internet Marketing</a></li>
	<li><a href="#">Hosting</a></li>
	<li><a href="#">Domain Names</a></li>
	<li><a href="#">Broadband</a></li>
</ul>
</li>
	<li><a href="#">Contact Us</a>
<ul>
	<li><a href="#">United Kingdom</a></li>
	<li><a href="#">France</a></li>
	<li><a href="#">USA</a></li>
	<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

li:hover ul { display: block; }

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace<span class="linewrap">»</span>
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

li:hover ul, li.over ul {
	display: block; }

<ul id="nav">

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Layout três colunas com igual altura, sem utilizar hacks

Criar um layout com três colunas de mesmo tamanho (que se acompanham), utilzando CSS não é uma tarefa das mais fáceis. Este tutorial exibe o problema que ocorre com layouts de multiplas colunas, e então exibe uma solução simples, que irá funcionar muito bem em todos os navegadores com suporte a CSS.

O método exibido aqui não faz uso de javascript, hacks ou imagens. Isto faz com que ele possa ser utilizado em praticamente qualquer tipo de website desejado, por mais restrito que seja a necessidade.

O problema com colunas de mesma altura

No exemplo acima nós temos três colunas, cada uma com um diferente conteúdo. Você irá notar que o problema ocorre, por que a cor do fundo acompanha o conteúdo (primeira figura). Isto impede que as cores de fundo, de todas as colunas fiquem alinhadas, conforme desejamos (segunda figura).

Este é o problema que nós queremos resolver. Como fazer todas as colunas terem a mesma altura? Ou ainda mais especificamente: Como fazer para todas as colunas terem a mesma altura da coluna mais alta? Isto é difícil de fazer, pois em situações de conteúdo dinâmico, nunca saberemos previamente qual é a coluna mais alta, e qual será sua altura. Nós não podemos simplesmente informar um valor bem alto a todas as colunas, por que isto deixará o layout com um espaço vazio enorme no final das colunas se elas tiverem pouco conteúdo, e se elas tivererm conteúdo maior que o valor estipulado, esta técnica então não irá funcionar. Além do mais, devemos lembrar que nada é fixo na web. Pessoas acessam com diferentes resoluções e de diferentes dispositivos, navegadores, sistemas operacionais, e configurações que irão afetar o tamanho da altura do nosso conteúdo.

Separando o conteúdo da coluna da sua cor de fundo

O primeiro passo para resolver o problema das colunas com o mesmo tamanho é separar nosso quebra cabeças em pequenas peças, para que possamos resolver separadamente. O caminho para fazer isto é que iremos usar duas divs para cada coluna, no lugar de uma. Estas duas divs serão usadas, uma para o conteúdo e outra para a cor de fundo, em cada coluna. Esta separação nos dará um controle maior sobre estes elementos, de forma que poderemos manipular a todos de uma forma bem melhor. Com esta dica, você já deve conseguir enchergar as coisas um pouco mais claramente.

Uma div container com atributo float, irá sempre ter a altura do seu conteúdo

Este é o principio central por detrás do nosso método. O único caminho para fazer a altura da div igual a coluna mais alta é se esta div for um container para todas as divs de conteúdo. Explicando melhor: Colocando as colunas dentro de um container, nós iremos fazer que este container tenha a mesma altura da coluna mais alto. Esta é uma estrutura muito útil.

HTML da estrutura de 3 colunas

No exemplo acima, o conteúdo das 3 colunas estão dentro de um div container.

<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>

Css da estrutura de 3 colunas

E aqui o CSS que força o container div para usar a altura da coluna mais alta.

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

Para esta estrutura funcionar corretamente em todos os navegadores, o container div deverá usar o atributo float (esquerda ou direita) e cada coluna de conteúdo também deverá usar float, caso contrário não irá funcionar muito bem. Este processo de usar float com as divs faz com que elas se alinhem horizontalmente através da página. Flotoar o container faz com que ele tenha a altura exata do seu conteúdo, que no caso é a altura da div mais alta.

Adicionando containers aninhados

O próximo passo em nosso tutorial é adicionar containers que ficarão aninhados, um dentro do outro. Nós precisamos ter tantos containers quanto colunas. No nosso caso, 3 colunas, usaremos então 3 containers. Estas três containers serão usados para a cor de fundo de cada coluna. Note que iremos remover a cor de fundo das colunas originais, e iremos adicioná-las aos containers.

HTML da estrutura de 3 colunas

Os dois extra containers foram adicionados ao nosso html.

<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>

CSS da estrutura de 3 colunas

Todos os elementos estão usando float, para a esquerda e os containers tem uma largura de 100% para que eles utilizem todo o tamanho da página. A cor de fundo foi removida das colunas, e então adicionada aos containers.

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

Movendo os containers usanto postion relative

Usando posicionamento relativo nós agora movemos os containers para seu novo local. Quando cada container é movido, outro container fica visível. Com isto podemos mover cada camada para seu local, para podermos criar o layout com 3 colunas de mesma altura. O container2 div é movido 30% para a esquerda para revelar o verde do container 1. Este movemos 40% para a esquerda, para exibir o amarelo da coluna entral e ao mesmo tempo a sessão vermelha que ainda está visível na coluna da esquerda.

O CSS com o posicionamento relativo

Aqui está o CSS já utilizando o posicionamento relativo.

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

Movendo o conteúdo de volta para o seu lugar

A próxima coisa a fazer é mover cada conteúdo de cada coluna de volta a página, para que este fique alinhado a sua cor de fundo. Novamente, isto é feito de maneira simples, utilizando posicionamento relativo.

E então, finalmente nós adicionamos um overflow:hidden no container 3.

O CSS com o posicionamento relativo

Abaixo o CSS com o posicionamento relativo e com a regra de overflow. Observe que a regra position:relative, no container 3, é para resolver um bug do internet explorer que impediria o overflow:hidden de funcionar.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#col2 {
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#col3 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

Adicionando padding as colunas

A última coisa a fazer é adicionar padding para as colunas para que o texto não grude na borda de cada coluna. Se nós adicionarmos um CSS padding para as colunas, isto poderá funcionar em alguns navegadores, e em outrod não. Internet Explorere entende errado o box model, e isto calcula a larguda de um elemento com padding de maneira diferente. Um box com 200 pixels de largunra e 20 pixels de pading irá ter um total de 200 pixels no internet explorer, porém em todos os outros navegadores o total será 240 pixels. Padding, deveria ser adicionado para a largura de um elemento, e não subtraido dele. MALDITA MICROSOFT!

Mas não se preocupe… nõs podemos resolver este problema utilizando um caminho diferente, que não irá utilizar regras padding no css. No lugar disto, faremos nossas colunas menores (a coluna irá ser menor em ambos os lados) e então iremos movê-las na direção correta utilizando posicionamento relativo. Em nosso exemplo, iremos usar 2% de padding (ou pseudo-padding), então a coluna que tem 30% irá ser reduzida a 26%. A coluna com 40% irá se reduzir a 36%. Quando movermos as colunas de volta para o seu lugar usando posicionamento relativo nós precisaremos lembrar que as colunas agora são menores, e que estão todas a esquerda. Precisamos movê-las agora para o lugar desejado.

O CSS Completo e definitivo

Para manter o layout em pequenos tamanhos de largura, eu também adicionei um overflow:hidden para cada coluna. Isto irá impedir a coluna de interferir com o resto do layout. Novamente, isto somente é um problema com o internet explorer, todos os outros navegadores mantem o layout correto sem precisar de utilizar este atributo.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Bem, isto é tudo. Eu espero que você possa ter achado útil este artigo. Brinque um pouco com este css, e veja como ele trabalha por você mesmo. Você pode ter mais colunas, lembrando sempre de usar o mesmo número de colunas e containers.

Este artigo é uma versão em português de:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks