Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

O MENU CONFETTI

O menu colorido que vê por baixo é simplesmente um elemento DIV com alguns elementos P por dentro. O efeito visual é devido ao facto de que cada elemento P é posicionado individualmente e tem o seu próprio tipo de letra e cor. Ele funciona melhor com textos curtos, porque o efeito visual é baseado na sobreposição, mas se o texto é demasiado longo, ele sobrepõe-se tanto que se torna difícil de ler.

A folha de linguagem de estilo permite um menu de até 10 elementos, o exemplo acima usa 8. Aqui está o código/fonte HTML do exemplo acima:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>

<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>

<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Veja o "mapa" classe sobre o elemento DIV, o que o torna um recipiente para o menu, e os atributos ID no Ps. Os elementos P devem ter cada um, um ID (diferente), denominados p1, p2, ... ou p10. Não é necessário usar os IDs por ordem (como o exemplo mostra). Pode usar a folha de linguagem de estilo, copiando-a para a sua própria folha de linguagem de estilo, ou usar @importação ou um elemento LINK para importar map.css directamente a partir do site do W3C. Qualquer um

@import "http://www.w3.org/Style/map.css";

ou

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Explicação da folha de linguagem de estilo

Aqui está a forma como a folha de linguagem de estilo funciona. A folha de linguagem de estilo começa por definir um elemento DIV com o "mapa" classe. Ela cria um espaço grande de 190px onde os conteúdo dos elementos P irão ser colocados. A cada um dos elementos com IDs, p1 até p10, é atribuida uma cor e um tipo de letra e cada elemento é posicionado no interior do espaço criado pelo DIV por meio de uma "margem" própria: a margem negativa superior move o elemento para cima no espaço DIV e a margem positiva inferior garante que o próximo elemento começa novamente no fundo do DIV.

(A fraqueza da folha de linguagem de estilo é que ele faz tudo em px. Pode querer alterá-la para usar percentagens, mas se tiver um navegador que implemente suficientemente bem o CSS.)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Claro, que é livre para alterar a folha de linguagem de estilo para experimentar tipos de letra, cores e posições diferentes ou para criar regras extras de estilo para mais de 10 elementos. Também veja as margens esquerda e direita do DIV: elas são feitas na negativa, para que o menu seja mais amplo do que o texto que o rodeia, mas na tua página a margem pode não ser grande o suficiente para isso e por isso pode ter que remover estas regras.

Se experimentar o estilo, pode perceber que ele não funciona muito bem no Netscape 4. Isso é culpa do Netscape 4,claro. No entanto, map-ns.css é uma folha de linguagem de estilo que é semelhante e que parece funcionar bem nesse navegador. O seguinte truque no inicio do seu documento HTML irá permitir que a versão para o Netscape 4 e para versões acima resultem em melhores implementações de CSS a co-existirem:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Corrigir as implementações CSS irá ler ambas as folhas de linguagem de estilo, mas as regras na segunda sobrepõem-se à primeira, além do pouco trabalho desnecessário, não há nenhuma mudança. O Netscape 4, no entanto, não irá carregar a segunda folha de linguagem de estilo por causa do atributo "media", que não compreende.

Além disso, pode perguntar-se o porquê de os elementos estarem posicionados por meio de margens (negativas), ao passo de que este parece ser um excelente candidato ao posicionamento absoluto das propriedades. Na verdade, pode fazer o mesmo com a "posição" e a "esquerda" e "direita". A razão destas folhas de estilo usarem margens é que desta forma funcionam em browsers que só implementam CSS1.