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 Interface de usuário


CSS3 User Interface

CSS3 tem novos recursos de interface do usuário, como elementos de redimensionamento, esboços, e dimensionamento de caixa.

Neste capítulo, você vai aprender sobre as seguintes propriedades da interface do usuário:

  • resize
  • outline-offset

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
resize4.0 Não suportado 5.0
4.0 -moz-
4.015.0
outline-offset4.0 Não suportado 5.0
4.0 -moz-
4.09.5

CSS3 redimensionamento

O resize propriedade especifica se ou não um elemento deve ser redimensionáveis pelo usuário.

Este elemento div é redimensionáveis ​​pelo usuário (funciona no Chrome, Firefox, Safari e Opera).

O exemplo a seguir permite que o usuário redimensionar apenas a largura de um <div> elemento:

Exemplo

div {
    resize: horizontal;
    overflow: auto;
}
Tente você mesmo "

O exemplo a seguir permite que o usuário redimensionar somente a altura de um <div> elemento:

Exemplo

div {
    resize: vertical;
    overflow: auto;
}
Tente você mesmo "

O exemplo a seguir permite que o usuário redimensionar a altura ea largura de um <div> elemento:

Exemplo

div {
    resize: both;
    overflow: auto;
}
Tente você mesmo "

CSS3 Contorno offset

O outline-offset propriedade adiciona espaço entre um esboço e da borda ou margem de um elemento.

Contornos diferem das fronteiras de três maneiras:

  • Um esboço é uma linha traçada em torno de elementos, fora da margem de fronteira
  • Um esboço não ocupam espaço
  • Um esquema pode ser não-rectangular
Esta div tem um esboço 15px fora da borda fronteira.

O exemplo a seguir usa a propriedade offset esboço para adicionar um espaço 15px entre a fronteira eo contorno:

Exemplo

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}
Tente você mesmo "

Propriedades da Interface de Usuário CSS3

A tabela a seguir lista todas as propriedades da interface do usuário:

Propriedade Descrição
box-sizing Permite incluir o preenchimento e borda na largura total da um elemento e altura
nav-down Especifica onde a navegação quando se utiliza a tecla de navegação de seta para baixo
nav-index Especifica a ordem de tabulação para um elemento
nav-left Especifica onde a navegação quando se utiliza a tecla de navegação seta-esquerda
nav-right Especifica onde a navegação quando se utiliza a tecla de navegação seta para a direita
nav-up Especifica onde a navegação quando se utiliza a tecla de navegação seta-up
outline-offset Adiciona espaço entre um esboço e da borda ou margem de um elemento
resize Especifica se um elemento é redimensionáveis ​​pelo usuário