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;}
-->

2 comentários:

  1. Mais um show de explicação, parabéms meessmos!!!
    Estou fazendo um novo blog para compartilhar minhas experiências e estou aprendendo muito com vc. Se puder d uma olhadinha, ok?!

    http://digitalvitima.blogspot.com/

    bjus!!!

    ResponderExcluir
  2. Parabéns.

    Além da Explicação ser clara você citou vários tipos de exemplos.
    Vou usar em meu blog.

    Abs

    Douglas

    douglasgodoy.com.br

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.