Mas não posso usar nenhuma imagem. Nada, zero, nothing!

Claro podia subir a parada e dizer que tem que ser compatível com todos os navegadores! Mas não, vamos deixar esse pequeno detalhe de lado, porque iria ser um pouco mais difícil.

Neste tutorial vamos usar CSS3, por isso qualquer navegador que suporte CSS3 deve funcionar como deve ser. Eu testei esta solução em:

• Firefox
• Google Chrome

Agora que já sabemos o que queremos fazer, vamos pôr mãos à obra.

HTML

Vamos começar pelo o nosso HTML.

<div id="Navegacao">
  <ul>
    <li><a href="#undefined" title="Página Inicial">Página Inicial</a></li>
    <li><a href="#undefined" title="Sobre">Sobre</a></li>
    <li><a href="#undefined" title="Contactos">Contactos</a></li>
    <li><a href="#undefined" title="Negócios" class="selecionado">Negócios</a></li>
    <li><a href="#undefined" title="Suporte">Suporte</a></li>
    <li><a href="#undefined" title="Link Muito Grandeeeeeeeeeeeeeeee">Link Muito Grandeeeeee</a></li>
  </ul>
  <div id="Caixa"></div>
</div>

Nada de complicado, como podemos ver é um markup bastante simples e correcto.

Temos um div com o IDNavegacao vai servir de contentor para a barra de navegação.

Temos uma lista com links, e por fim temos um div com o IDCaixa que vai servir para criar uns quantos efeitos que vamos ver mais tarde.

Se repararem no design do Edumicro podem ver que o link que esta seleccionado tem uma cor de fundo diferente, para tentarmos criar o mesmo efeito vamos usar o Caixa.

Mas antes de começarmos a pensar em funcionalidade, vamos tentar criar esta barra de navegaçãoa mais parecida possível ao design do Edumicro, para tal começamos com CSS.

Explicar um pouco o CSS

No design em Photoshop podemos ver que certos detalhes são um pouco mais difíceis em CSS, mas mesmo assim possíveis, mesmo sem ter o mesmo resultado final podemos quase imitar o original.

Cantos redondos, com o CSS3 já é possível conseguir sem ter que recorrer a grandes truques ou a imagens para tal usamos border-radius.

Gradientes também já é possível, apesar de ainda ser necessário usar uns quantos truques, e o resultado final não ser bem igual para todos os navegadores.

Especialmente porque temos que criar o efeito em três formas diferentes para suportar cada navegador ( FF / Motor Webkit / IE).

Para o firefox usamos:

  background: -moz-linear-gradient(top, #2E6FC0 0%, #4491D6 50%, #3A86CA 51%, #2D6FBE 100%); 

O top é usado para indicar onde queremos começar, o ponto de partida do nosso gradiente.

O resto usamos para indicar as cores dos gradientes, as posições que começam e acabam.

Para mais informações visitar Mozilla.

Para navegadores baseados no motor WebKit (Safari por exemplo), usamos:

  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2E6FC0), color-stop(50%,#4491D6), color-stop(51%,#3A86CA), color-stop(100%,#2D6FBE)); 

O primeiro argumento é o tipo de gradiente e pode ser linear ou radial.

O segundo e o terceiro argumento é a posição, e por fim as cores onde começam e onde acabam.

Para mais informações visitar o WebKit.

Por fim temos a solução para o Internet Explorer, que mais uma vez não corresponde aos standards, mas para também não ser tão mauzinho, acho que o Internet Explorer já suporta gradientes desde a versão 5.5.

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E6FC0', endColorstr='#2D6FBE',GradientType=0 );

Como podemos ver o IE não suporta a possibilidade de controlarmos as posições onde queremos começar uma cor e acabar com outra cor.

Temos também o GradientType, que pode ser 0 para vertical e 1 para horizontal.

Para mais informações visitar o site da Microsoft.

Uma forma mais fácil de fazeres os gradientes é através do site Colorzilla.

Vamos então construir o CSS.

CSS

#Navegacao{
  border: 1px solid #004FAA;
  padding: 15px 30px 15px 30px;
  font-family: arial, serif;
  font-size: 18px;
  
  /* Cantos redondos */
  -moz-border-radius: 6px; 
  border-radius: 6px;
				
  /* A posicao e o z-index queremos que a nossa caixa esteja por baixo da barra de navegacao */
  position:absolute;
  z-index: 2;
				
  /* Gradiente */
  /* browsers antigos */
  background: #2E6FC0; 
  /* firefox */
  background: -moz-linear-gradient(top, #2E6FC0 0%, #4491D6 50%, #3A86CA 51%, #2D6FBE 100%); 
  /* webkit */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2E6FC0), color-stop(50%,#4491D6), color-stop(51%,#3A86CA), color-stop(100%,#2D6FBE)); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E6FC0', endColorstr='#2D6FBE',GradientType=0 ); /* ie */
				
}

#Navegacao ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
			
#Navegacao ul li{
  display: block;
  float:left;
  padding-right:20px;
}
			
#Navegacao a:link{
  text-decoration: none;
  color: #FFFFFF;	
}

#Navegacao a:visited{
  color: #FFFFFF;	
}
		
#Caixa{
  /* z-index para a caixa estar por baixo da navegacao */
  position: absolute;
  z-index:-1;
  border:1px solid #265FB1;
  background: #2E6FC0; /* browsers antigos */
  background: -moz-linear-gradient(top, #3374C5 0%, #7CB3E2 50%, #74ABDA 51%, #6396CF 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3374C5), color-stop(50%,#7CB3E2), color-stop(51%,#74ABDA), color-stop(100%,#6396CF));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3374C5', endColorstr='#7CB3E2',GradientType=0 ); /* ie */
  padding:20px 10px 20px 10px;
  /* Cantos redondos */
  -moz-border-radius: 3px; 
  border-radius: 3px;
}

Podemos notar que em termos de estilo a barra de navegação está completa, mas o efeito que foi dado na Caixa de momento não faz sentido.

Para tal vamos usar javascript com ajuda do jQuery, para criar uma animação. Basicamente queremos que a Caixa se mova conforme o rato do usuário.

Se o o usuário passar com o rato pelo o link "Negócios" então queremos que a nossa Caixa se mova até esse link.

Queremos também que a posição inicial da Caixa seja o link que tenha a referência à classe selecionado

Um pequeno aviso, o javascript que vou apresentar é bom já terem um pouco de conhecimento de jQuery.

Vamos então começar o nosso Javascript.

Javascript

$(document).ready(function() { // Documento esta pronto
  $("#Navegacao ul li").mouseenter(function(evento) { // O usuario passa com o rato nos nossos links
    // Cache
    var elemento = $(this);
    // Posicao e tamanho do elemento
    var Largura = $(elemento).width(); // Largura do li
    var PosicaoEsquerda = $(elemento).position().left - 10; // Posicao do li menos 10, pois estamos a adicionar no padding no CSS
    var PosicaoTop = $(elemento).position().top - 10; // Posicao do li menos 10, pois estamos a adicionar no padding no CSS 
    // Animacao
    $("#Caixa").stop().animate({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" }, "slow");
  });

  // Se o rato sair da barra de navegacao entao chamar a nossa funcao PosicaoSelecionado
  $("#Navegacao").mouseleave(function(evento) {
    PosicaoSelecionado(false);
  });

  // Para quando a pagina arranca pela a primeira vez ou o usuario tira o rato da nossa barra de navegacao
  function PosicaoSelecionado(PrimeiraVez) {
    // cache o elemento selecionado
    var Selecionado = $(".selecionado");
    //Mover para essa posicao
    var PosicaoEsquerda = $(Selecionado).position().left - 10;
    var PosicaoTop = $(Selecionado).position().top - 10;
    var Largura = $(Selecionado).width();

    // Se for a primeira vez que o script arranca então mudar logo para essa posição, senão usar uma animação
    if (PrimeiraVez == true) {
      $("#Caixa").css({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" });
    } else {
      $("#Caixa").stop().animate({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" }, "slow");
   }
  }

  // Quando a pagina arranca pela a primeira vez e queremos a nossa caixa no link correcto
  PosicaoSelecionado(true);

});

Conclusão

Estou contente com o resultado final, mas a verdade tem que ser dita e existe vários pormenores que não consegui igual ao pacote que o Eduardo publicou.

Os gradientes no Photoshop resultam melhor, e os detalhes que o Eduardo deu nas barras de navegação são difíceis de replicar na minha solução.

Porém foi um desafio interessante, fiquei a saber um pouco mais de gradientes em CSS3.

Para uma solução mais realista, acho que se misturarmos este tutorial com o pacote de barras de navegação, acho que é mesmo a melhor solução.

Espero que tenham gostado deste tutorial.

Mas seja em que tipo de design for uma das partes mais importantes é o texto, e todos os que trabalham na web à alguns anos sabem a dificuldade que é em usar fontes específicas na web.

Como todos sabemos a maneira mais fácil para garantir que todos os visitantes do nosso site vejam o texto correctamente é usando uma fonte segura, uma fonte que normalmente já está instalada no computador do visitante. Para tal as fontes mais seguras costumam ser o Arial, Verdana, Courier New, Comic Sans e mais algumas.

Mas sendo a fonte uma parte importante nos Websites começou a surgir várias soluções para tentar dar volta ao problema. Desde Javascript, a Flash, a PHP, existem soluções para todo o tipo. Mas nenhuma delas é simples de usar.

Na minha opinião todos os navegadores deveriam suportar a solução apresentada usando CSS, o que acredito que mais cedo ou mais tarde aconteça.

Existe o Image Replacement onde é uma aventura com CSS.

Temos também o cufon, penso eu que é uma das soluções mais usadas hoje em dia.

E para quem gosta de PHP temos o facelift.

Não vou falar de nenhuma dessas técnicas, porque mais ano menos ano acredito que não vá ser necessário e também porque não é o objectivo deste tutorial.

Neste momento vários navegadores já a suportam alguns dos novos métodos em CSS 3, e por já vai sendo possível fazer umas coisas engraçadas com fontes.

Como introduzir novas fontes

O método que usamos para introduzirmos fontes específicas no CSS e @font-face.

  @font-face {
    font-family: NOMEDAFONTE;
    src: url('ONDE SE ENCONTRA');
  }

Basicamente tens que colocar o nome da fonte, e a sua localização.

Mais simples acho que era difícil, agora claro o famoso Internet Explorer tinha que ter umas surpresas, mas uma delas e o factor de suportar (+/-) o @font-face desde 2004.

O problema é que só suporta fontes .otf (OpenType), mas para tal podes usar um conversor online de fontes .ttf (TrueType) para .otf.

Então como suportar quase todos os navegadores:

  @font-face {
    font-family: NOMEDAFONTE;
    src: url("ONDE/SE/ENCONTRA/FONTE/FICHEIROFONTE.eot");
    src: local("NOMEDAFONTE"), url("ONDE/SE/ENCONTRA/FONTE/FICHEIROFONTE.ttf") format("truetype");
  }

O local, diz ao navegador para tentar encontrar a fonte no seu sistema antes de fazer o download.

Mas o melhor...

O melhor é os novos serviços de fontes que começam a aparecer na web. Acabam por ser ainda mais fácil do que teres que te preocupar com os diferentes navegadores.

Neste tutorial vou usar o Google Fontes. Pode não ser a fonte super específica que querias, mas para quem está habituado a usar apenas um leque de 10 fontes, isto é uma maravilha.

Outro dos serviços que encontrei recentemente é o Awesome Fontstacks, mas ainda não usei, mas acredito que funcione da mesma forma que o Google fontes.

Para usar o Google fontes é super fácil, neste tutorial vamos usar o Yanone Kaffeesatz fonte, para tal basta adicionar o link para o CSS da Google.

  <head>
    <title>Fontes</title>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin' rel='stylesheet' type='text/css'>
  </head>

Simplesmente não tens que te preocupar com mais nada, o Google fontes é inteligente suficientemente para destingir o IE de outros navegadores e enviar a fonte correcta e de tratar da declaração correcta para o IE.

Vamos brincar

Antes demais vamos usar a fonte na sua forma mais simples:

Sem muito por dizer, apenas declaramos o tamanho e a fonte.

  font-family: 'Yanone Kaffeesatz', arial, serif;
  font-size:72px;

Vamos dizer que queremos uma sombra, todos nós gostamos do efeito sombra no texto quando estamos a criar um logótipo no Photoshop.

Já tem um pouco de mais piada. Para tal usamos o novo método text-shadow.

  font-family: 'Yanone Kaffeesatz', arial, serif;
  font-size:72px;
  /* COR | TOP PIXEIS EM RELAÇÃO A POSIÇÃO DA FONTE | ESQUERDA PIXEIS EM RELAÇÃO A POSIÇÃO DA FONTE | BLUR */
  text-shadow: #999999 5px 5px 3px;

Podemos também usar o efeito stroke.

  font-family: 'Yanone Kaffeesatz', arial, serif;
  font-size:72px;
  text-shadow: #999999 5px 5px 3px;
  -webkit-text-stroke-color: #000000;
  -webkit-text-stroke-width: 1.50px;

Ou criar uma tentativa de logótipo:

O HTML

 <div class="Caixa">
   <div class="PT">PT</div>
   <div class="Tutoriais">Tutoriais</div>
 </div>

O CSS

 .Caixa{
   font-family: 'Yanone Kaffeesatz', arial, serif;
   font-size:72px;
 }

 .PT{
   -webkit-transform: rotate(-90deg); /* Rodar 90 graus */
   -moz-transform: rotate(-90deg); /* Rodar 90 graus - FF */
   float:left;
   font-size:36px;
   padding:25px;
   background-color:#000000;
   color:#FFFFFF;
   margin-right:15px;
 }

 .Tutoriais{
   float:left;
   padding-top:25px;
 }

Conclusão

Neste tutorial espero que tenha conseguido explicar algumas das novas funcionalidades oferecidas pelo o CSS 3, sabendo perfeitamente que não vai ser um substituto nenhum ao Photoshop ou outros programas de tratamento de imagens.

Mesmo assim acho que tem a sua utilidade, especialmente quando queremos misturar design com conteúdo dinâmico de um web site.

O width e height é bastante usado em CSS, e traz bastantes vantagens na construção de layouts para a web.

Width

O width define a largura de um elemento em HTML, e pode tomar valores em pixeis, percentagens, inches, centímetros, milímetros, pontos, e picas.

• Inches: 1 inch é igual a 2.54 centímetros
• Pontos: é usado em CSS2 são iguais a 1/72 de uma inch
• Picas: 1 pica é igual a 12 pontos
• Milímetros
• Centímetros

Como usar o widht

Usando o width no elemento <p>.

  <p style="width: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Como podemos ver o texto fica contido, assim que chegar aos 200px o restante texto muda de linha.

Podemos também usar os valores em percentagens, sendo assim, o bloco irá ocupar uma percentagem disponível na janela do browser.

Por exemplo quando a janela do browser está á utilizar o ecrã inteiro ou está apenas a utilizar metade do ecrã é considerado sempre 100%.

Usando apenas uma parte:

Quando usamos os valores em percentagens, o elemento apenas usará a percentagem disponível no ecrã.

  <p style="width: 50%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Neste exemplo experimenta-mos modificar o tamanho da janela para veres que o elemento usa sempre 50% do espaço disponível.

Height

O height é usado da mesma forma que o width a diferença é que, específicas a altura do elemento.

  <p style="height: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque posuere dignissim. Donec mattis.

Como podemos ver, o próximo paragrafo só começa 200px depois.

O height também pode ser usado com percentagem e tem o mesmo efeito que o width.

Conclusão

Este tutorial serve apenas para ver como usar, e os resultados do width e height em CSS.

Neste exemplo apenas usamos o elemento <p> mas o width e o height pode ser usado praticamente em todos os elementos de HTML.

Usar valores em percentagem dá uma vantagem de criar layouts ‘elásticos’ que se modificam através do tamanho disponível do ecrã.

Usar valores fixos tem a vantagem de controlares melhor o layout e saberes sempre que tudo encaixa perfeitamente.

No inicio só existia HTML e com o simples objectivo de partilhar informação na Internet. Nunca houve a intenção de HTML servir para layout de web sites. Apesar de tudo, no dia em que no HTML surge <table> as coisas mudaram, pois foi possível designers começarem a criar layouts, senso assim o HTML usado para mais do que a simples partilha de informação.

A <table> ajudou muito para a evolução dos websites, por fim existia uma maneira de designers puderem colocar os elementos e imagens no sítio que desejavam.

Mesmo assim criar layouts usando <table> pode ser um processo doloroso, <table> dentro de <table> cria um código pesado e deselegante.

CSS, Cascading Style Sheets

O CSS veio ajudar o "coitadinho" do HTML, e com inúmeras vantagens.

Não só o factor <table> mas, simplesmente o processo todo de dividir código com layout. Com CSS é possível atribuir um ID ou uma classe a qualquer tag em HTML e simplesmente criar o layout ou estilo para essa mesma tag usando CSS.

Este artigo não tem como objectivo entrar em pormenores, mas sim ajudar a mudança e deixar de uma vez por todas <table>.

Exemplo <table> layout

Vamos começar com um simples exemplo de um design de três colunas usando tabelas.

<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="20%">Layout lado esquerdo</td>
<td width="60%">Layout centro</td>
<td width="20%">Layout lado direito</td>
</tr>
</tbody></table>

Simples não é? Pois bem, sem duvida que até é simples, mas será CSS ainda mais simples?

A maneira CSS

Então e como será em CSS? Mantendo o mesmo layout.

<div id="ladoesquerdo">Lado Esquerdo Layout</div>
<div id="ladocentro">Centro Layout</div>
<div id="ladodireito">Lado Direito Layout</div>

Hmm só três linhas? Parece simples, mas onde esta o truque?

Pois bem como disse no inicio CSS da vantagem de separar o código do layout e por isso existe umas linhas extras.

Existem três formas de inserir código CSS.

• Entre as tags <head>
• Directamente na tag que queremos modificar usando <style>
• Ou criar um link para um ficheiro css

Neste exemplo inserimos entre as tags <head>.

#ladoesquerdo {width:19%; float:left; border:1px solid "666;}
#ladocentro {width:60%; float:left; border:1px solid "666;}
#ladodireito {width:19%; float:left; border:1px solid "666;}

Então e as vantagens?

Pois bem, existe várias vantagens:

• O código está separado, qualquer mudança no layout pode ser feito só no CSS e não existe necessidade de mexer no HTML.
• Search Engines adoram CSS, pois normalmente a dimensão do ficheiro fica mais pequeno, e também porque a percentagem de conteúdo tem mais hipóteses de ser superior ao código.

Mas claro também existe as suas desvantagens:

• CSS ainda não tem o suporte total de todos os browsers no mercado.
• Por vezes o que se vê num browser (IE) e diferente noutros (Firefox / Opera).

Mas com os web standards estão cada vez mais a puxar os browsers para a mesma forma de mostrar os resultados, CSS parece ter um futuro garantido.

Mostra mais

Então e que tal mostrar um pouco mais das vantagens do CSS.

Ok, vamos então dar um espaço entre as caixas, mudar a cor de cada caixa, as cores das fontes, isto tudo sem tocar no código HTML.

#ladoesquerdo {width:15%; float:left; border:1px solid #666; background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:60%; float:left; border:1px solid #666; background-color:#3366FF;margin-right:4%;}
#ladodireito {width:15%; float:left; border:1px solid #666; background-color:#000099; color:#FFFFFF;}

Hmmm ok, mas ainda não me convenceram. Mudar cores, mudar os tamanhos, bastava apenas acrescentar mais uns elementos na tabela.

Então e mudar o layout sem mexer no código? Por exemplo, ter só um layout de duas colunas?

#ladoesquerdo {width:20%; height:100px; float:left; border:1px solid #666;
background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:75%; height:50px; float:right; border:1px solid #666; background-color:#3366FF; }
#ladodireito {width:75%; height:50px; float:right; border:1px solid #666; background-color:#000099; color:#FFFFFF;clear:right;}

Ok ok, ainda não tocamos no código, ok ok já estou a ver as vantagens.

Conclusão

Espero que este artigo tenha ajudado para perceber algumas das vantagens de CSS, e claro não quero passar a ideia errada, tabelas são um aspecto importante e deve ser usado, mas no sítio correcto como longos formulários, para mostrar extensos resultados de base de dados, mas como uma maneira de criar o layout geral para um web site espero ter demonstrado as vantagens de CSS.