Layout de múltiplas colunas (semelhante a um magazine) com CSS3
Em geral, as pessoas perderão o controle ao ler conteúdo extremamente longo. É por isso que, em mídia impressa, como revistas e jornais, o conteúdo é dividido em várias colunas para facilitar a leitura..
Criar uma coluna na Web é uma história totalmente diferente. É muito difícil. Na verdade, não há muito tempo você pode precisar dividir o conteúdo manualmente em algum divs e flutue-o para a direita ou para a esquerda, depois especifique a largura, o preenchimento, a margem, as bordas e assim por diante.
Mas as coisas agora são muito simplificadas com o Módulo de colunas múltiplas CSS3. Como o nome indica claramente, este módulo nos permite dividir o conteúdo no layout em colunas que vemos nos jornais ou revistas..
Suporte de Navegador
Várias colunas são suportadas atualmente em todos os navegadores - Firefox 2+, Chrome 4+, Safari 3.1+ e Opera 11.1 - exceto, conforme previsto, o Internet Explorer, mas a próxima versão, IE10, parece ter começado a fornecer suporte para este módulo.
Para o resto dos navegadores, para que funcione, o Firefox ainda precisa do -moz- prefixo, enquanto o Chrome e o Safari precisam -webkit- prefixo. O Opera não requer nenhum prefixo, então podemos apenas usar as propriedades oficiais.
Fonte: Quando posso usar o layout da coluna CSS3 Multiple??
Criar várias colunas
Antes de criarmos as colunas, preparamos alguns parágrafos de texto para a demonstração, dentro do HTML5 tag, como segue;
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum em augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sente-se em forma de alibet justo bibendum non. Os convallis do bibendum do inteiro sapien, sentam o placerat do orci do tincidunt do amet dentro. Augue do conseqüat do inteiro do vitae do amet. //e assim por diante
… E especifique a largura para 600 px da folha de estilo, é isso.
Agora vamos começar a criar as colunas.
No exemplo abaixo, dividiremos o conteúdo em duas colunas com o contagem de colunas propriedade. Essa propriedade dirá ao navegador para renderizar o conteúdo em colunas pelo número especificado e permitir que o navegador decida a largura adequada para cada coluna.
artigo -webkit-column-count: 2; -moz-column-count: 2; contagem de colunas: 2;
Além de ser definido pela contagem, as colunas podem ser criadas especificando a largura usando o largura da coluna propriedade e deixando o navegador para decidir quantas colunas devem ser geradas no lugar.
Neste exemplo, especificamos a largura da coluna para 150 px, que resultou no conteúdo a ser dividido em três colunas.
artigo -moz-column-width: 150px; -webkit-column-width: 150px; largura da coluna: 150 px;
Conforme indicado na especificação. a largura real da coluna pode ser mais larga ou mais estreita do que a largura da coluna especificada, dependendo do espaço disponível. Além disso, se o valor da largura não for explicitamente especificado, o “auto” será tomado como padrão, o que também pode significar “sem coluna”.
Coluna Gap
Coluna Gap defina os espaços que separam cada coluna. O valor do intervalo pode ser indicado em em ou px, mas como indicado na especificação o valor não pode ser negativo. No exemplo abaixo, especificamos a lacuna para 30px, então os espaços entre as colunas parecem um pouco mais largos.
artigo -webkit-column-gap: 30px; -moz-column-gap: 30px; intervalo de coluna: 30px;
Regra da Coluna
Se você quiser adicionar bordas entre a coluna, você pode usar o regra de coluna propriedade, que funciona muito semelhante ao fronteira propriedade. Então, digamos, se quisermos colocar uma borda pontilhada entre a coluna, podemos escrever;
artigo -moz-column-rule: 1px pontilhado #ccc; -webkit-column-rule: 1px pontilhado #ccc; regra de coluna: 1px pontilhado #ccc;
Span de Coluna
Esta propriedade funciona bastante semelhante ao colspan em mesa tag. A implementação comum dessa propriedade é abranger o título do conteúdo em todas as colunas. Aqui está um exemplo.
artigo h1 -webkit-column-span: all; coluna-span: todos;
No exemplo acima, definimos o h1 para se estender por todas as colunas e se o período da coluna for especificado, 1 será tomado como padrão. Infelizmente, esta propriedade, no momento da redação deste artigo, só funciona no Opera e Chrome.
Palavras finais
Isso é tudo por agora, nós viemos através de todas as coisas essenciais para criar várias colunas com CSS3, e como mencionamos no começo, este módulo funciona muito bem em navegadores modernos, mas ainda não funciona no Internet Explorer..
Por fim, esperamos que você tenha um bom entendimento sobre como criar colunas com CSS3 e, se tiver tempo para experiências, sinta-se à vontade para compartilhar seus métodos e resultados na caixa de comentários abaixo. Obrigado por ler este post e se divertir.
- Demonstração
- Fonte de download
