Set
24

Texto dividido por colunas com CSS3

em Tutoriais, Webdesign, Webdesign

Idealmente, uma linha de texto atinge o seu auge de legibilidade entre as 8 e 12 palavras por linha. Este conceito é vastamente usado pela indústria gráfica e jornais, dividindo o texto por várias colunas.
 
Com CSS3, os webdesigners deixaram de ter a necessidade de criar vários divs, dividir o texto à mão e esperar que os seus visitantes usem a mesma fonte, com o mesmo tamanho e o mesmo browser. Agora, basta um ficheiro de Javascript e tem-se acesso a esta nova propriedade.
 
Não vou entrar em grandes detalhes técnicos, aliás, até porque aqui têm disponivel toda a informação sobre esta nova propriedade. Vou apenas guiar-vos através do processo de implementação desta propriedade e o seu uso correcto.
 

Implementação

 

  1. Fazer copy/paste deste código, num editor de texto qualquer, ou mesmo Dreamweaver ou outro software.
  2. Salvar como “css3-multi-column.js” ou outro nome à escolha, desde que tenha a extensão “.js“, sem as aspas.
  3. Anexar o código logo a seguir ao link para a vossa folha de estilo. Fica uma coisa deste género:
    4. <link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="xhtml" src="css3-multi-column.js"></script>
  4. Agora é só usar as novas propriedades de multi-colunas disponivéis na folha de estilos. Assim:


.nome_da_classe{
column-count:2;/*número de colunas*/
column-width:200px; /*largura de cada coluna, em pixels*/
column-gap:20px;/*distância entre colunas, em pixels*/
column-rule: 1px solid #FFF; /*linha separadora de colunas (opcional).Trata-se como uma border*/

Ficaria, basicamente, uma coisa deste género:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum sem et mi interdum sed rutrum arcu venenatis. Pellentesque scelerisque elementum dolor, sed semper tellus tincidunt a. Aenean varius vestibulum lacus vel venenatis. Maecenas nec leo urna. In ornare sagittis augue a pharetra. Phasellus tristique risus urna, quis faucibus lorem. Morbi porttitor purus libero. Integer pulvinar elit ut turpis consequat ornare. Donec ut erat purus. Vestibulum erat leo, vulputate at dictum at, vestibulum quis tortor. Donec dictum nisl quis lectus sodales tempus. Morbi accumsan, eros non pellentesque sodales, enim est interdum sapien, at consectetur nibh mauris eget libero. Nulla ac lacus in augue tincidunt pellentesque. Pellentesque a odio vel arcu mollis euismod. Sed eleifend hendrerit vehicula.

Advertências

 

  • Os valores de largura (column-width) e de espaçamento (column-gap) só funcionam em pixels.
  • As 3 primeiras propriedades (column-width, column-count e column-gap) têm de estar presentes na mesma classe e não separadas.
  • Com a implementação do Javascript, é possivel que ocorram alguns conflitos com outro código Javascript presente.

    •  

    Compatibilidade entre browsers

     
    Para o Firefox e o Safari conseguirem aplicar esta propriedade, basta adicionar -moz- ou -webkit- antes de cada propriedade, ficando mais ou menos assim:

    
.nome_da_classe{

column-count:2px;

-moz-column-count:2;/*Firefox*/

-webkit-column-count:2;/*Safari*/

}

    Pelos vistos, o Google Chrome já vem preparado para o CSS3.
     
    Caso queiram aprofundar mais sobre isto, deixo alguns links utéis.
     
    Mozilla Developer Center: CSS3 Columns

    CSS Multi-column Layout Mode – W3C

    1 comentário

    Scancatly

    2011-12-06 11:44:18


    who watched the Oscars? levitra

    Donnie Roloson

    2011-02-05 19:29:56


    some truly fantastic info , Glad I detected this.

    Deixe um comentário


    Este é um espaço público e moderado. Não forneça os seus dados pessoais (como telefone ou morada) nem utilize linguagem imprópria.