Fórum | tutoriais mais recente desenvolvimento web
 

W3.CSS manual de referência


As classes de contêiner

Classe define
w3-container Contêiner para o conteúdo HTML (acrescenta 16px preenchimento à esquerda e à direita) Tente
Usado com classes de cor Tente
Usado como cabeçalho Tente
Usado como rodapé Tente
Usado com w3-leftBar Tente
Usado com w3-bottombar Tente
w3-section Contêiner para o conteúdo HTML (acrescenta topo 16px margem e inferior) Tente
w3-badge Badge Circular 8 Tente
w3-tag Tag rectangular mais tarde! Tente
W3-UL lista não ordenada Tente
w3-display-contêiner Recipiente para as classes w3-display-(posicionar um elemento no canto superior esquerdo, superior direito, inferior esquerdo ou no canto inferior direito, ou no meio do recipiente) Tente
w3-image Obsoleto. Use w3-display-container em vez disso. Tente
w3-blockquote Removido em 2,0 (uso w3-leftBar vez) Tente
W3-código recipiente código Tente
w3-progress-container Progress recipiente bar Tente

Classes de mesa

Classe define
w3-table Recipiente para uma tabela HTML Tente
w3-listrado mesa listrada Tente
w3-border mesa, contornada Tente
w3-fronteira linhas de fronteira Tente
w3-centrada tabela centrada Tente
w3-hoverable mesa Hoverable Tente
w3-table-tudo Todas as propriedades definidas Tente
Com listrado-w3, w3-fronteira e w3-fronteira Tente
Com a cabeça colorido Tente
Com w3-responsáveis Tente
Com w3-tiny Tente
Com w3-small Tente
Com w3-large Tente
Com w3-xlarge Tente
Com w3-XXLarge Tente
Com w3-XXXLarge Tente
com a cor Tente
Com w3-jumbo Tente

Classes de cartão

Classe define
W3-card Recipiente para qualquer conteúdo HTML (com margem) Tente
w3-card-2 Recipiente para qualquer conteúdo HTML (sombra com borda 2px) Tente
w3-card-4 Recipiente para qualquer conteúdo HTML (sombra com borda 4px) Tente
w3-card-8 Recipiente para qualquer conteúdo HTML (sombra com borda 8px) Tente
w3-card-12 Recipiente para qualquer conteúdo HTML (12px fronteira de sombra) Tente
w3-card-16 Recipiente para qualquer conteúdo HTML (16px fronteira de sombra) Tente
w3-card-24 Recipiente para qualquer conteúdo HTML (24px fronteira de sombra) Tente

Classes Responsive

Classe define
w3-row Recipiente para uma linha de conteúdo sensível fluido Tente
w3-row-estofamento Row, onde todas as colunas têm um preenchimento padrão Tente
w3-content Recipiente para o conteúdo tamanho centrais fixos Tente
W3-meia Metade contêiner de coluna (1/2) ecrã Tente
W3 terço Terceiro recipiente coluna (1/3) ecrã Tente
w3-twothird Dois terceiro recipiente coluna (2/3) ecrã Tente
w3 trimestre Trimestre contêiner de coluna (1/4) ecrã Tente
w3-threequarter Três quartos contêiner de coluna (3/4) ecrã Tente
w3-col contêiner de coluna por qualquer conteúdo HTML Tente
L1 - L12 tamanhos sensível para grandes ecrãs Tente
m1 - m12 tamanhos Responsive para telas médias Tente
S1 - s12 tamanhos Responsive para telas pequenas Tente
w3-hide-small Ocultar conteúdo em telas pequenas (menos de 601px) Tente
w3-hide-médio Ocultar o conteúdo em telas médias Tente
-W3-hide grande Ocultar conteúdo em telas grandes (maiores que 992px) Tente

Classes de navegação

Classe define
w3-navbar Barra de navegação Tente
barra de navegação dobrável Tente
w3-topnav barra de navegação superior Tente
w3-sidenav barra de navegação lateral Tente
barra de navegação lateral sobrepondo o conteúdo principal Tente
barra de navegação lateral cobrindo todo o conteúdo principal Tente
barra de navegação lateral mudando o conteúdo principal à direita Tente
barra de navegação lateral com um fundo de sobreposição Tente
w3-colapso navegação lateral responsivo totalmente automático Tente
w3-dropnav navegação suspensa Tente
w3-suspenso clique com o botão elemento suspenso clicável Tente
w3-pendente-pairo elemento suspenso Hoverable Tente
elemento suspenso Hoverable (usado em w3-navbar) Tente
elemento suspenso Hoverable (usado em w3-sidenav) Tente
elemento suspenso Hoverable (usado em w3-topnav) Tente
w3-acordeão Ocultar e mostrar conteúdo recolhível Tente
acordeão clicáveis ​​e suspenso usado em w3-sidenav Tente
w3-pagination links de paginação Tente

Classes de botão

Classe define
w3-btn botão HTML rectangular Tente
botão HTML retangular com efeito cascata Tente
btn-w3-flutuante botão flutuante Circular Tente
botão flutuante circular com efeito cascata Tente
btn-w3-group botões agrupados Tente
btn-w3-block De largura total botões (100%) Tente

Classes de entrada

Classe define
w3-form Mesmo que w3-estofamento Tente
formulário de entrada como um cartão Tente
W3-entrada Os elementos de entrada Tente
Os elementos de entrada (rótulos top) Tente
Os elementos de entrada (etiquetas inferior) Tente
W3-grupo Grupo de elementos HTML Tente
w3-label rótulo de entrada Tente
w3-validate Valida a entrada (muda de cor quando a entrada inválido) Tente
w3-check tipo de entrada caixa de seleção Tente
w3-rádio tipo de entrada de rádio Tente
w3-select Input elemento select Tente
w3-animado-input Anima a largura de uma entrada para 100% Tente

Classes modais

Classe define
w3-modal recipiente modal Tente
w3-modal-content elemento pop-up Modal Tente
w3-dica elemento tooltip Tente
w3-text texto dica de ferramenta Tente
em linha tooltip Tente

Classes de animação

Classe define
w3-animado-top Anima um elemento a partir do topo -300px para 0px Tente
-W3-animado esquerda Anima um elemento de -300px esquerda para 0px Tente
w3-animado-bottom Anima um elemento da -300px fundo para 0px Tente
w3-animado com o botão direito Anima um elemento de -300px direita para 0px Tente
w3-animado-opacidade Anima a opacidade de um elemento de 0 a 1 Tente
w3-animado-zoom Anima um elemento de 0 a 100% no tamanho Tente
-W3-animado desaparecendo Anima a opacidade de um elemento de 0 a 1 e 1 a 0 (desaparece dentro e para fora) Tente
w3-spin Girar um ícone 360 ​​graus Tente
Girar qualquer elemento 360 graus Tente
w3-animado-input Anima a largura de um campo de entrada para 100% Tente

Classes de utilidade

Classe define
w3-tiny Especifica um tamanho de fonte de 10 pixels Tente
w3-small Especifica um tamanho de fonte de 12 pixels Tente
w3-large Especifica um tamanho de fonte de 20 pixels Tente
w3-xlarge Especifica um tamanho de fonte de 24 pixels Tente
w3-XXLarge Especifica um tamanho de fonte de 32 pixels Tente
w3-XXXLarge Especifica um tamanho de fonte de 48 pixels Tente
w3-jumbo Especifica um tamanho de fonte de 64 pixels Tente
w3-slim Especifica um texto mais magro Tente
ampla-W3 Especifica um texto mais amplo Tente
w3-vertical Especifica o texto vertical Tente
w3-top conteúdo fixo no topo da página Tente
w3-center conteúdo centrado Tente
w3-circle conteúdo circulou Tente
w3-esconde conteúdo oculto (display: none) Tente
w3-show Mostrar conteúdo (display: block) Tente
w3-show-block Alias ​​de w3-show (display: block) Tente
w3-show-inline-block Mostrar como conteúdo inline-block (display: inline-block) Tente
w3-hide-small Ocultar conteúdo em telas pequenas (menos de 601px) Tente
w3-hide-médio Ocultar o conteúdo em telas médias Tente
-W3-hide grande Ocultar conteúdo em telas grandes (maiores que 992px) Tente
W3-esquerda conteúdo ajustado à esquerda Tente
w3-direita conteúdo ajustado direita Tente
w3-left-align texto alinhado à esquerda Tente
w3-right-align texto alinhado à direita Tente
w3-justify Direita e texto alinhado à esquerda Tente
w3-display-contêiner Recipiente para as classes w3-display-(position: relative) Tente
w3-display-topleft conteúdo posição no canto superior esquerdo Tente
w3-display-topright conteúdo posição no canto superior direito Tente
w3-display-bottomleft conteúdo posição no canto inferior esquerdo Tente
w3-display-bottomright conteúdo posição no canto inferior direito Tente
w3-display-middle conteúdo Posição no meio (horizontal e verticalmente) Tente
w3-display-topmiddle conteúdo Posição no meio, na parte superior do elemento Tente
w3-display-bottommiddle conteúdo Posição no meio, na parte inferior do elemento Tente
w3-serif Muda a fonte para serif Tente
w3-opacidade Adiciona opacidade para texto Tente
Adiciona opacidade para qualquer elemento Tente
w3-sobreposição Cria um efeito de sobreposição Tente
w3-text-shadow Adiciona sombras para texto Tente

Classes de cor

Classe define
W3-vermelho Fundo da cor vermelha Tente
w3-rosa rosa cor de fundo Tente
w3-roxo cor de fundo roxo Tente
w3-deep-purple cor de fundo roxo escuro Tente
w3-indigo indigo cor de fundo Tente
w3-blue azul cor de fundo Tente
w3-azul-claro Fundo azul claro cor Tente
w3-ciano ciano cor de fundo Tente
w3-Aqua aqua da cor de fundo Tente
w3-teal cerceta cor de fundo Tente
w3-verde verde cor de fundo Tente
w3-luz-verde Fundo verde claro Cor Tente
w3-lime cal cor de fundo Tente
w3 de areia areia cor de fundo Tente
w3-khaki cáqui cor de fundo Tente
w3-amarelo cor de fundo amarelo Tente
w3-âmbar âmbar cor de fundo Tente
W3-laranja laranja cor de fundo Tente
w3-deep-laranja cor de fundo laranja escuro Tente
w3-azul-cinzento cor de fundo cinza azul Tente
w3-brown Fundo marrom cor Tente
w3-cinza-claro cinza claro cor de fundo Tente
w3-cinza cinza cor de fundo Tente
w3-cinza-escuro cor de fundo cinza escuro Tente
w3-preta preto cor de fundo Tente
w3-pálido-vermelho cor de fundo vermelho pálido Tente
w3-amarelo-pálido cor de fundo amarelo pálido Tente
w3-verde-claro cor de fundo verde pálido Tente
w3-azul-claro cor de fundo azul pálido Tente
w3-transparente Transparent background-color

Classes Hover

Todas as cores acima também pode ser utilizado como classes paire:

Classe define
-W3-pairar branco cor branca Hover Tente
-W3-pairo preto cor preta Hover Tente
-W3-foco vermelho Hover cor vermelha Tente
w3-pairar-azul cor azul Hover Tente
-W3-pairar verde cor verde Hover Tente
w3-pairar-Aqua aqua da cor Hover Tente
w3-pairar-laranja cor laranja Hover Tente
-W3-pairar cinza cor cinza Hover Tente
w3-pairar-verde-claro cor verde pálido Hover Tente
w3-pairar-text-vermelho Passe o texto da cor vermelha Tente
w3-pairar-text-vermelho Passe azul cor do texto Tente
w3-pairar-text-verde Passe verde cor do texto Tente
w3-pairar-text-roxo Hover cor do texto roxo Tente
-w3-pairar border- cor cor da borda Hover Tente
w3-pairar-opacidade Adiciona transparência a um elemento em foco (60% de opacidade) Tente
w3-pairar-sombra Adiciona sombra a um elemento em foco Tente
w3-pairar-nenhuns Remove efeitos de foco de um elemento Tente

Classes redondos

Classe define
w3-round Elemento arredondado (border-radius) 4px Tente
w3-small-round Elemento arredondado (border-radius) 2px Tente
w3-round-médio Elemento arredondado (border-radius) 4px Tente
w3-large-round Elemento arredondado (border-radius) 8px Tente
w3-round-xlarge Elemento arredondado (border-radius) 16px Tente
w3-round-XXLarge Elemento arredondado (border-radius) 32px Tente
w3-jumbo-round Elemento arredondado (border-radius) 64px Tente

Classes de preenchimento

Classe define
w3-padding-0 Remove todas as mordomias de um elemento Tente
w3-estofamento Estofamento superior 8px e inferior, e 16px esquerda e direita. Tente
-W3-preenchimento minúsculo Estofamento superior 2px e inferior, e 4px esquerda e direita. Tente
w3-padding-pequena Estofamento superior 4px e inferior, e 8px esquerda e direita. Tente
w3-padding-médio Estofamento superior 8px e inferior, e 16px esquerda e direita. Tente
-W3-preenchimento grande Estofamento superior 12px e inferior, e 24px esquerda e direita. Tente
w3-padding-xlarge Estofamento superior 16px e inferior, e 32px esquerda e direita. Tente
w3-padding-XXLarge Estofamento superior 24px e inferior, e 48px esquerda e direita. Tente
-W3-preenchimento jumbo Estofamento superior 32px e inferior, e 64px esquerda e direita. Tente
w3-padding-top 8px topo estofamento Tente
w3-padding-right Preenchimento 16px direita Tente
w3-padding-bottom 8px fundo estofamento Tente
-W3-padding-left Preenchimento 16px esquerda Tente
w3-padding-hor-4 Preenchimento superior e inferior 4px Tente
w3-padding-hor-8 Preenchimento superior e inferior 8px Tente
w3-padding-hor-12 Preenchimento superior e inferior 12px Tente
w3-padding-hor-16 Preenchimento superior e inferior 16px Tente
w3-padding-hor-24 Preenchimento superior e inferior 24px Tente
w3-padding-hor-32 Preenchimento superior e inferior 32px Tente
w3-padding-hor-48 Preenchimento superior e inferior 48px Tente
w3-padding-hor-64 Preenchimento superior e inferior 64px Tente
w3-padding-hor-128 Preenchimento 128px superior e inferior Tente
w3-padding-ver-4 Preenchimento 4px esquerda e direita. Tente
w3-padding-ver-8 Preenchimento 8px esquerda e direita. Tente
w3-padding-ver-16 Preenchimento 16px esquerda e direita. Tente
w3-padding-ver-24 Preenchimento 24px esquerda e direita. Tente
w3-padding-ver-32 Preenchimento 32px esquerda e direita. Tente
w3-padding-ver-48 Preenchimento 48px esquerda e direita. Tente
w3-padding-ver-64 Preenchimento 64px esquerda e direita. Tente

Classes de margem

Classe define
w3-margin-0 Remove todas as margens de um elemento Tente
w3-margin 16px margem Tente
w3-margin-top 16px margem superior Tente
w3-margin-right Margem de 16px direita Tente
w3-margin-bottom 16px inferior margem Tente
-W3 margem esquerda Margem de 16px esquerda Tente

Classes de Fronteira

Classe define
w3-border Fronteiras (topo, direita e inferior, à esquerda) Tente
w3-border-top parte superior da beira Tente
w3-border-right direito border Tente
w3-border-bottom bottom fronteira Tente
-W3-borda esquerda borda esquerda Tente
w3-border-0 Remove todas as fronteiras Tente
cor w3-border- Exibe quaisquer fronteiras definidas em uma cor específica (como o vermelho, etc) Tente
w3-bottombar Adiciona uma borda fundo grosso (bar) a um elemento Tente
w3-leftBar Adiciona uma borda grossa à esquerda (bar) a um elemento Tente
w3-rightBar Adiciona uma borda direita de espessura (bar) a um elemento Tente
w3-topbar Adiciona uma borda superior de espessura (bar) a um elemento Tente
-w3-pairar border- cor cor da borda Hoverable Tente