WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Texto em colunas com CSS3

Publicidade

Criando degradês em divs ou backgrounds utilizando comandos CSS

Neste tutorial demonstraremos diferentes maneiras de dividir o texto de um site em colunas apenas delimitando a largura de cada coluna ou até mesmo o número máximo de colunas. 

Obs importante: Vale lembrar que essa função CSS3 não é suportada pelo navegador Internet Explorer 8 ou anterior.

Lista com prefixo de cada navegador
Google Chrome e Safari: -webkit-
Mozilla Firefox: -moz-

Vejamos alguns exemplos:

.largura-colunas{
   -moz-column-width: 100px;
   -moz-column-gap: 15px;
   -moz-column-rule: 1px solid #666;
   -webkit-column-width: 15em;
   -webkit-column-gap: 15px;
   -webkit-column-rule: 1px solid #666;
}

.numero-colunas{
   -moz-column-count: 4;
   -moz-column-gap: 15px;
   -moz-column-rule: 1px solid #ccc;
   -webkit-column-count: 4;
   -webkit-column-gap: 15px;
   -webkit-column-rule: 1px solid #ccc;
}

Onde:
colum-width: Define a largura de cada coluna que será criada;
column-gap: Define  a largura do espaço em branco entre cada coluna;
column-rule: Define as características da linha que delimita a divisória entre as colunas;
column-count: Define o número máximo de colunas que dividirão o texto.

Abaixo alguns exemplos de utilização:

.largura-colunas{
   -moz-column-width: 100px;
   -moz-column-gap: 15px;
   -moz-column-rule: 1px solid #666;
   -webkit-column-width: 100px;
   -webkit-column-gap: 15px;
   -webkit-column-rule: 1px solid #666;
}

.numero-colunas{
   -moz-column-count: 3;
   -moz-column-gap: 15px;
   -moz-column-rule: 1px solid #ccc;
   -webkit-column-count: 3;
   -webkit-column-gap: 15px;
   -webkit-column-rule: 1px solid #ccc;
}
Veja o Resultado:
Texto limitado pela largura das colunas
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Texto limitado pela quantidade de colunas
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Um cuidado que se deve ter quando utilizar a divisão por colunas é saber qual o tipo de divisão mais adequado para o espaço em que será aplicado, pois um número de colunas muito grande em um espaço pequeno gera colunas muito estreitas e de difícil leitura enquanto colunas muito largas em grandes espaços geram textos muito longos e cansativos.
Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]