Busca

Carregando...

domingo, 26 de outubro de 2008

Listas com bullets

Se preferir avance para:

  1. Os bullets pré-definidos
  2. Usando imagens como bullets

Todo dia vejo em blogs e sites "listas" assim:

Paulo:
Farinha
Açúcar

Adriana:

Café

Leite em pó

Beto:


Creme dental
Sabonete

Júnior:

Macarrão
Extrato de tomate

Se você quer fazer um post bonito e ainda facilitar a vida do leitor, faça assim:

Exemplo Código
  • Paulo:
    • Farinha
    • Açúcar
  • Adriana:
    • Café
    • Leite em pó
  • Beto:
    • Creme dental
    • Sabonete
  • Júnior:
    • Macarrão
    • Extrato de tomate
<ul><li>Paulo:
<ul><li>Farinha
<li>Açúcar</ul>
<li>Adriana:
<ul><li>Café
<li>Leite em pó</ul>
<li>Beto:
<ul><li>Creme dental
<li>Sabonete</ul>
<li>Júnior:
<ul><li>Macarrão
<li>Extrato de tomate</ul></ul>

Assim como ocorre com as listas numeradas, a diferença entre um post desmantelado e um post organizado são apenas duas tags: <ul> e <li>.

A tag <ul> abre a lista e a tag <li> abre um ítem da lista. A tag </li> ao final do ítem não é obrigatória, mas a tag </ul> ao final da lista sim.

1. Os bullets pré-definidos

No exemplo anterior usei lista dentro de lista. Observe que, quando muda o nível da lista, além da indentação (que é o que mantém a lista visivelmente mais clara), mudam os bullets, que são essas "bolinhas" que aparecem antes de cada ítem. Vamos ver o que ocorre se fizermos uma lista com mais níveis:

  • Izabel é mãe de:
    • Joverci, que é mãe de:
      • Maria José, que é mãe de:
        • Joceane, que é mãe de:
          • Ninguém
        • Rilbert
      • Cida, que é mãe de
        • Pedro
    • Antônio, que é pai de:
      • Adriana, que é mãe de:
        • Adriane
      • Andréa, que é mãe de:
        • Aline
        • Bruna
    • Helena, que é mãe de:
      • Helen Fernanda
      • Herica

Por padrão, as listas utilizam três bullets nessa ordem: disc ("bolinha", círculo preenchido), circle (círculo não-preenchido) e square (quadrado preenchido). Depois do terceiro nível todas as listas passam a usar square.

Definindo qual bullet usar

Com o atributo type fica fácil escolher:

Exemplo Código
  • Qualidades:
    • Bonito
    • Inteligente
    • Simpático
  • Defeitos:
    • Ciumento
    • Teimoso
    • Guloso
<ul type='square'> <li>Qualidades:
<ul type='circle'>
<li>Bonito
<li>Inteligente
<li>Simpático
</ul>
<li>Defeitos:
<ul type='disc'>
<li>Ciumento
<li>Teimoso
<li>Guloso
</ul> </ul>

Se preferir fazer isso na própria folha de estilos do site para poupar trabalho, também não tem segredo:

<!--
ul {list-style:circle;}
ul ul {list-style:square;
ul ul ul {list-style:disc;}
ul ul ul ul {list-style:circle;}
ul ul ul ul ul {list-style:square;}
-->

2. Usando imagens como bullets

Agora o segredo é CSS. Observe:

Exemplo Código
  • Pessoas
  • Animais
  • Computadores
  • Plantas
  • Cosméticos
<ul style='list-style:url(http://www.websitebullets.com/bullets/215.gif)'>
<li>Pessoas
<li style='list-style:url(http://www.websitebullets.com/bullets/213.gif)';>Animais
<li>Computadores
<li>Plantas
<li>Cosméticos</ul>

No exemplo acima eu defini uma imagem como bullet para toda a lista colocando a classe list-style na tag <ul>. Porém, quis destacar um único ítem com um bullet diferente, então usei novamente a classe list-style, porém dentro da tag <li> do ítem que eu escolhi.

Também posso usar as imagens para diferenciar os vários níveis da lista. Veja:

Exemplo Código
  • Frutas favoritas:
    • Maçã
    • Morango
    • Coco
    • Graviola
  • Pratos favoritos:
<ul style='list-style:url(http://www.clickbusca.com.br/images/Bullets/000000901.gif);'>
<li>Frutas favoritas:
<ul style='list-style:url(http://www.clickbusca.com.br/images/Bullets/000001142.gif); line-height:24px;'>
<li>Maçã
<li>Morango
<li>Coco
<li>Graviola
</ul>
<li>Pratos favoritos:
<ul style='list-style:url(http://www.clickbusca.com.br/images/Bullets/000001142.gif); line-height:24px;'>
<li>Arroz com <a href='http://pt.wikipedia.org/wiki/Pequi' target='_blank'>pequi</a>.
<li>Galinhada com <a href='http://pt.wikipedia.org/wiki/Guariroba_(Palmeira)' target='_blank'>guariroba</a>.
<li>Bife com couve.
</ul>
</ul>

Para fazer isso na folha de estilos e definir uma imagem padrão para todas as listas com bullets do seu site, siga o exemplo:

<--
ul {list-style:url(http://www.websitebullets.com/bullets/245.gif);}
ul ul {list-style:url(http://www.websitebullets.com/bullets/241.gif);}
-->

O importante é que o tamanho da imagem que vai ser o bullet não seja muito maior que o tamanho da fonte da lista.

Bullet fantasminha

Para que sua lista não mostre nenhum bullet, o código é o seguinte:

Exemplo Código
  • Exemplo
  • de
  • lista
  • sem
  • bullet
<ul style="list-style:none;">

Na folha de estilos:

<--
ul {list-style:none;}
ul ul {list-style:none;}
-->
Posts relacionados