Referência W3.CSS
Classes W3.CSS
| Classe |
Define |
|
| recipiente w3 |
Recipiente HTML com preenchimento esquerdo e direito de 16px |
|
| |
Usado como cabeçalho |
|
| |
Usado como rodapé |
|
| w3-painel |
Recipiente HTML com preenchimento esquerdo e direito de 16px e margem superior e inferior de 16px |
|
| |
Usado para exibir uma nota |
|
| |
Usado para exibir uma cotação |
|
| w3-emblema |
Emblema circular |
|
| w3 dia |
Etiqueta retangular |
|
| w3-ul |
Lista não ordenada |
|
| w3-display-container |
Container para w3-display- classes (habilita o posicionamento de elementos dentro do container) |
|
| w3-bloco |
Classe que pode ser usada para definir uma largura total para qualquer elemento |
|
| código w3 |
Contêiner de código |
|
| w3-codespan |
Contêiner de código embutido (para snippets de código) |
|
| w3-conteúdo |
Contêiner para conteúdo centrado em tamanho fixo |
|
| carro w3 |
Contêiner para conteúdo centrado em tamanho responsivo |
|
| w3-esticar |
Classe que remove as margens direita e esquerda (especialmente útil para esticar linhas acolchoadas (w3-row-padding)) |
|
| Classe |
Define |
|
| w3-table |
Contêiner para uma tabela HTML |
|
| w3 listrado |
Mesa listrada |
|
| w3-borda |
Tabela com bordas |
|
| w3-bordado |
Linhas delimitadas |
|
| centrado em w3 |
Mesa centralizada |
|
| w3-pairável |
Mesa flutuante |
|
| w3-table-all |
Todas as propriedades definidas |
|
| |
Com listras w3, bordas w3 e bordas w3 |
|
| |
Com cabeça colorida |
|
| |
Com resposta a w3 |
|
| |
Com w3-minúsculo |
|
| |
Com w3-pequeno |
|
| |
Com w3-grande |
|
| |
Com w3-grande |
|
| |
Com w3-xxlarge |
|
| |
Com w3-xxxgrande |
|
| |
Com cor |
|
| |
Com w3-jumbo |
|
| responsivo a w3 |
Cria uma tabela responsiva |
|
| Classe |
Define |
|
| w3-card |
O mesmo que w3-card-2 |
|
| w3-card-2 |
Contêiner para qualquer conteúdo HTML (sombra com borda de 2px) |
|
| w3-card-4 |
Contêiner para qualquer conteúdo HTML (sombra com borda de 4px) |
|
| Classe |
Define |
|
| w3-linha |
Contêiner para uma linha de conteúdo responsivo fluido |
|
| w3-row-preenchimento |
Linha onde todas as colunas têm um preenchimento padrão |
|
| carro w3 |
Contêiner para conteúdo centrado em tamanho responsivo |
|
| w3-esticar |
Classe que remove as margens direita e esquerda |
|
| w3-metade |
Meia (1/2) coluna da tela |
|
| w3-terço |
Terceiro (1/3) contêiner da coluna da tela |
|
| w3-dois terços |
Dois terceiros (2/3) contêineres de coluna de tela |
|
| w3-quarto |
Recipiente de coluna de tela de um quarto (1/4) |
|
| w3-três quartos |
Recipiente de coluna de tela de três quartos (3/4) |
|
| w3-col |
Recipiente de coluna para qualquer conteúdo HTML |
|
| w3-descanso |
Ocupa o restante da largura da coluna |
|
| |
|
|
| l1 - l12 |
Tamanhos responsivos para telas grandes |
|
| m1 - m12 |
Tamanhos responsivos para telas médias |
|
| s1 - s12 |
Tamanhos responsivos para telas pequenas |
|
| |
|
|
| w3-esconder-pequeno |
Ocultar conteúdo em telas pequenas (menos de 601px) |
|
| w3-ocultar-médio |
Ocultar conteúdo em telas médias |
|
| w3-esconder-grande |
Ocultar conteúdo em telas grandes (maiores que 992px) |
|
| |
|
|
| w3-imagem |
Imagem responsiva |
|
| |
|
|
| w3-móvel |
Adiciona capacidade de resposta móvel a qualquer elemento.
Exibe elementos como elementos de bloco em dispositivos móveis. |
|
| Classe |
Define |
|
| w3-cell-row |
Contêiner para colunas de layout (células). |
|
| w3-cell |
Coluna de layout (célula). |
|
| topo de célula w3 |
Alinha o conteúdo na parte superior de uma coluna (célula). |
|
| w3-cell-middle |
Alinha o conteúdo no meio vertical de uma coluna (célula). |
|
| w3-cell-bottom |
Alinha o conteúdo na parte inferior de uma coluna (célula). |
|
| Classe |
Define |
|
| w3-bar |
Barra horizontal |
|
| w3-bar-block |
Barra vertical |
|
| w3-bar-item |
Fornece estilo comum para itens de barra |
|
| barra lateral w3 |
Barra Lateral |
|
| |
Uma barra lateral pode conter todos os tipos de conteúdo |
|
| |
Uma barra lateral sobrepondo o conteúdo principal |
|
| |
Uma barra lateral sobrepondo todo o conteúdo principal |
|
| |
Uma barra lateral deslocando o conteúdo principal para a direita |
|
| |
Uma barra lateral com um fundo de sobreposição |
|
| |
Uma barra lateral no lado direito |
|
| w3-colapso |
Usado em conjunto com a barra lateral w3 para criar uma navegação lateral responsiva totalmente automática. Para que esta classe funcione, o conteúdo da página deve estar dentro de uma classe "w3-main" |
|
| w3-principal |
Contêiner para o conteúdo da página ao usar a classe w3-collapse para navegação lateral responsiva |
|
| |
Navegação lateral responsiva do lado direito totalmente automática |
|
| w3-dropdown-clique |
Elemento suspenso clicável |
|
| w3-dropdown-hover |
Elemento suspenso flutuante |
|
| |
Elemento suspenso suspenso (usado em w3-bar) |
|
| |
Elemento suspenso suspenso (usado em w3-bar-block) |
|
| |
Elemento suspenso suspenso (usado na barra lateral w3) |
|
| Classe |
Define |
|
| botão w3 |
Botão retangular com cor de fundo cinza ao passar o mouse |
|
| w3-btn |
Botão retangular com sombras em foco |
|
| w3-círculo |
Pode ser usado para criar um botão circular |
|
| w3-ripple |
Botão retangular com efeito cascata |
|
| |
Botão flutuante circular com efeito cascata |
|
| w3-bar |
Pode ser usado para agrupar elementos (como botões) em uma barra horizontal |
|
| w3-bloco |
Classe que pode ser usada para definir um botão w3 de largura total |
|
| |
Largura total w3-btn |
|
| |
Botão circular de largura total |
|
| Classe |
Define |
|
| w3-entrada |
Elementos de entrada |
|
| |
Formulário de entrada como um cartão |
|
| |
Elementos de entrada (rótulos superiores) |
|
| |
Elementos de entrada (rótulos inferiores) |
|
| w3-check |
Tipo de entrada da caixa de seleção |
|
| rádio w3 |
Tipo de entrada de rádio |
|
| w3-selecionar |
Elemento de seleção de entrada |
|
| w3-animate-input |
Anima a largura de uma entrada para 100% |
|
| Classe |
Define |
|
| w3-modal |
Contêiner modal |
|
| w3-modal-conteúdo |
Elemento pop-up modal |
|
| dica de ferramenta w3 |
Elemento de dica de ferramenta |
|
| w3-texto |
Texto da dica de ferramenta |
|
| Classe |
Define |
|
| w3-animate-top |
Anima um elemento do topo -300px a 0px |
|
| w3-animate-esquerda |
Anima um elemento da esquerda -300px para 0px |
|
| w3-animate-bottom |
Anima um elemento da parte inferior -300px a 0px |
|
| w3-animate-right |
Anima um elemento da direita -300px a 0px |
|
| w3-animate-opacity |
Anima a opacidade de um elemento de 0 a 1 |
|
| w3-animar-zoom |
Anima um elemento de 0 a 100% de tamanho |
|
| w3-animate-fading |
Anima a opacidade de um elemento de 0 a 1 e 1 a 0 (fade in AND out) |
|
| w3-giro |
Gire um ícone 360 graus |
|
| |
Gire qualquer elemento em 360 graus |
|
| w3-animate-input |
Anima a largura de um campo de entrada para 100% |
|
| Classe |
Define |
|
| w3-minúsculo |
Especifica um tamanho de fonte de 10 pixels |
|
| w3-pequeno |
Especifica um tamanho de fonte de 12 pixels |
|
| w3-grande |
Especifica um tamanho de fonte de 18 pixels |
|
| w3-grande |
Especifica um tamanho de fonte de 24 pixels |
|
| w3-xxgrande |
Especifica um tamanho de fonte de 32 pixels |
|
| w3-xxxgrande |
Especifica um tamanho de fonte de 48 pixels |
|
| w3-jumbo |
Especifica um tamanho de fonte de 64 pixels |
|
| w3 largo |
Especifica um texto mais amplo |
|
| w3-serif |
Muda a fonte para serifa |
|
| w3-sans-serif |
Muda a fonte para sans-serif |
|
| w3-cursiva |
Muda a fonte para cursiva |
|
| w3-monoespaço |
Muda a fonte para monoespaçado |
|
| Classe |
Define |
|
| w3-centro |
Conteúdo centralizado |
|
| w3-esquerda |
Flutua um elemento para a esquerda (float: left) |
|
| w3-direita |
Flutua um elemento para a direita (float: right) |
|
| w3-alinhar à esquerda |
Texto alinhado à esquerda |
|
| w3-alinhar à direita |
Texto alinhado à direita |
|
| w3-justificar |
Texto alinhado à direita e à esquerda |
|
| w3-bloco |
Classe que pode ser usada para definir uma largura total para qualquer elemento |
|
| w3-círculo |
Conteúdo circulado |
|
| w3-esconder |
Conteúdo oculto (exibir: nenhum) |
|
| w3-show |
Mostrar conteúdo (display:block) |
|
| w3-show-block |
Alias de w3-show (display:block) |
|
| w3-show-inline-block |
Mostrar conteúdo como bloco embutido (display: bloco embutido) |
|
| w3-top |
Conteúdo fixo no topo de uma página |
|
| w3-bottom |
Conteúdo fixo na parte inferior de uma página |
|
| w3-display-container |
Contêiner para classes de exibição w3 (posição: relativa) |
|
| w3-display-topleft |
Exibe o conteúdo no canto superior esquerdo do w3-display-container |
|
| w3-display-topright |
Exibe o conteúdo no canto superior direito do w3-display-container |
|
| w3-display-bottomleft |
Exibe o conteúdo no canto inferior esquerdo do w3-display-container |
|
| w3-display-bottomright |
Exibe o conteúdo no canto inferior direito do w3-display-container |
|
| w3-display-esquerdo |
Exibe o conteúdo à esquerda (meio esquerdo) do w3-display-container |
|
| w3-display-right |
Exibe o conteúdo à direita (meio direito) do w3-display-container |
|
| w3-display-middle |
Exibe o conteúdo no meio (centro) do w3-display-container |
|
| w3-display-topmiddle |
Exibe o conteúdo no meio superior do w3-display-container |
|
| w3-display-bottommiddle |
Exibe o conteúdo na parte inferior central do w3-display-container |
|
| w3-display-position |
Exibe o conteúdo em uma posição especificada no w3-display-container |
|
| w3-display-hover |
Exibe o conteúdo ao passar o mouse dentro do w3-display-container |
|
| Classe |
Define |
|
| w3-opacidade |
Adiciona opacidade/transparência a um elemento (opacidade: 0,6) |
|
| |
Adicione opacidade/transparência ao texto |
|
| w3-opacidade-off |
Desativa a opacidade/transparência (opacidade: 1) |
|
| w3-opacidade-min |
Adiciona opacidade/transparência a um elemento (opacidade: 0,75) |
|
| w3-opacity-max |
Adiciona opacidade/transparência a um elemento (opacidade: 0,25) |
|
| w3-grayscale-min |
Adiciona um efeito de escala de cinza a um elemento (escala de cinza: 50%) |
|
| w3 escala de cinza |
Adiciona um efeito de escala de cinza a um elemento (escala de cinza: 75%) |
|
| w3-grayscale-max |
Adiciona um efeito de escala de cinza a um elemento (escala de cinza: 100%) |
|
| w3-sépia-min |
Adiciona um efeito sépia a um elemento (sépia: 50%) |
|
| w3-sépia |
Adiciona um efeito sépia a um elemento (sépia: 75%) |
|
| w3-sépia-max |
Adiciona um efeito sépia a um elemento (sépia: 100%) |
|
| w3-sobreposição |
Cria um efeito de sobreposição |
|
| Classe |
Define |
|
| w3-vermelho |
Cor de fundo vermelho |
|
| w3-rosa |
cor de fundo rosa |
|
| w3-roxo |
Cor de fundo roxo |
|
| w3-roxo profundo |
Cor de fundo roxo profundo |
|
| w3-índigo |
Cor de fundo índigo |
|
| w3-azul |
Cor de fundo azul |
|
| w3-azul claro |
Cor de fundo azul claro |
|
| w3-ciano |
Cor de fundo ciano |
|
| w3-aqua |
cor de fundo aqua |
|
| w3-azul |
cor de fundo azul-petróleo |
|
| w3-verde |
Cor de fundo verde |
|
| w3-verde-claro |
Cor de fundo verde claro |
|
| w3-cal |
cor de fundo limão |
|
| w3-areia |
Cor de fundo areia |
|
| w3-caqui |
Cor de fundo cáqui |
|
| w3-amarelo |
Cor de fundo amarelo |
|
| w3-âmbar |
Cor de fundo âmbar |
|
| w3-laranja |
Cor de fundo laranja |
|
| w3-laranja profundo |
Cor de fundo laranja profundo |
|
| w3-azul-cinza |
Cor de fundo cinza azul |
|
| w3-marrom |
Cor de fundo marrom |
|
| w3-cinza-claro |
Cor de fundo cinza claro |
|
| w3-cinza |
Cor de fundo cinza |
|
| w3-cinza-escuro |
Cor de fundo cinza escuro |
|
| w3-preto |
Cor de fundo preto |
|
| w3-vermelho-claro |
Cor de fundo vermelho claro |
|
| w3-amarelo-claro |
Cor de fundo amarelo claro |
|
| w3-verde-claro |
Cor de fundo verde claro |
|
| w3-azul-claro |
Cor de fundo azul claro |
|
| w3-transparente |
Cor de fundo transparente |
|
Classes de cores ao passar o mouse
As cores acima também podem ser usadas como classes flutuantes:
| Classe |
Define |
|
| w3-hover-branco |
Passe o mouse na cor branca |
|
| w3-hover-preto |
Passe a cor preta |
|
| w3-hover-red |
Passe a cor vermelha |
|
| w3-hover-blue |
Passe a cor azul |
|
| w3-hover-green |
Passe a cor verde |
|
| w3-hover-aqua |
Passe a cor aqua |
|
| w3-hover-laranja |
Passe o mouse na cor laranja |
|
| w3-hover-grey |
Passe o mouse na cor cinza |
|
| w3-hover-verde-claro |
Passe a cor verde pálido |
|
| Classe |
Define |
|
| w3-texto-vermelho |
Cor do texto vermelho |
|
| w3-texto-verde |
Cor do texto verde |
|
| w3-texto-azul |
Cor do texto azul |
|
| w3-texto-amarelo |
Cor do texto amarelo |
|
| w3-texto-cinza-claro |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
