tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS várias Colunas


CSS3 Multi-coluna layout

O layout CSS3 multi-coluna permite fácil definição de várias colunas de texto - assim como em jornais:

diário Ping

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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


Suporte a navegadores

Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.

Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.

Propriedade
column-count 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-gap 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule-color 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-rule-style 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-rule-width 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-width 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1

Propriedades CSS3 Multi-coluna

Neste capítulo, você vai aprender sobre as seguintes propriedades de várias colunas:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3 criar várias colunas

A column-count propriedade especifica o número de colunas de um elemento deverá ser dividido em.

O exemplo a seguir irá dividir o texto no <div> elemento em 3 colunas:

Exemplo

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
Tente você mesmo "

CSS3 Especifique o Gap entre colunas

A column-gap propriedade especifica a diferença entre as colunas.

O exemplo a seguir especifica uma lacuna de 40 pixels entre as colunas:

Exemplo

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
Tente você mesmo "

Regras Coluna CSS3

A column-rule-style propriedade especifica o estilo da regra entre colunas:

Exemplo

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
Tente você mesmo "

A column-rule-width propriedade especifica a largura da regra entre colunas:

Exemplo

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
Tente você mesmo "

A column-rule-color propriedade especifica a cor da regra entre colunas:

Exemplo

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
Tente você mesmo "

A column-rule propriedade é um atalho para definir todas as propriedades da coluna-rule- * acima.

O exemplo a seguir define a largura, estilo e cor da regra entre colunas:

Exemplo

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
Tente você mesmo "

Especificar quantas colunas de um elemento deve Span

A column-span propriedade especifica quantas colunas um elemento deve abranger toda.

O exemplo a seguir especifica que o <h2> elemento deve abranger entre todas as colunas:

Exemplo

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
Tente você mesmo "

Especifique a largura da coluna

A column-width propriedade especifica, uma largura ideal sugerido para as colunas.

O exemplo a seguir especifica que o sugeriu, a largura ideal para as colunas deve ser 100px:

Exemplo

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}
Tente você mesmo "

Propriedades CSS3 Multi-colunas

A tabela a seguir lista todas as propriedades multi-colunas:

Propriedade Descrição
column-count Especifica o número de colunas de um elemento deverá ser dividido em
column-fill Especifica como preencher colunas
column-gap Especifica a diferença entre as colunas
column-rule Um atalho para definir todas as propriedades da coluna-rule- *
column-rule-color Especifica a cor da regra entre as colunas
column-rule-style Especifica o estilo da regra entre as colunas
column-rule-width Especifica a largura da regra entre as colunas
column-span Especifica quantas colunas um elemento deve abranger entre
column-width Especifica, uma largura ideal sugerido para as colunas
columns Um atalho para definir coluna de largura e column-count